False Morel

CSS

:root {
  --false-morel: #784d4c;
  --false-morel-rgb: 120 77 76;
  --false-morel-oklch: oklch(0.468 0.059 21);
}

.element {
  color: var(--false-morel);
  background-color: hsl(1 22% 38%);
  border-color: oklch(0.468 0.059 21);
}

Tailwind CSS v4

@theme {
  --color-false-morel: #784d4c;
  --color-false-morel-50: #ffefed;
  --color-false-morel-100: #fbe1df;
  --color-false-morel-200: #edcbc9;
  --color-false-morel-300: #d4aca9;
  --color-false-morel-400: #bf918f;
  --color-false-morel-500: #aa7775;
  --color-false-morel-600: #906563;
  --color-false-morel-700: #73504f;
  --color-false-morel-800: #553a3a;
  --color-false-morel-900: #3b2828;
  --color-false-morel-950: #251616;
}

SCSS

$false-morel: #784d4c;
$false-morel-rgb: 120, 77, 76;
$false-morel-light: mix(#fff, $false-morel, 20%);
$false-morel-dark: mix(#000, $false-morel, 20%);

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