Dull Yellow

CSS

:root {
  --dull-yellow: #eedc5b;
  --dull-yellow-rgb: 238 220 91;
  --dull-yellow-oklch: oklch(0.885 0.148 101.4);
}

.element {
  color: var(--dull-yellow);
  background-color: hsl(53 81% 65%);
  border-color: oklch(0.885 0.148 101.4);
}

Tailwind CSS v4

@theme {
  --color-dull-yellow: #eedc5b;
  --color-dull-yellow-50: #fcf8c7;
  --color-dull-yellow-100: #f0ebb1;
  --color-dull-yellow-200: #dfd88c;
  --color-dull-yellow-300: #c5bb5a;
  --color-dull-yellow-400: #b1a017;
  --color-dull-yellow-500: #9c8700;
  --color-dull-yellow-600: #847200;
  --color-dull-yellow-700: #695b00;
  --color-dull-yellow-800: #4f4200;
  --color-dull-yellow-900: #372e00;
  --color-dull-yellow-950: #221a00;
}

SCSS

$dull-yellow: #eedc5b;
$dull-yellow-rgb: 238, 220, 91;
$dull-yellow-light: mix(#fff, $dull-yellow, 20%);
$dull-yellow-dark: mix(#000, $dull-yellow, 20%);

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