Balsa Stone

CSS

:root {
  --balsa-stone: #cbbb92;
  --balsa-stone-rgb: 203 187 146;
  --balsa-stone-oklch: oklch(0.795 0.058 89.2);
}

.element {
  color: var(--balsa-stone);
  background-color: hsl(43 35% 68%);
  border-color: oklch(0.795 0.058 89.2);
}

Tailwind CSS v4

@theme {
  --color-balsa-stone: #cbbb92;
  --color-balsa-stone-50: #fbf5e3;
  --color-balsa-stone-100: #efe8d3;
  --color-balsa-stone-200: #ddd4b9;
  --color-balsa-stone-300: #c2b796;
  --color-balsa-stone-400: #ac9d77;
  --color-balsa-stone-500: #958559;
  --color-balsa-stone-600: #7e704c;
  --color-balsa-stone-700: #655a3c;
  --color-balsa-stone-800: #4b412b;
  --color-balsa-stone-900: #342d1d;
  --color-balsa-stone-950: #1f1a0d;
}

SCSS

$balsa-stone: #cbbb92;
$balsa-stone-rgb: 203, 187, 146;
$balsa-stone-light: mix(#fff, $balsa-stone, 20%);
$balsa-stone-dark: mix(#000, $balsa-stone, 20%);

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