Whisky Sour

CSS

:root {
  --whisky-sour: #eeaa33;
  --whisky-sour-rgb: 238 170 51;
  --whisky-sour-oklch: oklch(0.784 0.149 76.4);
}

.element {
  color: var(--whisky-sour);
  background-color: hsl(38 85% 57%);
  border-color: oklch(0.784 0.149 76.4);
}

Tailwind CSS v4

@theme {
  --color-whisky-sour: #eeaa33;
  --color-whisky-sour-50: #fff1c6;
  --color-whisky-sour-100: #ffe3b0;
  --color-whisky-sour-200: #f7cd8a;
  --color-whisky-sour-300: #e1ae58;
  --color-whisky-sour-400: #d09118;
  --color-whisky-sour-500: #bc7400;
  --color-whisky-sour-600: #9f6300;
  --color-whisky-sour-700: #804f00;
  --color-whisky-sour-800: #603800;
  --color-whisky-sour-900: #432700;
  --color-whisky-sour-950: #2b1500;
}

SCSS

$whisky-sour: #eeaa33;
$whisky-sour-rgb: 238, 170, 51;
$whisky-sour-light: mix(#fff, $whisky-sour, 20%);
$whisky-sour-dark: mix(#000, $whisky-sour, 20%);

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