Pure Earth

CSS

:root {
  --pure-earth: #a79480;
  --pure-earth-rgb: 167 148 128;
  --pure-earth-oklch: oklch(0.678 0.036 68.6);
}

.element {
  color: var(--pure-earth);
  background-color: hsl(31 18% 58%);
  border-color: oklch(0.678 0.036 68.6);
}

Tailwind CSS v4

@theme {
  --color-pure-earth: #a79480;
  --color-pure-earth-50: #fcf4ea;
  --color-pure-earth-100: #f0e6db;
  --color-pure-earth-200: #dfd2c4;
  --color-pure-earth-300: #c4b5a4;
  --color-pure-earth-400: #ad9b88;
  --color-pure-earth-500: #97826d;
  --color-pure-earth-600: #7f6e5c;
  --color-pure-earth-700: #665849;
  --color-pure-earth-800: #4b4035;
  --color-pure-earth-900: #342c24;
  --color-pure-earth-950: #201913;
}

SCSS

$pure-earth: #a79480;
$pure-earth-rgb: 167, 148, 128;
$pure-earth-light: mix(#fff, $pure-earth, 20%);
$pure-earth-dark: mix(#000, $pure-earth, 20%);

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