Toile Red

CSS

:root {
  --toile-red: #8b534e;
  --toile-red-rgb: 139 83 78;
  --toile-red-oklch: oklch(0.505 0.076 25.6);
}

.element {
  color: var(--toile-red);
  background-color: hsl(5 28% 43%);
  border-color: oklch(0.505 0.076 25.6);
}

Tailwind CSS v4

@theme {
  --color-toile-red: #8b534e;
  --color-toile-red-50: #ffeee9;
  --color-toile-red-100: #ffdfda;
  --color-toile-red-200: #f3c9c3;
  --color-toile-red-300: #dca9a2;
  --color-toile-red-400: #c88d87;
  --color-toile-red-500: #b3726c;
  --color-toile-red-600: #97615c;
  --color-toile-red-700: #794d49;
  --color-toile-red-800: #5a3836;
  --color-toile-red-900: #3f2625;
  --color-toile-red-950: #281413;
}

SCSS

$toile-red: #8b534e;
$toile-red-rgb: 139, 83, 78;
$toile-red-light: mix(#fff, $toile-red, 20%);
$toile-red-dark: mix(#000, $toile-red, 20%);

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