French Bistre

CSS

:root {
  --french-bistre: #856d4d;
  --french-bistre-rgb: 133 109 77;
  --french-bistre-oklch: oklch(0.55 0.055 74.2);
}

.element {
  color: var(--french-bistre);
  background-color: hsl(34 27% 41%);
  border-color: oklch(0.55 0.055 74.2);
}

Tailwind CSS v4

@theme {
  --color-french-bistre: #856d4d;
  --color-french-bistre-50: #fef3e4;
  --color-french-bistre-100: #f3e6d4;
  --color-french-bistre-200: #e2d2bb;
  --color-french-bistre-300: #c8b498;
  --color-french-bistre-400: #b29a7b;
  --color-french-bistre-500: #9c815d;
  --color-french-bistre-600: #846d4f;
  --color-french-bistre-700: #6a573f;
  --color-french-bistre-800: #4e3f2d;
  --color-french-bistre-900: #372c1e;
  --color-french-bistre-950: #21190e;
}

SCSS

$french-bistre: #856d4d;
$french-bistre-rgb: 133, 109, 77;
$french-bistre-light: mix(#fff, $french-bistre, 20%);
$french-bistre-dark: mix(#000, $french-bistre, 20%);

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