Sombre

CSS

:root {
  --sombre: #cbb489;
  --sombre-rgb: 203 180 137;
  --sombre-oklch: oklch(0.779 0.063 82.9);
}

.element {
  color: var(--sombre);
  background-color: hsl(39 39% 67%);
  border-color: oklch(0.779 0.063 82.9);
}

Tailwind CSS v4

@theme {
  --color-sombre: #cbb489;
  --color-sombre-50: #fef4e1;
  --color-sombre-100: #f2e7d1;
  --color-sombre-200: #e1d3b6;
  --color-sombre-300: #c6b593;
  --color-sombre-400: #b19c74;
  --color-sombre-500: #9b8354;
  --color-sombre-600: #836f48;
  --color-sombre-700: #695839;
  --color-sombre-800: #4e4029;
  --color-sombre-900: #362c1b;
  --color-sombre-950: #21190c;
}

SCSS

$sombre: #cbb489;
$sombre-rgb: 203, 180, 137;
$sombre-light: mix(#fff, $sombre, 20%);
$sombre-dark: mix(#000, $sombre, 20%);

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