Charlie Brown

CSS

:root {
  --charlie-brown: #995500;
  --charlie-brown-rgb: 153 85 0;
  --charlie-brown-oklch: oklch(0.519 0.121 60.9);
}

.element {
  color: var(--charlie-brown);
  background-color: hsl(33 100% 30%);
  border-color: oklch(0.519 0.121 60.9);
}

Tailwind CSS v4

@theme {
  --color-charlie-brown: #995500;
  --color-charlie-brown-50: #ffeed2;
  --color-charlie-brown-100: #ffe0bf;
  --color-charlie-brown-200: #faca9f;
  --color-charlie-brown-300: #e4aa75;
  --color-charlie-brown-400: #d28d4f;
  --color-charlie-brown-500: #be701f;
  --color-charlie-brown-600: #a1601d;
  --color-charlie-brown-700: #814c17;
  --color-charlie-brown-800: #603710;
  --color-charlie-brown-900: #44250a;
  --color-charlie-brown-950: #2c1400;
}

SCSS

$charlie-brown: #995500;
$charlie-brown-rgb: 153, 85, 0;
$charlie-brown-light: mix(#fff, $charlie-brown, 20%);
$charlie-brown-dark: mix(#000, $charlie-brown, 20%);

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