The End Is Beer

CSS

:root {
  --the-end-is-beer: #eed508;
  --the-end-is-beer-rgb: 238 213 8;
  --the-end-is-beer-oklch: oklch(0.867 0.18 100.7);
}

.element {
  color: var(--the-end-is-beer);
  background-color: hsl(53 93% 48%);
  border-color: oklch(0.867 0.18 100.7);
}

Tailwind CSS v4

@theme {
  --color-the-end-is-beer: #eed508;
  --color-the-end-is-beer-50: #fef8bc;
  --color-the-end-is-beer-100: #f3eba4;
  --color-the-end-is-beer-200: #e2d879;
  --color-the-end-is-beer-300: #c9ba3b;
  --color-the-end-is-beer-400: #b79f00;
  --color-the-end-is-beer-500: #a28500;
  --color-the-end-is-beer-600: #897100;
  --color-the-end-is-beer-700: #6e5a00;
  --color-the-end-is-beer-800: #534100;
  --color-the-end-is-beer-900: #3a2d00;
  --color-the-end-is-beer-950: #241900;
}

SCSS

$the-end-is-beer: #eed508;
$the-end-is-beer-rgb: 238, 213, 8;
$the-end-is-beer-light: mix(#fff, $the-end-is-beer, 20%);
$the-end-is-beer-dark: mix(#000, $the-end-is-beer, 20%);

.element {
  color: $the-end-is-beer;
  box-shadow: 0 0 0 2px rgba($the-end-is-beer, 0.35);
}