Barrel Sponge

CSS

:root {
  --barrel-sponge: #9e3c31;
  --barrel-sponge-rgb: 158 60 49;
  --barrel-sponge-oklch: oklch(0.49 0.133 29.2);
}

.element {
  color: var(--barrel-sponge);
  background-color: hsl(6 53% 41%);
  border-color: oklch(0.49 0.133 29.2);
}

Tailwind CSS v4

@theme {
  --color-barrel-sponge: #9e3c31;
  --color-barrel-sponge-50: #ffe8de;
  --color-barrel-sponge-100: #ffd8cd;
  --color-barrel-sponge-200: #ffc0b2;
  --color-barrel-sponge-300: #f49e8d;
  --color-barrel-sponge-400: #e27e70;
  --color-barrel-sponge-500: #cf5e50;
  --color-barrel-sponge-600: #af5144;
  --color-barrel-sponge-700: #8d4036;
  --color-barrel-sponge-800: #692e28;
  --color-barrel-sponge-900: #4a1f1b;
  --color-barrel-sponge-950: #300e0b;
}

SCSS

$barrel-sponge: #9e3c31;
$barrel-sponge-rgb: 158, 60, 49;
$barrel-sponge-light: mix(#fff, $barrel-sponge, 20%);
$barrel-sponge-dark: mix(#000, $barrel-sponge, 20%);

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