Bitter Briar

CSS

:root {
  --bitter-briar: #8d7470;
  --bitter-briar-rgb: 141 116 112;
  --bitter-briar-oklch: oklch(0.582 0.032 28.7);
}

.element {
  color: var(--bitter-briar);
  background-color: hsl(8 11% 50%);
  border-color: oklch(0.582 0.032 28.7);
}

Tailwind CSS v4

@theme {
  --color-bitter-briar: #8d7470;
  --color-bitter-briar-50: #fef2f0;
  --color-bitter-briar-100: #f2e4e1;
  --color-bitter-briar-200: #e2d0cc;
  --color-bitter-briar-300: #c7b2ae;
  --color-bitter-briar-400: #b19894;
  --color-bitter-briar-500: #9a7f7a;
  --color-bitter-briar-600: #836b67;
  --color-bitter-briar-700: #695653;
  --color-bitter-briar-800: #4d3e3c;
  --color-bitter-briar-900: #362b29;
  --color-bitter-briar-950: #211817;
}

SCSS

$bitter-briar: #8d7470;
$bitter-briar-rgb: 141, 116, 112;
$bitter-briar-light: mix(#fff, $bitter-briar, 20%);
$bitter-briar-dark: mix(#000, $bitter-briar, 20%);

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