Black Sapphire

CSS

:root {
  --black-sapphire: #434555;
  --black-sapphire-rgb: 67 69 85;
  --black-sapphire-oklch: oklch(0.395 0.027 279.5);
}

.element {
  color: var(--black-sapphire);
  background-color: hsl(233 12% 30%);
  border-color: oklch(0.395 0.027 279.5);
}

Tailwind CSS v4

@theme {
  --color-black-sapphire: #434555;
  --color-black-sapphire-50: #f3f4fd;
  --color-black-sapphire-100: #e6e7f1;
  --color-black-sapphire-200: #d2d3e0;
  --color-black-sapphire-300: #b5b6c5;
  --color-black-sapphire-400: #9b9daf;
  --color-black-sapphire-500: #828598;
  --color-black-sapphire-600: #6e7081;
  --color-black-sapphire-700: #585a67;
  --color-black-sapphire-800: #40424c;
  --color-black-sapphire-900: #2c2d35;
  --color-black-sapphire-950: #191a20;
}

SCSS

$black-sapphire: #434555;
$black-sapphire-rgb: 67, 69, 85;
$black-sapphire-light: mix(#fff, $black-sapphire, 20%);
$black-sapphire-dark: mix(#000, $black-sapphire, 20%);

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