Dance of the Goddesses

CSS

:root {
  --dance-of-the-goddesses: #e6d8cd;
  --dance-of-the-goddesses-rgb: 230 216 205;
  --dance-of-the-goddesses-oklch: oklch(0.89 0.022 60.7);
}

.element {
  color: var(--dance-of-the-goddesses);
  background-color: hsl(26 33% 85%);
  border-color: oklch(0.89 0.022 60.7);
}

Tailwind CSS v4

@theme {
  --color-dance-of-the-goddesses: #e6d8cd;
  --color-dance-of-the-goddesses-50: #faf4ef;
  --color-dance-of-the-goddesses-100: #ede6e1;
  --color-dance-of-the-goddesses-200: #dbd2cb;
  --color-dance-of-the-goddesses-300: #c0b5ac;
  --color-dance-of-the-goddesses-400: #a89c92;
  --color-dance-of-the-goddesses-500: #918378;
  --color-dance-of-the-goddesses-600: #7b6f66;
  --color-dance-of-the-goddesses-700: #625951;
  --color-dance-of-the-goddesses-800: #48413b;
  --color-dance-of-the-goddesses-900: #322d29;
  --color-dance-of-the-goddesses-950: #1e1a16;
}

SCSS

$dance-of-the-goddesses: #e6d8cd;
$dance-of-the-goddesses-rgb: 230, 216, 205;
$dance-of-the-goddesses-light: mix(#fff, $dance-of-the-goddesses, 20%);
$dance-of-the-goddesses-dark: mix(#000, $dance-of-the-goddesses, 20%);

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