Rock Solid

CSS

:root {
  --rock-solid: #bdc2bd;
  --rock-solid-rgb: 189 194 189;
  --rock-solid-oklch: oklch(0.809 0.009 145.5);
}

.element {
  color: var(--rock-solid);
  background-color: hsl(120 4% 75%);
  border-color: oklch(0.809 0.009 145.5);
}

Tailwind CSS v4

@theme {
  --color-rock-solid: #bdc2bd;
  --color-rock-solid-50: #f3f6f4;
  --color-rock-solid-100: #e6e9e6;
  --color-rock-solid-200: #d2d5d2;
  --color-rock-solid-300: #b4b9b5;
  --color-rock-solid-400: #9ba09b;
  --color-rock-solid-500: #838883;
  --color-rock-solid-600: #6f736f;
  --color-rock-solid-700: #585c58;
  --color-rock-solid-800: #414340;
  --color-rock-solid-900: #2c2e2c;
  --color-rock-solid-950: #1a1b19;
}

SCSS

$rock-solid: #bdc2bd;
$rock-solid-rgb: 189, 194, 189;
$rock-solid-light: mix(#fff, $rock-solid, 20%);
$rock-solid-dark: mix(#000, $rock-solid, 20%);

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