Stone Ground

CSS

:root {
  --stone-ground: #d39831;
  --stone-ground-rgb: 211 152 49;
  --stone-ground-oklch: oklch(0.72 0.134 76.9);
}

.element {
  color: var(--stone-ground);
  background-color: hsl(38 65% 51%);
  border-color: oklch(0.72 0.134 76.9);
}

Tailwind CSS v4

@theme {
  --color-stone-ground: #d39831;
  --color-stone-ground-50: #fff1cb;
  --color-stone-ground-100: #ffe3b6;
  --color-stone-ground-200: #f3ce93;
  --color-stone-ground-300: #dcaf64;
  --color-stone-ground-400: #ca9334;
  --color-stone-ground-500: #b77700;
  --color-stone-ground-600: #9a6500;
  --color-stone-ground-700: #7c5100;
  --color-stone-ground-800: #5d3a00;
  --color-stone-ground-900: #412800;
  --color-stone-ground-950: #291600;
}

SCSS

$stone-ground: #d39831;
$stone-ground-rgb: 211, 152, 49;
$stone-ground-light: mix(#fff, $stone-ground, 20%);
$stone-ground-dark: mix(#000, $stone-ground, 20%);

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