Iron Teal

CSS

:root {
  --iron-teal: #114e56;
  --iron-teal-rgb: 17 78 86;
  --iron-teal-oklch: oklch(0.391 0.06 208);
}

.element {
  color: var(--iron-teal);
  background-color: hsl(187 67% 20%);
  border-color: oklch(0.391 0.06 208);
}

Tailwind CSS v4

@theme {
  --color-iron-teal: #114e56;
  --color-iron-teal-50: #e2faff;
  --color-iron-teal-100: #d2eef3;
  --color-iron-teal-200: #b8dce3;
  --color-iron-teal-300: #94c0c8;
  --color-iron-teal-400: #73a9b1;
  --color-iron-teal-500: #53929b;
  --color-iron-teal-600: #477b83;
  --color-iron-teal-700: #386369;
  --color-iron-teal-800: #28484d;
  --color-iron-teal-900: #1a3235;
  --color-iron-teal-950: #0b1e20;
}

SCSS

$iron-teal: #114e56;
$iron-teal-rgb: 17, 78, 86;
$iron-teal-light: mix(#fff, $iron-teal, 20%);
$iron-teal-dark: mix(#000, $iron-teal, 20%);

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