Celestial Pink

CSS

:root {
  --celestial-pink: #9c004a;
  --celestial-pink-rgb: 156 0 74;
  --celestial-pink-oklch: oklch(0.447 0.18 3.3);
}

.element {
  color: var(--celestial-pink);
  background-color: hsl(332 100% 31%);
  border-color: oklch(0.447 0.18 3.3);
}

Tailwind CSS v4

@theme {
  --color-celestial-pink: #9c004a;
  --color-celestial-pink-50: #ffe0ee;
  --color-celestial-pink-100: #ffcfdf;
  --color-celestial-pink-200: #ffb3c9;
  --color-celestial-pink-300: #ff8eaa;
  --color-celestial-pink-400: #f16a93;
  --color-celestial-pink-500: #df417a;
  --color-celestial-pink-600: #bd3967;
  --color-celestial-pink-700: #982e52;
  --color-celestial-pink-800: #71203e;
  --color-celestial-pink-900: #50152b;
  --color-celestial-pink-950: #340518;
}

SCSS

$celestial-pink: #9c004a;
$celestial-pink-rgb: 156, 0, 74;
$celestial-pink-light: mix(#fff, $celestial-pink, 20%);
$celestial-pink-dark: mix(#000, $celestial-pink, 20%);

.element {
  color: $celestial-pink;
  box-shadow: 0 0 0 2px rgba($celestial-pink, 0.35);
}