Bole

CSS

:root {
  --bole: #79443b;
  --bole-rgb: 121 68 59;
  --bole-oklch: oklch(0.448 0.075 30.5);
}

.element {
  color: var(--bole);
  background-color: hsl(9 34% 35%);
  border-color: oklch(0.448 0.075 30.5);
}

Tailwind CSS v4

@theme {
  --color-bole: #79443b;
  --color-bole-50: #ffeee8;
  --color-bole-100: #ffdfd8;
  --color-bole-200: #f3c9c0;
  --color-bole-300: #dbaa9f;
  --color-bole-400: #c78e84;
  --color-bole-500: #b37368;
  --color-bole-600: #976258;
  --color-bole-700: #794e46;
  --color-bole-800: #5a3833;
  --color-bole-900: #3f2723;
  --color-bole-950: #281512;
}

SCSS

$bole: #79443b;
$bole-rgb: 121, 68, 59;
$bole-light: mix(#fff, $bole, 20%);
$bole-dark: mix(#000, $bole, 20%);

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