Stone Mason

CSS

:root {
  --stone-mason: #959897;
  --stone-mason-rgb: 149 152 151;
  --stone-mason-oklch: oklch(0.677 0.004 174.4);
}

.element {
  color: var(--stone-mason);
  background-color: hsl(160 1% 59%);
  border-color: oklch(0.677 0.004 174.4);
}

Tailwind CSS v4

@theme {
  --color-stone-mason: #959897;
  --color-stone-mason-50: #f4f5f5;
  --color-stone-mason-100: #e6e8e8;
  --color-stone-mason-200: #d3d5d4;
  --color-stone-mason-300: #b5b8b7;
  --color-stone-mason-400: #9c9f9e;
  --color-stone-mason-500: #848786;
  --color-stone-mason-600: #6f7271;
  --color-stone-mason-700: #595b5b;
  --color-stone-mason-800: #414342;
  --color-stone-mason-900: #2d2e2e;
  --color-stone-mason-950: #1a1b1a;
}

SCSS

$stone-mason: #959897;
$stone-mason-rgb: 149, 152, 151;
$stone-mason-light: mix(#fff, $stone-mason, 20%);
$stone-mason-dark: mix(#000, $stone-mason, 20%);

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