Black Coral

CSS

:root {
  --black-coral: #54626f;
  --black-coral-rgb: 84 98 111;
  --black-coral-oklch: oklch(0.489 0.027 246.4);
}

.element {
  color: var(--black-coral);
  background-color: hsl(209 14% 38%);
  border-color: oklch(0.489 0.027 246.4);
}

Tailwind CSS v4

@theme {
  --color-black-coral: #54626f;
  --color-black-coral-50: #eff6fd;
  --color-black-coral-100: #e1e9f1;
  --color-black-coral-200: #ccd6e0;
  --color-black-coral-300: #adb9c5;
  --color-black-coral-400: #92a0ae;
  --color-black-coral-500: #788898;
  --color-black-coral-600: #667380;
  --color-black-coral-700: #515c67;
  --color-black-coral-800: #3b444b;
  --color-black-coral-900: #282f34;
  --color-black-coral-950: #161b20;
}

SCSS

$black-coral: #54626f;
$black-coral-rgb: 84, 98, 111;
$black-coral-light: mix(#fff, $black-coral, 20%);
$black-coral-dark: mix(#000, $black-coral, 20%);

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