Pretty Pale

CSS

:root {
  --pretty-pale: #e3c6d6;
  --pretty-pale-rgb: 227 198 214;
  --pretty-pale-oklch: oklch(0.856 0.039 343.6);
}

.element {
  color: var(--pretty-pale);
  background-color: hsl(327 34% 83%);
  border-color: oklch(0.856 0.039 343.6);
}

Tailwind CSS v4

@theme {
  --color-pretty-pale: #e3c6d6;
  --color-pretty-pale-50: #fef1f7;
  --color-pretty-pale-100: #f2e3eb;
  --color-pretty-pale-200: #e1ced8;
  --color-pretty-pale-300: #c7b0bc;
  --color-pretty-pale-400: #b096a4;
  --color-pretty-pale-500: #997c8d;
  --color-pretty-pale-600: #826977;
  --color-pretty-pale-700: #68545f;
  --color-pretty-pale-800: #4c3d46;
  --color-pretty-pale-900: #352a31;
  --color-pretty-pale-950: #20181d;
}

SCSS

$pretty-pale: #e3c6d6;
$pretty-pale-rgb: 227, 198, 214;
$pretty-pale-light: mix(#fff, $pretty-pale, 20%);
$pretty-pale-dark: mix(#000, $pretty-pale, 20%);

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