Buff Yellow

CSS

:root {
  --buff-yellow: #f0b967;
  --buff-yellow-rgb: 240 185 103;
  --buff-yellow-oklch: oklch(0.819 0.118 75.8);
}

.element {
  color: var(--buff-yellow);
  background-color: hsl(36 82% 67%);
  border-color: oklch(0.819 0.118 75.8);
}

Tailwind CSS v4

@theme {
  --color-buff-yellow: #f0b967;
  --color-buff-yellow-50: #fff2d0;
  --color-buff-yellow-100: #fee4bc;
  --color-buff-yellow-200: #f1cf9b;
  --color-buff-yellow-300: #d9b070;
  --color-buff-yellow-400: #c69446;
  --color-buff-yellow-500: #b27901;
  --color-buff-yellow-600: #97670b;
  --color-buff-yellow-700: #79520a;
  --color-buff-yellow-800: #5a3b06;
  --color-buff-yellow-900: #3f2905;
  --color-buff-yellow-950: #281600;
}

SCSS

$buff-yellow: #f0b967;
$buff-yellow-rgb: 240, 185, 103;
$buff-yellow-light: mix(#fff, $buff-yellow, 20%);
$buff-yellow-dark: mix(#000, $buff-yellow, 20%);

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