Worn Silver

CSS

:root {
  --worn-silver: #c9c0bb;
  --worn-silver-rgb: 201 192 187;
  --worn-silver-oklch: oklch(0.814 0.012 51.3);
}

.element {
  color: var(--worn-silver);
  background-color: hsl(21 11% 76%);
  border-color: oklch(0.814 0.012 51.3);
}

Tailwind CSS v4

@theme {
  --color-worn-silver: #c9c0bb;
  --color-worn-silver-50: #f8f4f2;
  --color-worn-silver-100: #ebe7e4;
  --color-worn-silver-200: #d9d3cf;
  --color-worn-silver-300: #bdb6b2;
  --color-worn-silver-400: #a59c98;
  --color-worn-silver-500: #8d847f;
  --color-worn-silver-600: #77706b;
  --color-worn-silver-700: #605956;
  --color-worn-silver-800: #46413f;
  --color-worn-silver-900: #312d2b;
  --color-worn-silver-950: #1d1a18;
}

SCSS

$worn-silver: #c9c0bb;
$worn-silver-rgb: 201, 192, 187;
$worn-silver-light: mix(#fff, $worn-silver, 20%);
$worn-silver-dark: mix(#000, $worn-silver, 20%);

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