In the Navy

CSS

:root {
  --in-the-navy: #283849;
  --in-the-navy-rgb: 40 56 73;
  --in-the-navy-oklch: oklch(0.334 0.037 250.5);
}

.element {
  color: var(--in-the-navy);
  background-color: hsl(211 29% 22%);
  border-color: oklch(0.334 0.037 250.5);
}

Tailwind CSS v4

@theme {
  --color-in-the-navy: #283849;
  --color-in-the-navy-50: #eef6ff;
  --color-in-the-navy-100: #dfe9f4;
  --color-in-the-navy-200: #c9d6e4;
  --color-in-the-navy-300: #aab9ca;
  --color-in-the-navy-400: #8fa1b4;
  --color-in-the-navy-500: #74889e;
  --color-in-the-navy-600: #637386;
  --color-in-the-navy-700: #4f5c6b;
  --color-in-the-navy-800: #39444f;
  --color-in-the-navy-900: #272f37;
  --color-in-the-navy-950: #151b22;
}

SCSS

$in-the-navy: #283849;
$in-the-navy-rgb: 40, 56, 73;
$in-the-navy-light: mix(#fff, $in-the-navy, 20%);
$in-the-navy-dark: mix(#000, $in-the-navy, 20%);

.element {
  color: $in-the-navy;
  box-shadow: 0 0 0 2px rgba($in-the-navy, 0.35);
}