Plague Brown

CSS

:root {
  --plague-brown: #dfb900;
  --plague-brown-rgb: 223 185 0;
  --plague-brown-oklch: oklch(0.796 0.163 94);
}

.element {
  color: var(--plague-brown);
  background-color: hsl(50 100% 44%);
  border-color: oklch(0.796 0.163 94);
}

Tailwind CSS v4

@theme {
  --color-plague-brown: #dfb900;
  --color-plague-brown-50: #fff6c1;
  --color-plague-brown-100: #f8e8aa;
  --color-plague-brown-200: #e9d481;
  --color-plague-brown-300: #d0b749;
  --color-plague-brown-400: #be9b00;
  --color-plague-brown-500: #aa8000;
  --color-plague-brown-600: #906d00;
  --color-plague-brown-700: #735700;
  --color-plague-brown-800: #573f00;
  --color-plague-brown-900: #3d2b00;
  --color-plague-brown-950: #261800;
}

SCSS

$plague-brown: #dfb900;
$plague-brown-rgb: 223, 185, 0;
$plague-brown-light: mix(#fff, $plague-brown, 20%);
$plague-brown-dark: mix(#000, $plague-brown, 20%);

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