Olive Haze

CSS

:root {
  --olive-haze: #888064;
  --olive-haze-rgb: 136 128 100;
  --olive-haze-oklch: oklch(0.599 0.042 94);
}

.element {
  color: var(--olive-haze);
  background-color: hsl(47 15% 46%);
  border-color: oklch(0.599 0.042 94);
}

Tailwind CSS v4

@theme {
  --color-olive-haze: #888064;
  --color-olive-haze-50: #f8f5e8;
  --color-olive-haze-100: #ece8d9;
  --color-olive-haze-200: #d9d5c1;
  --color-olive-haze-300: #bdb8a0;
  --color-olive-haze-400: #a69e83;
  --color-olive-haze-500: #8f8667;
  --color-olive-haze-600: #797257;
  --color-olive-haze-700: #615b46;
  --color-olive-haze-800: #474232;
  --color-olive-haze-900: #312e22;
  --color-olive-haze-950: #1d1a11;
}

SCSS

$olive-haze: #888064;
$olive-haze-rgb: 136, 128, 100;
$olive-haze-light: mix(#fff, $olive-haze, 20%);
$olive-haze-dark: mix(#000, $olive-haze, 20%);

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