Fall Leaf

CSS

:root {
  --fall-leaf: #e5b7a5;
  --fall-leaf-rgb: 229 183 165;
  --fall-leaf-oklch: oklch(0.816 0.059 42.4);
}

.element {
  color: var(--fall-leaf);
  background-color: hsl(17 55% 77%);
  border-color: oklch(0.816 0.059 42.4);
}

Tailwind CSS v4

@theme {
  --color-fall-leaf: #e5b7a5;
  --color-fall-leaf-50: #fff0e8;
  --color-fall-leaf-100: #fae2d8;
  --color-fall-leaf-200: #ebcdc0;
  --color-fall-leaf-300: #d2ae9f;
  --color-fall-leaf-400: #be9483;
  --color-fall-leaf-500: #a87a67;
  --color-fall-leaf-600: #8e6758;
  --color-fall-leaf-700: #725246;
  --color-fall-leaf-800: #543c33;
  --color-fall-leaf-900: #3b2922;
  --color-fall-leaf-950: #251712;
}

SCSS

$fall-leaf: #e5b7a5;
$fall-leaf-rgb: 229, 183, 165;
$fall-leaf-light: mix(#fff, $fall-leaf, 20%);
$fall-leaf-dark: mix(#000, $fall-leaf, 20%);

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