Pale Pink

CSS

:root {
  --pale-pink: #efcddb;
  --pale-pink-rgb: 239 205 219;
  --pale-pink-oklch: oklch(0.881 0.042 351.3);
}

.element {
  color: var(--pale-pink);
  background-color: hsl(335 52% 87%);
  border-color: oklch(0.881 0.042 351.3);
}

Tailwind CSS v4

@theme {
  --color-pale-pink: #efcddb;
  --color-pale-pink-50: #fff0f6;
  --color-pale-pink-100: #f4e2e9;
  --color-pale-pink-200: #e4cdd6;
  --color-pale-pink-300: #caafb9;
  --color-pale-pink-400: #b395a1;
  --color-pale-pink-500: #9d7b89;
  --color-pale-pink-600: #856874;
  --color-pale-pink-700: #6a535d;
  --color-pale-pink-800: #4e3d45;
  --color-pale-pink-900: #362a2f;
  --color-pale-pink-950: #21171c;
}

SCSS

$pale-pink: #efcddb;
$pale-pink-rgb: 239, 205, 219;
$pale-pink-light: mix(#fff, $pale-pink, 20%);
$pale-pink-dark: mix(#000, $pale-pink, 20%);

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