Clear Night Sky

CSS

:root {
  --clear-night-sky: #214f86;
  --clear-night-sky-rgb: 33 79 134;
  --clear-night-sky-oklch: oklch(0.425 0.104 254.7);
}

.element {
  color: var(--clear-night-sky);
  background-color: hsl(213 60% 33%);
  border-color: oklch(0.425 0.104 254.7);
}

Tailwind CSS v4

@theme {
  --color-clear-night-sky: #214f86;
  --color-clear-night-sky-50: #e2f7ff;
  --color-clear-night-sky-100: #d2eaff;
  --color-clear-night-sky-200: #b8d7ff;
  --color-clear-night-sky-300: #95baed;
  --color-clear-night-sky-400: #73a1db;
  --color-clear-night-sky-500: #5488ca;
  --color-clear-night-sky-600: #4773aa;
  --color-clear-night-sky-700: #395c89;
  --color-clear-night-sky-800: #264466;
  --color-clear-night-sky-900: #1a2f47;
  --color-clear-night-sky-950: #0a1b2f;
}

SCSS

$clear-night-sky: #214f86;
$clear-night-sky-rgb: 33, 79, 134;
$clear-night-sky-light: mix(#fff, $clear-night-sky, 20%);
$clear-night-sky-dark: mix(#000, $clear-night-sky, 20%);

.element {
  color: $clear-night-sky;
  box-shadow: 0 0 0 2px rgba($clear-night-sky, 0.35);
}