Paris Pink

CSS

:root {
  --paris-pink: #da6d91;
  --paris-pink-rgb: 218 109 145;
  --paris-pink-oklch: oklch(0.672 0.141 0.7);
}

.element {
  color: var(--paris-pink);
  background-color: hsl(340 60% 64%);
  border-color: oklch(0.672 0.141 0.7);
}

Tailwind CSS v4

@theme {
  --color-paris-pink: #da6d91;
  --color-paris-pink-50: #ffe5f1;
  --color-paris-pink-100: #ffd5e3;
  --color-paris-pink-200: #ffbbcf;
  --color-paris-pink-300: #f498b1;
  --color-paris-pink-400: #e1789a;
  --color-paris-pink-500: #ce5781;
  --color-paris-pink-600: #ae4b6d;
  --color-paris-pink-700: #8c3c57;
  --color-paris-pink-800: #682a41;
  --color-paris-pink-900: #491d2d;
  --color-paris-pink-950: #2f0c1a;
}

SCSS

$paris-pink: #da6d91;
$paris-pink-rgb: 218, 109, 145;
$paris-pink-light: mix(#fff, $paris-pink, 20%);
$paris-pink-dark: mix(#000, $paris-pink, 20%);

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