Jasper Stone

CSS

:root {
  --jasper-stone: #8d9e97;
  --jasper-stone-rgb: 141 158 151;
  --jasper-stone-oklch: oklch(0.684 0.022 169);
}

.element {
  color: var(--jasper-stone);
  background-color: hsl(155 8% 59%);
  border-color: oklch(0.684 0.022 169);
}

Tailwind CSS v4

@theme {
  --color-jasper-stone: #8d9e97;
  --color-jasper-stone-50: #eff7f4;
  --color-jasper-stone-100: #e1eae7;
  --color-jasper-stone-200: #ccd7d3;
  --color-jasper-stone-300: #adbbb6;
  --color-jasper-stone-400: #93a39c;
  --color-jasper-stone-500: #798b84;
  --color-jasper-stone-600: #66766f;
  --color-jasper-stone-700: #525e59;
  --color-jasper-stone-800: #3b4541;
  --color-jasper-stone-900: #29302d;
  --color-jasper-stone-950: #171c1a;
}

SCSS

$jasper-stone: #8d9e97;
$jasper-stone-rgb: 141, 158, 151;
$jasper-stone-light: mix(#fff, $jasper-stone, 20%);
$jasper-stone-dark: mix(#000, $jasper-stone, 20%);

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