Hottest of Pinks

CSS

:root {
  --hottest-of-pinks: #ff80ff;
  --hottest-of-pinks-rgb: 255 128 255;
  --hottest-of-pinks-oklch: oklch(0.787 0.214 327.4);
}

.element {
  color: var(--hottest-of-pinks);
  background-color: hsl(300 100% 75%);
  border-color: oklch(0.787 0.214 327.4);
}

Tailwind CSS v4

@theme {
  --color-hottest-of-pinks: #ff80ff;
  --color-hottest-of-pinks-50: #ffe0ff;
  --color-hottest-of-pinks-100: #ffceff;
  --color-hottest-of-pinks-200: #ffb2ff;
  --color-hottest-of-pinks-300: #f28cec;
  --color-hottest-of-pinks-400: #de68de;
  --color-hottest-of-pinks-500: #cb3dcd;
  --color-hottest-of-pinks-600: #ab36ad;
  --color-hottest-of-pinks-700: #8a2b8b;
  --color-hottest-of-pinks-800: #651e6a;
  --color-hottest-of-pinks-900: #47144a;
  --color-hottest-of-pinks-950: #2e0431;
}

SCSS

$hottest-of-pinks: #ff80ff;
$hottest-of-pinks-rgb: 255, 128, 255;
$hottest-of-pinks-light: mix(#fff, $hottest-of-pinks, 20%);
$hottest-of-pinks-dark: mix(#000, $hottest-of-pinks, 20%);

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