Iron

CSS

:root {
  --iron: #5e5e5e;
  --iron-rgb: 94 94 94;
  --iron-oklch: oklch(0.482 0 0);
}

.element {
  color: var(--iron);
  background-color: hsl(0 0% 37%);
  border-color: oklch(0.482 0 0);
}

Tailwind CSS v4

@theme {
  --color-iron: #5e5e5e;
  --color-iron-50: #f5f5f5;
  --color-iron-100: #e8e8e8;
  --color-iron-200: #d4d4d4;
  --color-iron-300: #b7b7b7;
  --color-iron-400: #9e9e9e;
  --color-iron-500: #868686;
  --color-iron-600: #717171;
  --color-iron-700: #5b5b5b;
  --color-iron-800: #424242;
  --color-iron-900: #2e2e2e;
  --color-iron-950: #1b1b1b;
}

SCSS

$iron: #5e5e5e;
$iron-rgb: 94, 94, 94;
$iron-light: mix(#fff, $iron, 20%);
$iron-dark: mix(#000, $iron, 20%);

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