Tuscan Olive

CSS

:root {
  --tuscan-olive: #5d583e;
  --tuscan-olive-rgb: 93 88 62;
  --tuscan-olive-oklch: oklch(0.458 0.04 98.5);
}

.element {
  color: var(--tuscan-olive);
  background-color: hsl(50 20% 30%);
  border-color: oklch(0.458 0.04 98.5);
}

Tailwind CSS v4

@theme {
  --color-tuscan-olive: #5d583e;
  --color-tuscan-olive-50: #f7f6e9;
  --color-tuscan-olive-100: #ebe8da;
  --color-tuscan-olive-200: #d8d5c2;
  --color-tuscan-olive-300: #bcb8a1;
  --color-tuscan-olive-400: #a49f84;
  --color-tuscan-olive-500: #8d8768;
  --color-tuscan-olive-600: #777259;
  --color-tuscan-olive-700: #5f5b47;
  --color-tuscan-olive-800: #464333;
  --color-tuscan-olive-900: #312e22;
  --color-tuscan-olive-950: #1d1b12;
}

SCSS

$tuscan-olive: #5d583e;
$tuscan-olive-rgb: 93, 88, 62;
$tuscan-olive-light: mix(#fff, $tuscan-olive, 20%);
$tuscan-olive-dark: mix(#000, $tuscan-olive, 20%);

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