Brown Eyed Girl

CSS

:root {
  --brown-eyed-girl: #89491a;
  --brown-eyed-girl-rgb: 137 73 26;
  --brown-eyed-girl-oklch: oklch(0.475 0.105 52.8);
}

.element {
  color: var(--brown-eyed-girl);
  background-color: hsl(25 68% 32%);
  border-color: oklch(0.475 0.105 52.8);
}

Tailwind CSS v4

@theme {
  --color-brown-eyed-girl: #89491a;
  --color-brown-eyed-girl-50: #ffeed9;
  --color-brown-eyed-girl-100: #ffdfc7;
  --color-brown-eyed-girl-200: #f9c9aa;
  --color-brown-eyed-girl-300: #e2a984;
  --color-brown-eyed-girl-400: #cf8d62;
  --color-brown-eyed-girl-500: #bc713e;
  --color-brown-eyed-girl-600: #9f6036;
  --color-brown-eyed-girl-700: #7f4c2b;
  --color-brown-eyed-girl-800: #5f371e;
  --color-brown-eyed-girl-900: #432614;
  --color-brown-eyed-girl-950: #2b1406;
}

SCSS

$brown-eyed-girl: #89491a;
$brown-eyed-girl-rgb: 137, 73, 26;
$brown-eyed-girl-light: mix(#fff, $brown-eyed-girl, 20%);
$brown-eyed-girl-dark: mix(#000, $brown-eyed-girl, 20%);

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