#CD32AE

CSS

:root {
  --loudicious-pink: #cd32ae;
  --loudicious-pink-rgb: 205 50 174;
  --loudicious-pink-oklch: oklch(0.598 0.226 337.6);
}

.element {
  color: var(--loudicious-pink);
  background-color: hsl(312 61% 50%);
  border-color: oklch(0.598 0.226 337.6);
}

Tailwind CSS v4

@theme {
  --color-loudicious-pink: #cd32ae;
  --color-loudicious-pink-50: #ffdcff;
  --color-loudicious-pink-100: #ffcaff;
  --color-loudicious-pink-200: #ffadf3;
  --color-loudicious-pink-300: #ff84dc;
  --color-loudicious-pink-400: #ed5dcd;
  --color-loudicious-pink-500: #db29b9;
  --color-loudicious-pink-600: #b9269d;
  --color-loudicious-pink-700: #951f7e;
  --color-loudicious-pink-800: #6e1560;
  --color-loudicious-pink-900: #4d0e43;
  --color-loudicious-pink-950: #33012b;
}

SCSS

$loudicious-pink: #cd32ae;
$loudicious-pink-rgb: 205, 50, 174;
$loudicious-pink-light: mix(#fff, $loudicious-pink, 20%);
$loudicious-pink-dark: mix(#000, $loudicious-pink, 20%);

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