Sculptural Silver

CSS

:root {
  --sculptural-silver: #d1dad5;
  --sculptural-silver-rgb: 209 218 213;
  --sculptural-silver-oklch: oklch(0.88 0.012 162);
}

.element {
  color: var(--sculptural-silver);
  background-color: hsl(147 11% 84%);
  border-color: oklch(0.88 0.012 162);
}

Tailwind CSS v4

@theme {
  --color-sculptural-silver: #d1dad5;
  --color-sculptural-silver-50: #f2f6f4;
  --color-sculptural-silver-100: #e4e9e7;
  --color-sculptural-silver-200: #d0d6d3;
  --color-sculptural-silver-300: #b2b9b6;
  --color-sculptural-silver-400: #99a19c;
  --color-sculptural-silver-500: #808984;
  --color-sculptural-silver-600: #6c746f;
  --color-sculptural-silver-700: #565d59;
  --color-sculptural-silver-800: #3f4441;
  --color-sculptural-silver-900: #2b2f2d;
  --color-sculptural-silver-950: #191b1a;
}

SCSS

$sculptural-silver: #d1dad5;
$sculptural-silver-rgb: 209, 218, 213;
$sculptural-silver-light: mix(#fff, $sculptural-silver, 20%);
$sculptural-silver-dark: mix(#000, $sculptural-silver, 20%);

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