Pale Flamingo

CSS

:root {
  --pale-flamingo: #e7d1dd;
  --pale-flamingo-rgb: 231 209 221;
  --pale-flamingo-oklch: oklch(0.882 0.029 343.6);
}

.element {
  color: var(--pale-flamingo);
  background-color: hsl(327 31% 86%);
  border-color: oklch(0.882 0.029 343.6);
}

Tailwind CSS v4

@theme {
  --color-pale-flamingo: #e7d1dd;
  --color-pale-flamingo-50: #fcf2f7;
  --color-pale-flamingo-100: #f0e4ea;
  --color-pale-flamingo-200: #decfd7;
  --color-pale-flamingo-300: #c3b2bb;
  --color-pale-flamingo-400: #ac98a3;
  --color-pale-flamingo-500: #957f8b;
  --color-pale-flamingo-600: #7e6b76;
  --color-pale-flamingo-700: #65565e;
  --color-pale-flamingo-800: #4a3f45;
  --color-pale-flamingo-900: #332b30;
  --color-pale-flamingo-950: #1f181c;
}

SCSS

$pale-flamingo: #e7d1dd;
$pale-flamingo-rgb: 231, 209, 221;
$pale-flamingo-light: mix(#fff, $pale-flamingo, 20%);
$pale-flamingo-dark: mix(#000, $pale-flamingo, 20%);

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