Chestnut Brown

CSS

:root {
  --chestnut-brown: #6d1008;
  --chestnut-brown-rgb: 109 16 8;
  --chestnut-brown-oklch: oklch(0.347 0.127 29.9);
}

.element {
  color: var(--chestnut-brown);
  background-color: hsl(5 86% 23%);
  border-color: oklch(0.347 0.127 29.9);
}

Tailwind CSS v4

@theme {
  --color-chestnut-brown: #6d1008;
  --color-chestnut-brown-50: #ffe9df;
  --color-chestnut-brown-100: #ffd9ce;
  --color-chestnut-brown-200: #ffc1b2;
  --color-chestnut-brown-300: #f19f8e;
  --color-chestnut-brown-400: #df8071;
  --color-chestnut-brown-500: #cd6151;
  --color-chestnut-brown-600: #ad5346;
  --color-chestnut-brown-700: #8b4237;
  --color-chestnut-brown-800: #672f29;
  --color-chestnut-brown-900: #49201b;
  --color-chestnut-brown-950: #2f0f0c;
}

SCSS

$chestnut-brown: #6d1008;
$chestnut-brown-rgb: 109, 16, 8;
$chestnut-brown-light: mix(#fff, $chestnut-brown, 20%);
$chestnut-brown-dark: mix(#000, $chestnut-brown, 20%);

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