Zia Olive

CSS

:root {
  --zia-olive: #082903;
  --zia-olive-rgb: 8 41 3;
  --zia-olive-oklch: oklch(0.247 0.074 140.6);
}

.element {
  color: var(--zia-olive);
  background-color: hsl(112 86% 9%);
  border-color: oklch(0.247 0.074 140.6);
}

Tailwind CSS v4

@theme {
  --color-zia-olive: #082903;
  --color-zia-olive-50: #e9fbe8;
  --color-zia-olive-100: #daefd8;
  --color-zia-olive-200: #c3ddc0;
  --color-zia-olive-300: #a2c29f;
  --color-zia-olive-400: #87aa80;
  --color-zia-olive-500: #6b9364;
  --color-zia-olive-600: #5b7c55;
  --color-zia-olive-700: #486343;
  --color-zia-olive-800: #35492f;
  --color-zia-olive-900: #243220;
  --color-zia-olive-950: #131e10;
}

SCSS

$zia-olive: #082903;
$zia-olive-rgb: 8, 41, 3;
$zia-olive-light: mix(#fff, $zia-olive, 20%);
$zia-olive-dark: mix(#000, $zia-olive, 20%);

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