Dawn of the Fairies

CSS

:root {
  --dawn-of-the-fairies: #770044;
  --dawn-of-the-fairies-rgb: 119 0 68;
  --dawn-of-the-fairies-oklch: oklch(0.372 0.153 355.1);
}

.element {
  color: var(--dawn-of-the-fairies);
  background-color: hsl(326 100% 23%);
  border-color: oklch(0.372 0.153 355.1);
}

Tailwind CSS v4

@theme {
  --color-dawn-of-the-fairies: #770044;
  --color-dawn-of-the-fairies-50: #ffe4f6;
  --color-dawn-of-the-fairies-100: #ffd3e8;
  --color-dawn-of-the-fairies-200: #ffb9d5;
  --color-dawn-of-the-fairies-300: #f695b8;
  --color-dawn-of-the-fairies-400: #e375a3;
  --color-dawn-of-the-fairies-500: #d0538b;
  --color-dawn-of-the-fairies-600: #b04776;
  --color-dawn-of-the-fairies-700: #8d385e;
  --color-dawn-of-the-fairies-800: #682847;
  --color-dawn-of-the-fairies-900: #4a1b31;
  --color-dawn-of-the-fairies-950: #300b1d;
}

SCSS

$dawn-of-the-fairies: #770044;
$dawn-of-the-fairies-rgb: 119, 0, 68;
$dawn-of-the-fairies-light: mix(#fff, $dawn-of-the-fairies, 20%);
$dawn-of-the-fairies-dark: mix(#000, $dawn-of-the-fairies, 20%);

.element {
  color: $dawn-of-the-fairies;
  box-shadow: 0 0 0 2px rgba($dawn-of-the-fairies, 0.35);
}