Pale Petunia

CSS

:root {
  --pale-petunia: #f8c0c7;
  --pale-petunia-rgb: 248 192 199;
  --pale-petunia-oklch: oklch(0.86 0.065 10.1);
}

.element {
  color: var(--pale-petunia);
  background-color: hsl(353 80% 86%);
  border-color: oklch(0.86 0.065 10.1);
}

Tailwind CSS v4

@theme {
  --color-pale-petunia: #f8c0c7;
  --color-pale-petunia-50: #ffeef0;
  --color-pale-petunia-100: #fde0e2;
  --color-pale-petunia-200: #efcacd;
  --color-pale-petunia-300: #d6aaae;
  --color-pale-petunia-400: #c18f95;
  --color-pale-petunia-500: #ac747c;
  --color-pale-petunia-600: #926369;
  --color-pale-petunia-700: #754f54;
  --color-pale-petunia-800: #56393e;
  --color-pale-petunia-900: #3c272b;
  --color-pale-petunia-950: #261518;
}

SCSS

$pale-petunia: #f8c0c7;
$pale-petunia-rgb: 248, 192, 199;
$pale-petunia-light: mix(#fff, $pale-petunia, 20%);
$pale-petunia-dark: mix(#000, $pale-petunia, 20%);

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