Duck Tail

CSS

:root {
  --duck-tail: #e9d6b1;
  --duck-tail-rgb: 233 214 177;
  --duck-tail-oklch: oklch(0.882 0.053 84);
}

.element {
  color: var(--duck-tail);
  background-color: hsl(40 56% 80%);
  border-color: oklch(0.882 0.053 84);
}

Tailwind CSS v4

@theme {
  --color-duck-tail: #e9d6b1;
  --color-duck-tail-50: #fcf4e4;
  --color-duck-tail-100: #f0e7d4;
  --color-duck-tail-200: #ded3bb;
  --color-duck-tail-300: #c4b699;
  --color-duck-tail-400: #ad9c7b;
  --color-duck-tail-500: #97845d;
  --color-duck-tail-600: #806f4f;
  --color-duck-tail-700: #66593f;
  --color-duck-tail-800: #4c412d;
  --color-duck-tail-900: #352d1e;
  --color-duck-tail-950: #201a0e;
}

SCSS

$duck-tail: #e9d6b1;
$duck-tail-rgb: 233, 214, 177;
$duck-tail-light: mix(#fff, $duck-tail, 20%);
$duck-tail-dark: mix(#000, $duck-tail, 20%);

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