Pale Perfection

CSS

:root {
  --pale-perfection: #f7e0de;
  --pale-perfection-rgb: 247 224 222;
  --pale-perfection-oklch: oklch(0.925 0.026 23.6);
}

.element {
  color: var(--pale-perfection);
  background-color: hsl(5 61% 92%);
  border-color: oklch(0.925 0.026 23.6);
}

Tailwind CSS v4

@theme {
  --color-pale-perfection: #f7e0de;
  --color-pale-perfection-50: #fcf2f1;
  --color-pale-perfection-100: #f0e5e3;
  --color-pale-perfection-200: #dfd0cf;
  --color-pale-perfection-300: #c4b3b1;
  --color-pale-perfection-400: #ad9997;
  --color-pale-perfection-500: #97807e;
  --color-pale-perfection-600: #7f6c6b;
  --color-pale-perfection-700: #665755;
  --color-pale-perfection-800: #4b3f3e;
  --color-pale-perfection-900: #342b2b;
  --color-pale-perfection-950: #1f1918;
}

SCSS

$pale-perfection: #f7e0de;
$pale-perfection-rgb: 247, 224, 222;
$pale-perfection-light: mix(#fff, $pale-perfection, 20%);
$pale-perfection-dark: mix(#000, $pale-perfection, 20%);

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