Birch Strain

CSS

:root {
  --birch-strain: #dfb45f;
  --birch-strain-rgb: 223 180 95;
  --birch-strain-oklch: oklch(0.791 0.115 82.8);
}

.element {
  color: var(--birch-strain);
  background-color: hsl(40 67% 62%);
  border-color: oklch(0.791 0.115 82.8);
}

Tailwind CSS v4

@theme {
  --color-birch-strain: #dfb45f;
  --color-birch-strain-50: #fff3d1;
  --color-birch-strain-100: #fae6bd;
  --color-birch-strain-200: #ebd19c;
  --color-birch-strain-300: #d3b371;
  --color-birch-strain-400: #c09848;
  --color-birch-strain-500: #ab7e05;
  --color-birch-strain-600: #906a0e;
  --color-birch-strain-700: #74550c;
  --color-birch-strain-800: #573d06;
  --color-birch-strain-900: #3c2a05;
  --color-birch-strain-950: #261800;
}

SCSS

$birch-strain: #dfb45f;
$birch-strain-rgb: 223, 180, 95;
$birch-strain-light: mix(#fff, $birch-strain, 20%);
$birch-strain-dark: mix(#000, $birch-strain, 20%);

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