Fall Foliage

CSS

:root {
  --fall-foliage: #c28359;
  --fall-foliage-rgb: 194 131 89;
  --fall-foliage-oklch: oklch(0.665 0.097 54);
}

.element {
  color: var(--fall-foliage);
  background-color: hsl(24 46% 55%);
  border-color: oklch(0.665 0.097 54);
}

Tailwind CSS v4

@theme {
  --color-fall-foliage: #c28359;
  --color-fall-foliage-50: #ffefdb;
  --color-fall-foliage-100: #ffe0ca;
  --color-fall-foliage-200: #f5caad;
  --color-fall-foliage-300: #deab87;
  --color-fall-foliage-400: #cb8f67;
  --color-fall-foliage-500: #b77344;
  --color-fall-foliage-600: #9b623b;
  --color-fall-foliage-700: #7c4e2f;
  --color-fall-foliage-800: #5d3821;
  --color-fall-foliage-900: #412616;
  --color-fall-foliage-950: #291507;
}

SCSS

$fall-foliage: #c28359;
$fall-foliage-rgb: 194, 131, 89;
$fall-foliage-light: mix(#fff, $fall-foliage, 20%);
$fall-foliage-dark: mix(#000, $fall-foliage, 20%);

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