Cast Iron

CSS

:root {
  --cast-iron: #64645a;
  --cast-iron-rgb: 100 100 90;
  --cast-iron-oklch: oklch(0.5 0.015 106.9);
}

.element {
  color: var(--cast-iron);
  background-color: hsl(60 5% 37%);
  border-color: oklch(0.5 0.015 106.9);
}

Tailwind CSS v4

@theme {
  --color-cast-iron: #64645a;
  --color-cast-iron-50: #f5f5f1;
  --color-cast-iron-100: #e8e8e2;
  --color-cast-iron-200: #d4d5cd;
  --color-cast-iron-300: #b8b8af;
  --color-cast-iron-400: #9f9f95;
  --color-cast-iron-500: #87877b;
  --color-cast-iron-600: #727269;
  --color-cast-iron-700: #5b5b54;
  --color-cast-iron-800: #43433d;
  --color-cast-iron-900: #2e2e2a;
  --color-cast-iron-950: #1b1b17;
}

SCSS

$cast-iron: #64645a;
$cast-iron-rgb: 100, 100, 90;
$cast-iron-light: mix(#fff, $cast-iron, 20%);
$cast-iron-dark: mix(#000, $cast-iron, 20%);

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