Bitter

CSS

:root {
  --bitter: #88896c;
  --bitter-rgb: 136 137 108;
  --bitter-oklch: oklch(0.621 0.042 109.2);
}

.element {
  color: var(--bitter);
  background-color: hsl(62 12% 48%);
  border-color: oklch(0.621 0.042 109.2);
}

Tailwind CSS v4

@theme {
  --color-bitter: #88896c;
  --color-bitter-50: #f5f6e9;
  --color-bitter-100: #e8e9da;
  --color-bitter-200: #d4d6c2;
  --color-bitter-300: #b8baa2;
  --color-bitter-400: #a0a185;
  --color-bitter-500: #888969;
  --color-bitter-600: #737459;
  --color-bitter-700: #5c5d47;
  --color-bitter-800: #444433;
  --color-bitter-900: #2f2f23;
  --color-bitter-950: #1b1b12;
}

SCSS

$bitter: #88896c;
$bitter-rgb: 136, 137, 108;
$bitter-light: mix(#fff, $bitter, 20%);
$bitter-dark: mix(#000, $bitter, 20%);

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