Yellow Summer

CSS

:root {
  --yellow-summer: #f9b500;
  --yellow-summer-rgb: 249 181 0;
  --yellow-summer-oklch: oklch(0.815 0.168 81.3);
}

.element {
  color: var(--yellow-summer);
  background-color: hsl(44 100% 49%);
  border-color: oklch(0.815 0.168 81.3);
}

Tailwind CSS v4

@theme {
  --color-yellow-summer: #f9b500;
  --color-yellow-summer-50: #fff2bf;
  --color-yellow-summer-100: #ffe4a7;
  --color-yellow-summer-200: #f7ce7e;
  --color-yellow-summer-300: #e1af43;
  --color-yellow-summer-400: #d09100;
  --color-yellow-summer-500: #bd7500;
  --color-yellow-summer-600: #a06300;
  --color-yellow-summer-700: #804f00;
  --color-yellow-summer-800: #603900;
  --color-yellow-summer-900: #442700;
  --color-yellow-summer-950: #2c1500;
}

SCSS

$yellow-summer: #f9b500;
$yellow-summer-rgb: 249, 181, 0;
$yellow-summer-light: mix(#fff, $yellow-summer, 20%);
$yellow-summer-dark: mix(#000, $yellow-summer, 20%);

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