Red Willow

CSS

:root {
  --red-willow: #885a55;
  --red-willow-rgb: 136 90 85;
  --red-willow-oklch: oklch(0.516 0.062 26.3);
}

.element {
  color: var(--red-willow);
  background-color: hsl(6 23% 43%);
  border-color: oklch(0.516 0.062 26.3);
}

Tailwind CSS v4

@theme {
  --color-red-willow: #885a55;
  --color-red-willow-50: #ffefeb;
  --color-red-willow-100: #fce1dc;
  --color-red-willow-200: #eecbc6;
  --color-red-willow-300: #d5aca6;
  --color-red-willow-400: #c0918b;
  --color-red-willow-500: #ac7671;
  --color-red-willow-600: #91645f;
  --color-red-willow-700: #74504c;
  --color-red-willow-800: #563a38;
  --color-red-willow-900: #3c2826;
  --color-red-willow-950: #261615;
}

SCSS

$red-willow: #885a55;
$red-willow-rgb: 136, 90, 85;
$red-willow-light: mix(#fff, $red-willow, 20%);
$red-willow-dark: mix(#000, $red-willow, 20%);

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