Lilacs in Spring

CSS

:root {
  --lilacs-in-spring: #e9cfe5;
  --lilacs-in-spring-rgb: 233 207 229;
  --lilacs-in-spring-oklch: oklch(0.883 0.041 331);
}

.element {
  color: var(--lilacs-in-spring);
  background-color: hsl(309 37% 86%);
  border-color: oklch(0.883 0.041 331);
}

Tailwind CSS v4

@theme {
  --color-lilacs-in-spring: #e9cfe5;
  --color-lilacs-in-spring-50: #fdf1fa;
  --color-lilacs-in-spring-100: #f1e3ee;
  --color-lilacs-in-spring-200: #e0cedc;
  --color-lilacs-in-spring-300: #c5b0c1;
  --color-lilacs-in-spring-400: #ad96aa;
  --color-lilacs-in-spring-500: #977d93;
  --color-lilacs-in-spring-600: #7f6a7c;
  --color-lilacs-in-spring-700: #665463;
  --color-lilacs-in-spring-800: #4b3d49;
  --color-lilacs-in-spring-900: #342a33;
  --color-lilacs-in-spring-950: #1f181f;
}

SCSS

$lilacs-in-spring: #e9cfe5;
$lilacs-in-spring-rgb: 233, 207, 229;
$lilacs-in-spring-light: mix(#fff, $lilacs-in-spring, 20%);
$lilacs-in-spring-dark: mix(#000, $lilacs-in-spring, 20%);

.element {
  color: $lilacs-in-spring;
  box-shadow: 0 0 0 2px rgba($lilacs-in-spring, 0.35);
}