Red Birch

CSS

:root {
  --red-birch: #9d2b22;
  --red-birch-rgb: 157 43 34;
  --red-birch-oklch: oklch(0.466 0.152 28.8);
}

.element {
  color: var(--red-birch);
  background-color: hsl(4 64% 37%);
  border-color: oklch(0.466 0.152 28.8);
}

Tailwind CSS v4

@theme {
  --color-red-birch: #9d2b22;
  --color-red-birch-50: #ffe6db;
  --color-red-birch-100: #ffd6ca;
  --color-red-birch-200: #ffbcad;
  --color-red-birch-300: #fb9988;
  --color-red-birch-400: #ea7869;
  --color-red-birch-500: #d85648;
  --color-red-birch-600: #b64a3e;
  --color-red-birch-700: #933b31;
  --color-red-birch-800: #6d2924;
  --color-red-birch-900: #4d1c18;
  --color-red-birch-950: #330b09;
}

SCSS

$red-birch: #9d2b22;
$red-birch-rgb: 157, 43, 34;
$red-birch-light: mix(#fff, $red-birch, 20%);
$red-birch-dark: mix(#000, $red-birch, 20%);

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