Fire Dance

CSS

:root {
  --fire-dance: #e3d590;
  --fire-dance-rgb: 227 213 144;
  --fire-dance-oklch: oklch(0.869 0.089 98.1);
}

.element {
  color: var(--fire-dance);
  background-color: hsl(50 60% 73%);
  border-color: oklch(0.869 0.089 98.1);
}

Tailwind CSS v4

@theme {
  --color-fire-dance: #e3d590;
  --color-fire-dance-50: #fbf6d9;
  --color-fire-dance-100: #eee9c7;
  --color-fire-dance-200: #ddd6aa;
  --color-fire-dance-300: #c2b984;
  --color-fire-dance-400: #ac9f60;
  --color-fire-dance-500: #96873a;
  --color-fire-dance-600: #7f7233;
  --color-fire-dance-700: #655b28;
  --color-fire-dance-800: #4b421b;
  --color-fire-dance-900: #342e11;
  --color-fire-dance-950: #201a04;
}

SCSS

$fire-dance: #e3d590;
$fire-dance-rgb: 227, 213, 144;
$fire-dance-light: mix(#fff, $fire-dance, 20%);
$fire-dance-dark: mix(#000, $fire-dance, 20%);

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