Candle in the Wind

CSS

:root {
  --candle-in-the-wind: #f9ebbf;
  --candle-in-the-wind-rgb: 249 235 191;
  --candle-in-the-wind-oklch: oklch(0.94 0.059 92.5);
}

.element {
  color: var(--candle-in-the-wind);
  background-color: hsl(46 83% 86%);
  border-color: oklch(0.94 0.059 92.5);
}

Tailwind CSS v4

@theme {
  --color-candle-in-the-wind: #f9ebbf;
  --color-candle-in-the-wind-50: #faf5e3;
  --color-candle-in-the-wind-100: #eee8d2;
  --color-candle-in-the-wind-200: #dcd4b8;
  --color-candle-in-the-wind-300: #c1b896;
  --color-candle-in-the-wind-400: #ab9e77;
  --color-candle-in-the-wind-500: #948558;
  --color-candle-in-the-wind-600: #7d714b;
  --color-candle-in-the-wind-700: #645a3c;
  --color-candle-in-the-wind-800: #4a422a;
  --color-candle-in-the-wind-900: #332d1c;
  --color-candle-in-the-wind-950: #1f1a0d;
}

SCSS

$candle-in-the-wind: #f9ebbf;
$candle-in-the-wind-rgb: 249, 235, 191;
$candle-in-the-wind-light: mix(#fff, $candle-in-the-wind, 20%);
$candle-in-the-wind-dark: mix(#000, $candle-in-the-wind, 20%);

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