Rise and Shine

CSS

:root {
  --rise-and-shine: #ffe99e;
  --rise-and-shine-rgb: 255 233 158;
  --rise-and-shine-oklch: oklch(0.935 0.097 93.7);
}

.element {
  color: var(--rise-and-shine);
  background-color: hsl(46 100% 81%);
  border-color: oklch(0.935 0.097 93.7);
}

Tailwind CSS v4

@theme {
  --color-rise-and-shine: #ffe99e;
  --color-rise-and-shine-50: #fdf6d7;
  --color-rise-and-shine-100: #f1e8c4;
  --color-rise-and-shine-200: #e0d5a6;
  --color-rise-and-shine-300: #c6b87e;
  --color-rise-and-shine-400: #b19d59;
  --color-rise-and-shine-500: #9c8430;
  --color-rise-and-shine-600: #83702a;
  --color-rise-and-shine-700: #695a21;
  --color-rise-and-shine-800: #4f4116;
  --color-rise-and-shine-900: #372d0e;
  --color-rise-and-shine-950: #221a02;
}

SCSS

$rise-and-shine: #ffe99e;
$rise-and-shine-rgb: 255, 233, 158;
$rise-and-shine-light: mix(#fff, $rise-and-shine, 20%);
$rise-and-shine-dark: mix(#000, $rise-and-shine, 20%);

.element {
  color: $rise-and-shine;
  box-shadow: 0 0 0 2px rgba($rise-and-shine, 0.35);
}