Song of Summer

CSS

:root {
  --song-of-summer: #fce7b5;
  --song-of-summer-rgb: 252 231 181;
  --song-of-summer-oklch: oklch(0.933 0.068 87.9);
}

.element {
  color: var(--song-of-summer);
  background-color: hsl(42 92% 85%);
  border-color: oklch(0.933 0.068 87.9);
}

Tailwind CSS v4

@theme {
  --color-song-of-summer: #fce7b5;
  --color-song-of-summer-50: #fdf5e0;
  --color-song-of-summer-100: #f1e7cf;
  --color-song-of-summer-200: #e0d4b4;
  --color-song-of-summer-300: #c5b690;
  --color-song-of-summer-400: #af9d70;
  --color-song-of-summer-500: #998450;
  --color-song-of-summer-600: #817044;
  --color-song-of-summer-700: #685936;
  --color-song-of-summer-800: #4d4126;
  --color-song-of-summer-900: #352d19;
  --color-song-of-summer-950: #211a0a;
}

SCSS

$song-of-summer: #fce7b5;
$song-of-summer-rgb: 252, 231, 181;
$song-of-summer-light: mix(#fff, $song-of-summer, 20%);
$song-of-summer-dark: mix(#000, $song-of-summer, 20%);

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