Barnwood Ash

CSS

:root {
  --barnwood-ash: #87857e;
  --barnwood-ash-rgb: 135 133 126;
  --barnwood-ash-oklch: oklch(0.616 0.011 93.6);
}

.element {
  color: var(--barnwood-ash);
  background-color: hsl(47 4% 51%);
  border-color: oklch(0.616 0.011 93.6);
}

Tailwind CSS v4

@theme {
  --color-barnwood-ash: #87857e;
  --color-barnwood-ash-50: #f6f5f2;
  --color-barnwood-ash-100: #e9e8e4;
  --color-barnwood-ash-200: #d5d4cf;
  --color-barnwood-ash-300: #b9b7b1;
  --color-barnwood-ash-400: #a09e97;
  --color-barnwood-ash-500: #88867e;
  --color-barnwood-ash-600: #73726b;
  --color-barnwood-ash-700: #5c5b56;
  --color-barnwood-ash-800: #44423e;
  --color-barnwood-ash-900: #2f2e2b;
  --color-barnwood-ash-950: #1b1b18;
}

SCSS

$barnwood-ash: #87857e;
$barnwood-ash-rgb: 135, 133, 126;
$barnwood-ash-light: mix(#fff, $barnwood-ash, 20%);
$barnwood-ash-dark: mix(#000, $barnwood-ash, 20%);

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