Wilderness Grey

CSS

:root {
  --wilderness-grey: #c2baa8;
  --wilderness-grey-rgb: 194 186 168;
  --wilderness-grey-oklch: oklch(0.791 0.026 86.9);
}

.element {
  color: var(--wilderness-grey);
  background-color: hsl(42 18% 71%);
  border-color: oklch(0.791 0.026 86.9);
}

Tailwind CSS v4

@theme {
  --color-wilderness-grey: #c2baa8;
  --color-wilderness-grey-50: #f8f5ed;
  --color-wilderness-grey-100: #ebe8de;
  --color-wilderness-grey-200: #d9d4c8;
  --color-wilderness-grey-300: #bdb7a8;
  --color-wilderness-grey-400: #a59e8d;
  --color-wilderness-grey-500: #8e8573;
  --color-wilderness-grey-600: #787161;
  --color-wilderness-grey-700: #605a4e;
  --color-wilderness-grey-800: #474238;
  --color-wilderness-grey-900: #312d26;
  --color-wilderness-grey-950: #1d1a15;
}

SCSS

$wilderness-grey: #c2baa8;
$wilderness-grey-rgb: 194, 186, 168;
$wilderness-grey-light: mix(#fff, $wilderness-grey, 20%);
$wilderness-grey-dark: mix(#000, $wilderness-grey, 20%);

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