Washed Olive

CSS

:root {
  --washed-olive: #c5c0a3;
  --washed-olive-rgb: 197 192 163;
  --washed-olive-oklch: oklch(0.804 0.04 99.1);
}

.element {
  color: var(--washed-olive);
  background-color: hsl(51 23% 71%);
  border-color: oklch(0.804 0.04 99.1);
}

Tailwind CSS v4

@theme {
  --color-washed-olive: #c5c0a3;
  --color-washed-olive-50: #f7f6e9;
  --color-washed-olive-100: #eae9da;
  --color-washed-olive-200: #d7d5c2;
  --color-washed-olive-300: #bbb8a1;
  --color-washed-olive-400: #a49f85;
  --color-washed-olive-500: #8c8769;
  --color-washed-olive-600: #777259;
  --color-washed-olive-700: #5f5b47;
  --color-washed-olive-800: #464333;
  --color-washed-olive-900: #302e23;
  --color-washed-olive-950: #1d1b12;
}

SCSS

$washed-olive: #c5c0a3;
$washed-olive-rgb: 197, 192, 163;
$washed-olive-light: mix(#fff, $washed-olive, 20%);
$washed-olive-dark: mix(#000, $washed-olive, 20%);

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