Eastlake Olive

CSS

:root {
  --eastlake-olive: #a9a482;
  --eastlake-olive-rgb: 169 164 130;
  --eastlake-olive-oklch: oklch(0.714 0.047 100.5);
}

.element {
  color: var(--eastlake-olive);
  background-color: hsl(52 18% 59%);
  border-color: oklch(0.714 0.047 100.5);
}

Tailwind CSS v4

@theme {
  --color-eastlake-olive: #a9a482;
  --color-eastlake-olive-50: #f7f6e7;
  --color-eastlake-olive-100: #eae9d7;
  --color-eastlake-olive-200: #d8d5bf;
  --color-eastlake-olive-300: #bcb99d;
  --color-eastlake-olive-400: #a4a080;
  --color-eastlake-olive-500: #8d8763;
  --color-eastlake-olive-600: #777354;
  --color-eastlake-olive-700: #5f5c43;
  --color-eastlake-olive-800: #464330;
  --color-eastlake-olive-900: #312e20;
  --color-eastlake-olive-950: #1d1b10;
}

SCSS

$eastlake-olive: #a9a482;
$eastlake-olive-rgb: 169, 164, 130;
$eastlake-olive-light: mix(#fff, $eastlake-olive, 20%);
$eastlake-olive-dark: mix(#000, $eastlake-olive, 20%);

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