Pale Petals

CSS

:root {
  --pale-petals: #d9bfce;
  --pale-petals-rgb: 217 191 206;
  --pale-petals-oklch: oklch(0.831 0.036 342.3);
}

.element {
  color: var(--pale-petals);
  background-color: hsl(325 25% 80%);
  border-color: oklch(0.831 0.036 342.3);
}

Tailwind CSS v4

@theme {
  --color-pale-petals: #d9bfce;
  --color-pale-petals-50: #fdf1f8;
  --color-pale-petals-100: #f1e3eb;
  --color-pale-petals-200: #e0ced8;
  --color-pale-petals-300: #c5b1bc;
  --color-pale-petals-400: #ae97a4;
  --color-pale-petals-500: #987d8d;
  --color-pale-petals-600: #806a77;
  --color-pale-petals-700: #67555f;
  --color-pale-petals-800: #4b3e46;
  --color-pale-petals-900: #342a31;
  --color-pale-petals-950: #20181d;
}

SCSS

$pale-petals: #d9bfce;
$pale-petals-rgb: 217, 191, 206;
$pale-petals-light: mix(#fff, $pale-petals, 20%);
$pale-petals-dark: mix(#000, $pale-petals, 20%);

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