Bleached Bark

CSS

:root {
  --bleached-bark: #8b7f78;
  --bleached-bark-rgb: 139 127 120;
  --bleached-bark-oklch: oklch(0.605 0.018 52.4);
}

.element {
  color: var(--bleached-bark);
  background-color: hsl(22 8% 51%);
  border-color: oklch(0.605 0.018 52.4);
}

Tailwind CSS v4

@theme {
  --color-bleached-bark: #8b7f78;
  --color-bleached-bark-50: #f9f4f0;
  --color-bleached-bark-100: #ede6e2;
  --color-bleached-bark-200: #dbd2cd;
  --color-bleached-bark-300: #bfb5af;
  --color-bleached-bark-400: #a89c95;
  --color-bleached-bark-500: #90837b;
  --color-bleached-bark-600: #7a6f69;
  --color-bleached-bark-700: #625953;
  --color-bleached-bark-800: #48413d;
  --color-bleached-bark-900: #322d2a;
  --color-bleached-bark-950: #1e1a17;
}

SCSS

$bleached-bark: #8b7f78;
$bleached-bark-rgb: 139, 127, 120;
$bleached-bark-light: mix(#fff, $bleached-bark, 20%);
$bleached-bark-dark: mix(#000, $bleached-bark, 20%);

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