Summer Day

CSS

:root {
  --summer-day: #eaaa62;
  --summer-day-rgb: 234 170 98;
  --summer-day-oklch: oklch(0.784 0.117 67.9);
}

.element {
  color: var(--summer-day);
  background-color: hsl(32 76% 65%);
  border-color: oklch(0.784 0.117 67.9);
}

Tailwind CSS v4

@theme {
  --color-summer-day: #eaaa62;
  --color-summer-day-50: #fff0d2;
  --color-summer-day-100: #ffe2be;
  --color-summer-day-200: #f5cc9e;
  --color-summer-day-300: #dead74;
  --color-summer-day-400: #cc914d;
  --color-summer-day-500: #b87519;
  --color-summer-day-600: #9b6319;
  --color-summer-day-700: #7d4f14;
  --color-summer-day-800: #5d390d;
  --color-summer-day-900: #412708;
  --color-summer-day-950: #2a1500;
}

SCSS

$summer-day: #eaaa62;
$summer-day-rgb: 234, 170, 98;
$summer-day-light: mix(#fff, $summer-day, 20%);
$summer-day-dark: mix(#000, $summer-day, 20%);

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