Long-Haul Flight

CSS

:root {
  --long-haul-flight: #002277;
  --long-haul-flight-rgb: 0 34 119;
  --long-haul-flight-oklch: oklch(0.302 0.149 262.8);
}

.element {
  color: var(--long-haul-flight);
  background-color: hsl(223 100% 23%);
  border-color: oklch(0.302 0.149 262.8);
}

Tailwind CSS v4

@theme {
  --color-long-haul-flight: #002277;
  --color-long-haul-flight-50: #e0f5ff;
  --color-long-haul-flight-100: #d0e8ff;
  --color-long-haul-flight-200: #b5d4ff;
  --color-long-haul-flight-300: #92b6ff;
  --color-long-haul-flight-400: #6e9cf6;
  --color-long-haul-flight-500: #4f81e8;
  --color-long-haul-flight-600: #436ec3;
  --color-long-haul-flight-700: #35589d;
  --color-long-haul-flight-800: #234175;
  --color-long-haul-flight-900: #172d53;
  --color-long-haul-flight-950: #081937;
}

SCSS

$long-haul-flight: #002277;
$long-haul-flight-rgb: 0, 34, 119;
$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);
}