Splendour and Pride

CSS

:root {
  --splendour-and-pride: #5870a4;
  --splendour-and-pride-rgb: 88 112 164;
  --splendour-and-pride-oklch: oklch(0.549 0.086 264.8);
}

.element {
  color: var(--splendour-and-pride);
  background-color: hsl(221 30% 49%);
  border-color: oklch(0.549 0.086 264.8);
}

Tailwind CSS v4

@theme {
  --color-splendour-and-pride: #5870a4;
  --color-splendour-and-pride-50: #eaf5ff;
  --color-splendour-and-pride-100: #dbe8ff;
  --color-splendour-and-pride-200: #c3d4fa;
  --color-splendour-and-pride-300: #a3b7e5;
  --color-splendour-and-pride-400: #859ed2;
  --color-splendour-and-pride-500: #6a85c0;
  --color-splendour-and-pride-600: #5a71a2;
  --color-splendour-and-pride-700: #475a82;
  --color-splendour-and-pride-800: #324261;
  --color-splendour-and-pride-900: #222e44;
  --color-splendour-and-pride-950: #111a2c;
}

SCSS

$splendour-and-pride: #5870a4;
$splendour-and-pride-rgb: 88, 112, 164;
$splendour-and-pride-light: mix(#fff, $splendour-and-pride, 20%);
$splendour-and-pride-dark: mix(#000, $splendour-and-pride, 20%);

.element {
  color: $splendour-and-pride;
  box-shadow: 0 0 0 2px rgba($splendour-and-pride, 0.35);
}