Pretty in Plum

CSS

:root {
  --pretty-in-plum: #cc5588;
  --pretty-in-plum-rgb: 204 85 136;
  --pretty-in-plum-oklch: oklch(0.616 0.159 356.1);
}

.element {
  color: var(--pretty-in-plum);
  background-color: hsl(334 54% 57%);
  border-color: oklch(0.616 0.159 356.1);
}

Tailwind CSS v4

@theme {
  --color-pretty-in-plum: #cc5588;
  --color-pretty-in-plum-50: #ffe3f5;
  --color-pretty-in-plum-100: #ffd2e7;
  --color-pretty-in-plum-200: #ffb8d4;
  --color-pretty-in-plum-300: #f994b7;
  --color-pretty-in-plum-400: #e672a1;
  --color-pretty-in-plum-500: #d34f89;
  --color-pretty-in-plum-600: #b24474;
  --color-pretty-in-plum-700: #8f365d;
  --color-pretty-in-plum-800: #6a2646;
  --color-pretty-in-plum-900: #4b1a30;
  --color-pretty-in-plum-950: #31091d;
}

SCSS

$pretty-in-plum: #cc5588;
$pretty-in-plum-rgb: 204, 85, 136;
$pretty-in-plum-light: mix(#fff, $pretty-in-plum, 20%);
$pretty-in-plum-dark: mix(#000, $pretty-in-plum, 20%);

.element {
  color: $pretty-in-plum;
  box-shadow: 0 0 0 2px rgba($pretty-in-plum, 0.35);
}