Nightfall in Suburbia

CSS

:root {
  --nightfall-in-suburbia: #0011dd;
  --nightfall-in-suburbia-rgb: 0 17 221;
  --nightfall-in-suburbia-oklch: oklch(0.413 0.276 264.2);
}

.element {
  color: var(--nightfall-in-suburbia);
  background-color: hsl(235 100% 43%);
  border-color: oklch(0.413 0.276 264.2);
}

Tailwind CSS v4

@theme {
  --color-nightfall-in-suburbia: #0011dd;
  --color-nightfall-in-suburbia-50: #d0f4ff;
  --color-nightfall-in-suburbia-100: #bde5ff;
  --color-nightfall-in-suburbia-200: #9dcfff;
  --color-nightfall-in-suburbia-300: #75acff;
  --color-nightfall-in-suburbia-400: #468dff;
  --color-nightfall-in-suburbia-500: #1f67ff;
  --color-nightfall-in-suburbia-600: #1b59ff;
  --color-nightfall-in-suburbia-700: #1547d4;
  --color-nightfall-in-suburbia-800: #00359f;
  --color-nightfall-in-suburbia-900: #012471;
  --color-nightfall-in-suburbia-950: #00104f;
}

SCSS

$nightfall-in-suburbia: #0011dd;
$nightfall-in-suburbia-rgb: 0, 17, 221;
$nightfall-in-suburbia-light: mix(#fff, $nightfall-in-suburbia, 20%);
$nightfall-in-suburbia-dark: mix(#000, $nightfall-in-suburbia, 20%);

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