Buzz

CSS

:root {
  --buzz: #f0c641;
  --buzz-rgb: 240 198 65;
  --buzz-oklch: oklch(0.841 0.151 90.7);
}

.element {
  color: var(--buzz);
  background-color: hsl(46 85% 60%);
  border-color: oklch(0.841 0.151 90.7);
}

Tailwind CSS v4

@theme {
  --color-buzz: #f0c641;
  --color-buzz-50: #fff5c4;
  --color-buzz-100: #f9e7ae;
  --color-buzz-200: #ebd388;
  --color-buzz-300: #d2b554;
  --color-buzz-400: #c09900;
  --color-buzz-500: #ac7f00;
  --color-buzz-600: #916c00;
  --color-buzz-700: #745600;
  --color-buzz-800: #573e00;
  --color-buzz-900: #3d2b00;
  --color-buzz-950: #271800;
}

SCSS

$buzz: #f0c641;
$buzz-rgb: 240, 198, 65;
$buzz-light: mix(#fff, $buzz, 20%);
$buzz-dark: mix(#000, $buzz, 20%);

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