Black Chasm

CSS

:root {
  --black-chasm: #102c33;
  --black-chasm-rgb: 16 44 51;
  --black-chasm-oklch: oklch(0.275 0.036 216.5);
}

.element {
  color: var(--black-chasm);
  background-color: hsl(192 52% 13%);
  border-color: oklch(0.275 0.036 216.5);
}

Tailwind CSS v4

@theme {
  --color-black-chasm: #102c33;
  --color-black-chasm-50: #eaf8fc;
  --color-black-chasm-100: #dbebf0;
  --color-black-chasm-200: #c4d8df;
  --color-black-chasm-300: #a4bcc4;
  --color-black-chasm-400: #87a4ac;
  --color-black-chasm-500: #6b8d96;
  --color-black-chasm-600: #5b777f;
  --color-black-chasm-700: #495f65;
  --color-black-chasm-800: #34464a;
  --color-black-chasm-900: #243033;
  --color-black-chasm-950: #121c1f;
}

SCSS

$black-chasm: #102c33;
$black-chasm-rgb: 16, 44, 51;
$black-chasm-light: mix(#fff, $black-chasm, 20%);
$black-chasm-dark: mix(#000, $black-chasm, 20%);

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