Ground Nutmeg

CSS

:root {
  --ground-nutmeg: #a05a3b;
  --ground-nutmeg-rgb: 160 90 59;
  --ground-nutmeg-oklch: oklch(0.542 0.102 44);
}

.element {
  color: var(--ground-nutmeg);
  background-color: hsl(18 46% 43%);
  border-color: oklch(0.542 0.102 44);
}

Tailwind CSS v4

@theme {
  --color-ground-nutmeg: #a05a3b;
  --color-ground-nutmeg-50: #ffeddd;
  --color-ground-nutmeg-100: #ffdecc;
  --color-ground-nutmeg-200: #fac7b0;
  --color-ground-nutmeg-300: #e4a78b;
  --color-ground-nutmeg-400: #d18a6c;
  --color-ground-nutmeg-500: #be6e4b;
  --color-ground-nutmeg-600: #a05e40;
  --color-ground-nutmeg-700: #814b33;
  --color-ground-nutmeg-800: #603625;
  --color-ground-nutmeg-900: #432519;
  --color-ground-nutmeg-950: #2b1309;
}

SCSS

$ground-nutmeg: #a05a3b;
$ground-nutmeg-rgb: 160, 90, 59;
$ground-nutmeg-light: mix(#fff, $ground-nutmeg, 20%);
$ground-nutmeg-dark: mix(#000, $ground-nutmeg, 20%);

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