Slice of Heaven

CSS

:root {
  --slice-of-heaven: #0022ee;
  --slice-of-heaven-rgb: 0 34 238;
  --slice-of-heaven-oklch: oklch(0.447 0.285 264.2);
}

.element {
  color: var(--slice-of-heaven);
  background-color: hsl(231 100% 47%);
  border-color: oklch(0.447 0.285 264.2);
}

Tailwind CSS v4

@theme {
  --color-slice-of-heaven: #0022ee;
  --color-slice-of-heaven-50: #cff4ff;
  --color-slice-of-heaven-100: #bce5ff;
  --color-slice-of-heaven-200: #9bceff;
  --color-slice-of-heaven-300: #73abff;
  --color-slice-of-heaven-400: #448cff;
  --color-slice-of-heaven-500: #1c64ff;
  --color-slice-of-heaven-600: #1956ff;
  --color-slice-of-heaven-700: #1345d7;
  --color-slice-of-heaven-800: #0033a2;
  --color-slice-of-heaven-900: #002373;
  --color-slice-of-heaven-950: #000f51;
}

SCSS

$slice-of-heaven: #0022ee;
$slice-of-heaven-rgb: 0, 34, 238;
$slice-of-heaven-light: mix(#fff, $slice-of-heaven, 20%);
$slice-of-heaven-dark: mix(#000, $slice-of-heaven, 20%);

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