Night in Manchester

CSS

:root {
  --night-in-manchester: #324ab2;
  --night-in-manchester-rgb: 50 74 178;
  --night-in-manchester-oklch: oklch(0.455 0.167 268.9);
}

.element {
  color: var(--night-in-manchester);
  background-color: hsl(229 56% 45%);
  border-color: oklch(0.455 0.167 268.9);
}

Tailwind CSS v4

@theme {
  --color-night-in-manchester: #324ab2;
  --color-night-in-manchester-50: #e3f4ff;
  --color-night-in-manchester-100: #d3e6ff;
  --color-night-in-manchester-200: #b9d1ff;
  --color-night-in-manchester-300: #98b2ff;
  --color-night-in-manchester-400: #7697ff;
  --color-night-in-manchester-500: #597bf3;
  --color-night-in-manchester-600: #4c68cd;
  --color-night-in-manchester-700: #3c54a5;
  --color-night-in-manchester-800: #283d7c;
  --color-night-in-manchester-900: #1b2a57;
  --color-night-in-manchester-950: #0c173b;
}

SCSS

$night-in-manchester: #324ab2;
$night-in-manchester-rgb: 50, 74, 178;
$night-in-manchester-light: mix(#fff, $night-in-manchester, 20%);
$night-in-manchester-dark: mix(#000, $night-in-manchester, 20%);

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