Ginger Jar

CSS

:root {
  --ginger-jar: #c6a05e;
  --ginger-jar-rgb: 198 160 94;
  --ginger-jar-oklch: oklch(0.726 0.096 80.2);
}

.element {
  color: var(--ginger-jar);
  background-color: hsl(38 48% 57%);
  border-color: oklch(0.726 0.096 80.2);
}

Tailwind CSS v4

@theme {
  --color-ginger-jar: #c6a05e;
  --color-ginger-jar-50: #fff3d7;
  --color-ginger-jar-100: #f8e6c4;
  --color-ginger-jar-200: #e9d1a6;
  --color-ginger-jar-300: #d0b37f;
  --color-ginger-jar-400: #bc985a;
  --color-ginger-jar-500: #a77e32;
  --color-ginger-jar-600: #8d6b2c;
  --color-ginger-jar-700: #715623;
  --color-ginger-jar-800: #543e18;
  --color-ginger-jar-900: #3b2b0f;
  --color-ginger-jar-950: #251803;
}

SCSS

$ginger-jar: #c6a05e;
$ginger-jar-rgb: 198, 160, 94;
$ginger-jar-light: mix(#fff, $ginger-jar, 20%);
$ginger-jar-dark: mix(#000, $ginger-jar, 20%);

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