Ground Cumin

CSS

:root {
  --ground-cumin: #8a6c42;
  --ground-cumin-rgb: 138 108 66;
  --ground-cumin-oklch: oklch(0.551 0.07 74.8);
}

.element {
  color: var(--ground-cumin);
  background-color: hsl(35 35% 40%);
  border-color: oklch(0.551 0.07 74.8);
}

Tailwind CSS v4

@theme {
  --color-ground-cumin: #8a6c42;
  --color-ground-cumin-50: #fff3e0;
  --color-ground-cumin-100: #f5e5cf;
  --color-ground-cumin-200: #e5d1b4;
  --color-ground-cumin-300: #ccb390;
  --color-ground-cumin-400: #b79970;
  --color-ground-cumin-500: #a28050;
  --color-ground-cumin-600: #896c44;
  --color-ground-cumin-700: #6d5636;
  --color-ground-cumin-800: #513f27;
  --color-ground-cumin-900: #392b1a;
  --color-ground-cumin-950: #23180a;
}

SCSS

$ground-cumin: #8a6c42;
$ground-cumin-rgb: 138, 108, 66;
$ground-cumin-light: mix(#fff, $ground-cumin, 20%);
$ground-cumin-dark: mix(#000, $ground-cumin, 20%);

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