Dried Leaf

CSS

:root {
  --dried-leaf: #5c5043;
  --dried-leaf-rgb: 92 80 67;
  --dried-leaf-oklch: oklch(0.439 0.026 69.3);
}

.element {
  color: var(--dried-leaf);
  background-color: hsl(31 16% 31%);
  border-color: oklch(0.439 0.026 69.3);
}

Tailwind CSS v4

@theme {
  --color-dried-leaf: #5c5043;
  --color-dried-leaf-50: #faf4ed;
  --color-dried-leaf-100: #eee7df;
  --color-dried-leaf-200: #dbd3c8;
  --color-dried-leaf-300: #c0b5a9;
  --color-dried-leaf-400: #a99c8e;
  --color-dried-leaf-500: #928374;
  --color-dried-leaf-600: #7b6f62;
  --color-dried-leaf-700: #63594e;
  --color-dried-leaf-800: #494139;
  --color-dried-leaf-900: #322d27;
  --color-dried-leaf-950: #1e1a15;
}

SCSS

$dried-leaf: #5c5043;
$dried-leaf-rgb: 92, 80, 67;
$dried-leaf-light: mix(#fff, $dried-leaf, 20%);
$dried-leaf-dark: mix(#000, $dried-leaf, 20%);

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