Blanket Brown

CSS

:root {
  --blanket-brown: #9e8574;
  --blanket-brown-rgb: 158 133 116;
  --blanket-brown-oklch: oklch(0.635 0.039 56.1);
}

.element {
  color: var(--blanket-brown);
  background-color: hsl(24 18% 54%);
  border-color: oklch(0.635 0.039 56.1);
}

Tailwind CSS v4

@theme {
  --color-blanket-brown: #9e8574;
  --color-blanket-brown-50: #fef3ea;
  --color-blanket-brown-100: #f3e5db;
  --color-blanket-brown-200: #e2d1c4;
  --color-blanket-brown-300: #c8b3a4;
  --color-blanket-brown-400: #b19988;
  --color-blanket-brown-500: #9b806d;
  --color-blanket-brown-600: #836c5d;
  --color-blanket-brown-700: #69574a;
  --color-blanket-brown-800: #4e3f36;
  --color-blanket-brown-900: #362b25;
  --color-blanket-brown-950: #211913;
}

SCSS

$blanket-brown: #9e8574;
$blanket-brown-rgb: 158, 133, 116;
$blanket-brown-light: mix(#fff, $blanket-brown, 20%);
$blanket-brown-dark: mix(#000, $blanket-brown, 20%);

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