Elk Horn

CSS

:root {
  --elk-horn: #e9e2d3;
  --elk-horn-rgb: 233 226 211;
  --elk-horn-oklch: oklch(0.914 0.021 85.9);
}

.element {
  color: var(--elk-horn);
  background-color: hsl(41 33% 87%);
  border-color: oklch(0.914 0.021 85.9);
}

Tailwind CSS v4

@theme {
  --color-elk-horn: #e9e2d3;
  --color-elk-horn-50: #f8f5ee;
  --color-elk-horn-100: #ebe8e0;
  --color-elk-horn-200: #d8d4ca;
  --color-elk-horn-300: #bcb7ab;
  --color-elk-horn-400: #a49e90;
  --color-elk-horn-500: #8c8576;
  --color-elk-horn-600: #777164;
  --color-elk-horn-700: #5f5a50;
  --color-elk-horn-800: #46423a;
  --color-elk-horn-900: #302d28;
  --color-elk-horn-950: #1d1a16;
}

SCSS

$elk-horn: #e9e2d3;
$elk-horn-rgb: 233, 226, 211;
$elk-horn-light: mix(#fff, $elk-horn, 20%);
$elk-horn-dark: mix(#000, $elk-horn, 20%);

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