Well-Bred Brown

CSS

:root {
  --well-bred-brown: #564537;
  --well-bred-brown-rgb: 86 69 55;
  --well-bred-brown-oklch: oklch(0.404 0.032 61.2);
}

.element {
  color: var(--well-bred-brown);
  background-color: hsl(27 22% 28%);
  border-color: oklch(0.404 0.032 61.2);
}

Tailwind CSS v4

@theme {
  --color-well-bred-brown: #564537;
  --color-well-bred-brown-50: #fcf3ec;
  --color-well-bred-brown-100: #f0e6dd;
  --color-well-bred-brown-200: #dfd2c6;
  --color-well-bred-brown-300: #c4b4a7;
  --color-well-bred-brown-400: #ad9b8b;
  --color-well-bred-brown-500: #978271;
  --color-well-bred-brown-600: #7f6e60;
  --color-well-bred-brown-700: #66584c;
  --color-well-bred-brown-800: #4b4037;
  --color-well-bred-brown-900: #342c26;
  --color-well-bred-brown-950: #201914;
}

SCSS

$well-bred-brown: #564537;
$well-bred-brown-rgb: 86, 69, 55;
$well-bred-brown-light: mix(#fff, $well-bred-brown, 20%);
$well-bred-brown-dark: mix(#000, $well-bred-brown, 20%);

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