One Minute to Midnight

CSS

:root {
  --one-minute-to-midnight: #003388;
  --one-minute-to-midnight-rgb: 0 51 136;
  --one-minute-to-midnight-oklch: oklch(0.354 0.151 260.7);
}

.element {
  color: var(--one-minute-to-midnight);
  background-color: hsl(218 100% 27%);
  border-color: oklch(0.354 0.151 260.7);
}

Tailwind CSS v4

@theme {
  --color-one-minute-to-midnight: #003388;
  --color-one-minute-to-midnight-50: #dff6ff;
  --color-one-minute-to-midnight-100: #cde9ff;
  --color-one-minute-to-midnight-200: #b2d5ff;
  --color-one-minute-to-midnight-300: #8eb7ff;
  --color-one-minute-to-midnight-400: #6a9df7;
  --color-one-minute-to-midnight-500: #4882e8;
  --color-one-minute-to-midnight-600: #3e6fc4;
  --color-one-minute-to-midnight-700: #31599d;
  --color-one-minute-to-midnight-800: #1f4175;
  --color-one-minute-to-midnight-900: #142d53;
  --color-one-minute-to-midnight-950: #061a38;
}

SCSS

$one-minute-to-midnight: #003388;
$one-minute-to-midnight-rgb: 0, 51, 136;
$one-minute-to-midnight-light: mix(#fff, $one-minute-to-midnight, 20%);
$one-minute-to-midnight-dark: mix(#000, $one-minute-to-midnight, 20%);

.element {
  color: $one-minute-to-midnight;
  box-shadow: 0 0 0 2px rgba($one-minute-to-midnight, 0.35);
}