Windsor Brown

CSS

:root {
  --windsor-brown: #a75502;
  --windsor-brown-rgb: 167 85 2;
  --windsor-brown-oklch: oklch(0.539 0.133 55);
}

.element {
  color: var(--windsor-brown);
  background-color: hsl(30 98% 33%);
  border-color: oklch(0.539 0.133 55);
}

Tailwind CSS v4

@theme {
  --color-windsor-brown: #a75502;
  --color-windsor-brown-50: #ffecd1;
  --color-windsor-brown-100: #ffdebd;
  --color-windsor-brown-200: #ffc69d;
  --color-windsor-brown-300: #eba672;
  --color-windsor-brown-400: #da884c;
  --color-windsor-brown-500: #c76a16;
  --color-windsor-brown-600: #a85a17;
  --color-windsor-brown-700: #874813;
  --color-windsor-brown-800: #65330d;
  --color-windsor-brown-900: #472308;
  --color-windsor-brown-950: #2e1100;
}

SCSS

$windsor-brown: #a75502;
$windsor-brown-rgb: 167, 85, 2;
$windsor-brown-light: mix(#fff, $windsor-brown, 20%);
$windsor-brown-dark: mix(#000, $windsor-brown, 20%);

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