#D77BC0

CSS

:root {
  --pink-punk: #d77bc0;
  --pink-punk-rgb: 215 123 192;
  --pink-punk-oklch: oklch(0.705 0.142 337);
}

.element {
  color: var(--pink-punk);
  background-color: hsl(315 53% 66%);
  border-color: oklch(0.705 0.142 337);
}

Tailwind CSS v4

@theme {
  --color-pink-punk: #d77bc0;
  --color-pink-punk-50: #ffe6ff;
  --color-pink-punk-100: #ffd6f8;
  --color-pink-punk-200: #febde8;
  --color-pink-punk-300: #e89acf;
  --color-pink-punk-400: #d37cbd;
  --color-pink-punk-500: #bf5ca8;
  --color-pink-punk-600: #a14f8e;
  --color-pink-punk-700: #823f72;
  --color-pink-punk-800: #5f2d56;
  --color-pink-punk-900: #431e3c;
  --color-pink-punk-950: #2b0e26;
}

SCSS

$pink-punk: #d77bc0;
$pink-punk-rgb: 215, 123, 192;
$pink-punk-light: mix(#fff, $pink-punk, 20%);
$pink-punk-dark: mix(#000, $pink-punk, 20%);

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