Pink Elephants

CSS

:root {
  --pink-elephants: #ff99ee;
  --pink-elephants-rgb: 255 153 238;
  --pink-elephants-oklch: oklch(0.815 0.16 333.3);
}

.element {
  color: var(--pink-elephants);
  background-color: hsl(310 100% 80%);
  border-color: oklch(0.815 0.16 333.3);
}

Tailwind CSS v4

@theme {
  --color-pink-elephants: #ff99ee;
  --color-pink-elephants-50: #ffe5ff;
  --color-pink-elephants-100: #ffd4fd;
  --color-pink-elephants-200: #ffbbef;
  --color-pink-elephants-300: #ea97d7;
  --color-pink-elephants-400: #d578c6;
  --color-pink-elephants-500: #c156b2;
  --color-pink-elephants-600: #a34a97;
  --color-pink-elephants-700: #833b79;
  --color-pink-elephants-800: #602a5b;
  --color-pink-elephants-900: #441c40;
  --color-pink-elephants-950: #2b0c29;
}

SCSS

$pink-elephants: #ff99ee;
$pink-elephants-rgb: 255, 153, 238;
$pink-elephants-light: mix(#fff, $pink-elephants, 20%);
$pink-elephants-dark: mix(#000, $pink-elephants, 20%);

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