Pale Blossom

CSS

:root {
  --pale-blossom: #fde1f0;
  --pale-blossom-rgb: 253 225 240;
  --pale-blossom-oklch: oklch(0.937 0.036 344.3);
}

.element {
  color: var(--pale-blossom);
  background-color: hsl(328 88% 94%);
  border-color: oklch(0.937 0.036 344.3);
}

Tailwind CSS v4

@theme {
  --color-pale-blossom: #fde1f0;
  --color-pale-blossom-50: #fef1f7;
  --color-pale-blossom-100: #f2e3ea;
  --color-pale-blossom-200: #e1ced7;
  --color-pale-blossom-300: #c6b0bb;
  --color-pale-blossom-400: #af96a4;
  --color-pale-blossom-500: #987d8c;
  --color-pale-blossom-600: #816a76;
  --color-pale-blossom-700: #67555f;
  --color-pale-blossom-800: #4c3e46;
  --color-pale-blossom-900: #352a30;
  --color-pale-blossom-950: #20181d;
}

SCSS

$pale-blossom: #fde1f0;
$pale-blossom-rgb: 253, 225, 240;
$pale-blossom-light: mix(#fff, $pale-blossom, 20%);
$pale-blossom-dark: mix(#000, $pale-blossom, 20%);

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