Dull Pink

CSS

:root {
  --dull-pink: #d5869d;
  --dull-pink-rgb: 213 134 157;
  --dull-pink-oklch: oklch(0.708 0.101 1.1);
}

.element {
  color: var(--dull-pink);
  background-color: hsl(343 48% 68%);
  border-color: oklch(0.708 0.101 1.1);
}

Tailwind CSS v4

@theme {
  --color-dull-pink: #d5869d;
  --color-dull-pink-50: #ffeaf2;
  --color-dull-pink-100: #ffdbe4;
  --color-dull-pink-200: #fac3d0;
  --color-dull-pink-300: #e4a2b2;
  --color-dull-pink-400: #d0859b;
  --color-dull-pink-500: #bc6882;
  --color-dull-pink-600: #9f596e;
  --color-dull-pink-700: #7f4758;
  --color-dull-pink-800: #5e3341;
  --color-dull-pink-900: #42232d;
  --color-dull-pink-950: #2a111a;
}

SCSS

$dull-pink: #d5869d;
$dull-pink-rgb: 213, 134, 157;
$dull-pink-light: mix(#fff, $dull-pink, 20%);
$dull-pink-dark: mix(#000, $dull-pink, 20%);

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