Warm Olive

CSS

:root {
  --warm-olive: #c7b63c;
  --warm-olive-rgb: 199 182 60;
  --warm-olive-oklch: oklch(0.769 0.139 101.2);
}

.element {
  color: var(--warm-olive);
  background-color: hsl(53 55% 51%);
  border-color: oklch(0.769 0.139 101.2);
}

Tailwind CSS v4

@theme {
  --color-warm-olive: #c7b63c;
  --color-warm-olive-50: #fcf8ca;
  --color-warm-olive-100: #f0ebb5;
  --color-warm-olive-200: #ded791;
  --color-warm-olive-300: #c4bb62;
  --color-warm-olive-400: #b0a02b;
  --color-warm-olive-500: #9b8700;
  --color-warm-olive-600: #837200;
  --color-warm-olive-700: #695c00;
  --color-warm-olive-800: #4f4200;
  --color-warm-olive-900: #372e00;
  --color-warm-olive-950: #221a00;
}

SCSS

$warm-olive: #c7b63c;
$warm-olive-rgb: 199, 182, 60;
$warm-olive-light: mix(#fff, $warm-olive, 20%);
$warm-olive-dark: mix(#000, $warm-olive, 20%);

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