Olive Smudge

CSS

:root {
  --olive-smudge: #585545;
  --olive-smudge-rgb: 88 85 69;
  --olive-smudge-oklch: oklch(0.448 0.025 98.5);
}

.element {
  color: var(--olive-smudge);
  background-color: hsl(51 12% 31%);
  border-color: oklch(0.448 0.025 98.5);
}

Tailwind CSS v4

@theme {
  --color-olive-smudge: #585545;
  --color-olive-smudge-50: #f6f5ed;
  --color-olive-smudge-100: #e9e8df;
  --color-olive-smudge-200: #d6d5c9;
  --color-olive-smudge-300: #bab8a9;
  --color-olive-smudge-400: #a29f8e;
  --color-olive-smudge-500: #8a8774;
  --color-olive-smudge-600: #757262;
  --color-olive-smudge-700: #5e5b4e;
  --color-olive-smudge-800: #454339;
  --color-olive-smudge-900: #302e27;
  --color-olive-smudge-950: #1c1b15;
}

SCSS

$olive-smudge: #585545;
$olive-smudge-rgb: 88, 85, 69;
$olive-smudge-light: mix(#fff, $olive-smudge, 20%);
$olive-smudge-dark: mix(#000, $olive-smudge, 20%);

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