Super Pink

CSS

:root {
  --super-pink: #ce6ba6;
  --super-pink-rgb: 206 107 166;
  --super-pink-oklch: oklch(0.66 0.143 345);
}

.element {
  color: var(--super-pink);
  background-color: hsl(324 50% 61%);
  border-color: oklch(0.66 0.143 345);
}

Tailwind CSS v4

@theme {
  --color-super-pink: #ce6ba6;
  --color-super-pink-50: #ffe5fd;
  --color-super-pink-100: #ffd5f1;
  --color-super-pink-200: #ffbce0;
  --color-super-pink-300: #ed99c5;
  --color-super-pink-400: #d97ab2;
  --color-super-pink-500: #c5599c;
  --color-super-pink-600: #a74c83;
  --color-super-pink-700: #863d69;
  --color-super-pink-800: #632c4f;
  --color-super-pink-900: #451d37;
  --color-super-pink-950: #2d0d22;
}

SCSS

$super-pink: #ce6ba6;
$super-pink-rgb: 206, 107, 166;
$super-pink-light: mix(#fff, $super-pink, 20%);
$super-pink-dark: mix(#000, $super-pink, 20%);

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