Pale Lichen

CSS

:root {
  --pale-lichen: #d8d4bf;
  --pale-lichen-rgb: 216 212 191;
  --pale-lichen-oklch: oklch(0.867 0.029 98.1);
}

.element {
  color: var(--pale-lichen);
  background-color: hsl(50 24% 80%);
  border-color: oklch(0.867 0.029 98.1);
}

Tailwind CSS v4

@theme {
  --color-pale-lichen: #d8d4bf;
  --color-pale-lichen-50: #f7f5ec;
  --color-pale-lichen-100: #eae8de;
  --color-pale-lichen-200: #d7d5c7;
  --color-pale-lichen-300: #bab8a8;
  --color-pale-lichen-400: #a39f8c;
  --color-pale-lichen-500: #8b8771;
  --color-pale-lichen-600: #767260;
  --color-pale-lichen-700: #5e5b4d;
  --color-pale-lichen-800: #454237;
  --color-pale-lichen-900: #302e26;
  --color-pale-lichen-950: #1c1b14;
}

SCSS

$pale-lichen: #d8d4bf;
$pale-lichen-rgb: 216, 212, 191;
$pale-lichen-light: mix(#fff, $pale-lichen, 20%);
$pale-lichen-dark: mix(#000, $pale-lichen, 20%);

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