Made of Steel

CSS

:root {
  --made-of-steel: #5b686f;
  --made-of-steel-rgb: 91 104 111;
  --made-of-steel-oklch: oklch(0.509 0.019 231.2);
}

.element {
  color: var(--made-of-steel);
  background-color: hsl(201 10% 40%);
  border-color: oklch(0.509 0.019 231.2);
}

Tailwind CSS v4

@theme {
  --color-made-of-steel: #5b686f;
  --color-made-of-steel-50: #f0f6fa;
  --color-made-of-steel-100: #e2e9ed;
  --color-made-of-steel-200: #cdd6db;
  --color-made-of-steel-300: #aeb9c0;
  --color-made-of-steel-400: #94a1a8;
  --color-made-of-steel-500: #7a8991;
  --color-made-of-steel-600: #67747b;
  --color-made-of-steel-700: #525d62;
  --color-made-of-steel-800: #3c4448;
  --color-made-of-steel-900: #292f32;
  --color-made-of-steel-950: #171b1e;
}

SCSS

$made-of-steel: #5b686f;
$made-of-steel-rgb: 91, 104, 111;
$made-of-steel-light: mix(#fff, $made-of-steel, 20%);
$made-of-steel-dark: mix(#000, $made-of-steel, 20%);

.element {
  color: $made-of-steel;
  box-shadow: 0 0 0 2px rgba($made-of-steel, 0.35);
}