#002375

CSS

:root {
  --long-haul-flight: #002375;
  --long-haul-flight-rgb: 0 35 117;
  --long-haul-flight-oklch: oklch(0.301 0.145 262.5);
}

.element {
  color: var(--long-haul-flight);
  background-color: hsl(222 100% 23%);
  border-color: oklch(0.301 0.145 262.5);
}

Tailwind CSS v4

@theme {
  --color-long-haul-flight: #002375;
  --color-long-haul-flight-50: #e1f6ff;
  --color-long-haul-flight-100: #d0e8ff;
  --color-long-haul-flight-200: #b5d4ff;
  --color-long-haul-flight-300: #92b6ff;
  --color-long-haul-flight-400: #6f9df4;
  --color-long-haul-flight-500: #5082e5;
  --color-long-haul-flight-600: #446ec1;
  --color-long-haul-flight-700: #36589b;
  --color-long-haul-flight-800: #234174;
  --color-long-haul-flight-900: #172d52;
  --color-long-haul-flight-950: #081937;
}

SCSS

$long-haul-flight: #002375;
$long-haul-flight-rgb: 0, 35, 117;
$long-haul-flight-light: mix(#fff, $long-haul-flight, 20%);
$long-haul-flight-dark: mix(#000, $long-haul-flight, 20%);

.element {
  color: $long-haul-flight;
  box-shadow: 0 0 0 2px rgba($long-haul-flight, 0.35);
}