Ash Grove

CSS

:root {
  --ash-grove: #b9b3bf;
  --ash-grove-rgb: 185 179 191;
  --ash-grove-oklch: oklch(0.775 0.018 308.2);
}

.element {
  color: var(--ash-grove);
  background-color: hsl(270 9% 73%);
  border-color: oklch(0.775 0.018 308.2);
}

Tailwind CSS v4

@theme {
  --color-ash-grove: #b9b3bf;
  --color-ash-grove-50: #f7f4f9;
  --color-ash-grove-100: #eae6ec;
  --color-ash-grove-200: #d6d2da;
  --color-ash-grove-300: #bab5be;
  --color-ash-grove-400: #a19ca7;
  --color-ash-grove-500: #898390;
  --color-ash-grove-600: #746f79;
  --color-ash-grove-700: #5d5961;
  --color-ash-grove-800: #444147;
  --color-ash-grove-900: #2f2d31;
  --color-ash-grove-950: #1b1a1d;
}

SCSS

$ash-grove: #b9b3bf;
$ash-grove-rgb: 185, 179, 191;
$ash-grove-light: mix(#fff, $ash-grove, 20%);
$ash-grove-dark: mix(#000, $ash-grove, 20%);

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