Quantum of Light

CSS

:root {
  --quantum-of-light: #130173;
  --quantum-of-light-rgb: 19 1 115;
  --quantum-of-light-oklch: oklch(0.261 0.168 271.5);
}

.element {
  color: var(--quantum-of-light);
  background-color: hsl(249 98% 23%);
  border-color: oklch(0.261 0.168 271.5);
}

Tailwind CSS v4

@theme {
  --color-quantum-of-light: #130173;
  --color-quantum-of-light-50: #e5f3ff;
  --color-quantum-of-light-100: #d5e5ff;
  --color-quantum-of-light-200: #bdd0ff;
  --color-quantum-of-light-300: #9cb0ff;
  --color-quantum-of-light-400: #7c96ff;
  --color-quantum-of-light-500: #6079f3;
  --color-quantum-of-light-600: #5267cd;
  --color-quantum-of-light-700: #4152a5;
  --color-quantum-of-light-800: #2c3c7c;
  --color-quantum-of-light-900: #1d2a57;
  --color-quantum-of-light-950: #0e173b;
}

SCSS

$quantum-of-light: #130173;
$quantum-of-light-rgb: 19, 1, 115;
$quantum-of-light-light: mix(#fff, $quantum-of-light, 20%);
$quantum-of-light-dark: mix(#000, $quantum-of-light, 20%);

.element {
  color: $quantum-of-light;
  box-shadow: 0 0 0 2px rgba($quantum-of-light, 0.35);
}