Ginger Dy

CSS

:root {
  --ginger-dy: #97653c;
  --ginger-dy-rgb: 151 101 60;
  --ginger-dy-oklch: oklch(0.551 0.086 59);
}

.element {
  color: var(--ginger-dy);
  background-color: hsl(27 43% 41%);
  border-color: oklch(0.551 0.086 59);
}

Tailwind CSS v4

@theme {
  --color-ginger-dy: #97653c;
  --color-ginger-dy-50: #fff0dd;
  --color-ginger-dy-100: #fee2cc;
  --color-ginger-dy-200: #f0cdb0;
  --color-ginger-dy-300: #d8ae8b;
  --color-ginger-dy-400: #c5926b;
  --color-ginger-dy-500: #b07849;
  --color-ginger-dy-600: #95653f;
  --color-ginger-dy-700: #775132;
  --color-ginger-dy-800: #593a24;
  --color-ginger-dy-900: #3e2818;
  --color-ginger-dy-950: #271609;
}

SCSS

$ginger-dy: #97653c;
$ginger-dy-rgb: 151, 101, 60;
$ginger-dy-light: mix(#fff, $ginger-dy, 20%);
$ginger-dy-dark: mix(#000, $ginger-dy, 20%);

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