East of the Sun

CSS

:root {
  --east-of-the-sun: #f8e587;
  --east-of-the-sun-rgb: 248 229 135;
  --east-of-the-sun-oklch: oklch(0.918 0.117 98.2);
}

.element {
  color: var(--east-of-the-sun);
  background-color: hsl(50 89% 75%);
  border-color: oklch(0.918 0.117 98.2);
}

Tailwind CSS v4

@theme {
  --color-east-of-the-sun: #f8e587;
  --color-east-of-the-sun-50: #fcf7d1;
  --color-east-of-the-sun-100: #f0eabd;
  --color-east-of-the-sun-200: #dfd69c;
  --color-east-of-the-sun-300: #c5b971;
  --color-east-of-the-sun-400: #b19f46;
  --color-east-of-the-sun-500: #9b8600;
  --color-east-of-the-sun-600: #83710a;
  --color-east-of-the-sun-700: #695b0a;
  --color-east-of-the-sun-800: #4e4204;
  --color-east-of-the-sun-900: #362d04;
  --color-east-of-the-sun-950: #211a00;
}

SCSS

$east-of-the-sun: #f8e587;
$east-of-the-sun-rgb: 248, 229, 135;
$east-of-the-sun-light: mix(#fff, $east-of-the-sun, 20%);
$east-of-the-sun-dark: mix(#000, $east-of-the-sun, 20%);

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