New Wool

CSS

:root {
  --new-wool: #d6c3b9;
  --new-wool-rgb: 214 195 185;
  --new-wool-oklch: oklch(0.83 0.026 49.7);
}

.element {
  color: var(--new-wool);
  background-color: hsl(21 26% 78%);
  border-color: oklch(0.83 0.026 49.7);
}

Tailwind CSS v4

@theme {
  --color-new-wool: #d6c3b9;
  --color-new-wool-50: #fcf3ef;
  --color-new-wool-100: #efe6e0;
  --color-new-wool-200: #ded1ca;
  --color-new-wool-300: #c3b4ac;
  --color-new-wool-400: #ac9a91;
  --color-new-wool-500: #958277;
  --color-new-wool-600: #7e6e65;
  --color-new-wool-700: #655851;
  --color-new-wool-800: #4a403b;
  --color-new-wool-900: #332c28;
  --color-new-wool-950: #1f1916;
}

SCSS

$new-wool: #d6c3b9;
$new-wool-rgb: 214, 195, 185;
$new-wool-light: mix(#fff, $new-wool, 20%);
$new-wool-dark: mix(#000, $new-wool, 20%);

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