Iron Creek

CSS

:root {
  --iron-creek: #50676b;
  --iron-creek-rgb: 80 103 107;
  --iron-creek-oklch: oklch(0.497 0.028 209.3);
}

.element {
  color: var(--iron-creek);
  background-color: hsl(189 14% 37%);
  border-color: oklch(0.497 0.028 209.3);
}

Tailwind CSS v4

@theme {
  --color-iron-creek: #50676b;
  --color-iron-creek-50: #edf7fa;
  --color-iron-creek-100: #deebed;
  --color-iron-creek-200: #c7d8db;
  --color-iron-creek-300: #a8bcc0;
  --color-iron-creek-400: #8ca3a7;
  --color-iron-creek-500: #718c90;
  --color-iron-creek-600: #60767a;
  --color-iron-creek-700: #4d5f62;
  --color-iron-creek-800: #374547;
  --color-iron-creek-900: #263031;
  --color-iron-creek-950: #141c1d;
}

SCSS

$iron-creek: #50676b;
$iron-creek-rgb: 80, 103, 107;
$iron-creek-light: mix(#fff, $iron-creek, 20%);
$iron-creek-dark: mix(#000, $iron-creek, 20%);

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