Bales of Brown

CSS

:root {
  --bales-of-brown: #cf994b;
  --bales-of-brown-rgb: 207 153 75;
  --bales-of-brown-oklch: oklch(0.72 0.115 74.2);
}

.element {
  color: var(--bales-of-brown);
  background-color: hsl(35 58% 55%);
  border-color: oklch(0.72 0.115 74.2);
}

Tailwind CSS v4

@theme {
  --color-bales-of-brown: #cf994b;
  --color-bales-of-brown-50: #fff1d1;
  --color-bales-of-brown-100: #fee3be;
  --color-bales-of-brown-200: #f1ce9d;
  --color-bales-of-brown-300: #d9b073;
  --color-bales-of-brown-400: #c7944b;
  --color-bales-of-brown-500: #b37913;
  --color-bales-of-brown-600: #976615;
  --color-bales-of-brown-700: #795211;
  --color-bales-of-brown-800: #5a3b0b;
  --color-bales-of-brown-900: #3f2807;
  --color-bales-of-brown-950: #281600;
}

SCSS

$bales-of-brown: #cf994b;
$bales-of-brown-rgb: 207, 153, 75;
$bales-of-brown-light: mix(#fff, $bales-of-brown, 20%);
$bales-of-brown-dark: mix(#000, $bales-of-brown, 20%);

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