Summertime

CSS

:root {
  --summertime: #f2d178;
  --summertime-rgb: 242 209 120;
  --summertime-oklch: oklch(0.87 0.115 89.6);
}

.element {
  color: var(--summertime);
  background-color: hsl(44 82% 71%);
  border-color: oklch(0.87 0.115 89.6);
}

Tailwind CSS v4

@theme {
  --color-summertime: #f2d178;
  --color-summertime-50: #fff5d1;
  --color-summertime-100: #f6e7bd;
  --color-summertime-200: #e6d39c;
  --color-summertime-300: #cdb671;
  --color-summertime-400: #b99b47;
  --color-summertime-500: #a48102;
  --color-summertime-600: #8b6e0c;
  --color-summertime-700: #6f580b;
  --color-summertime-800: #533f05;
  --color-summertime-900: #3a2c04;
  --color-summertime-950: #241900;
}

SCSS

$summertime: #f2d178;
$summertime-rgb: 242, 209, 120;
$summertime-light: mix(#fff, $summertime, 20%);
$summertime-dark: mix(#000, $summertime, 20%);

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