Liddell

CSS

:root {
  --liddell: #c99c59;
  --liddell-rgb: 201 156 89;
  --liddell-oklch: oklch(0.721 0.1 76);
}

.element {
  color: var(--liddell);
  background-color: hsl(36 51% 57%);
  border-color: oklch(0.721 0.1 76);
}

Tailwind CSS v4

@theme {
  --color-liddell: #c99c59;
  --color-liddell-50: #fff2d6;
  --color-liddell-100: #fbe4c3;
  --color-liddell-200: #ecd0a4;
  --color-liddell-300: #d4b17c;
  --color-liddell-400: #c19657;
  --color-liddell-500: #ac7c2d;
  --color-liddell-600: #916928;
  --color-liddell-700: #755420;
  --color-liddell-800: #573d16;
  --color-liddell-900: #3d2a0e;
  --color-liddell-950: #261702;
}

SCSS

$liddell: #c99c59;
$liddell-rgb: 201, 156, 89;
$liddell-light: mix(#fff, $liddell, 20%);
$liddell-dark: mix(#000, $liddell, 20%);

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