Blush of Hyacinth

CSS

:root {
  --blush-of-hyacinth: #dccbd1;
  --blush-of-hyacinth-rgb: 220 203 209;
  --blush-of-hyacinth-oklch: oklch(0.858 0.021 354.1);
}

.element {
  color: var(--blush-of-hyacinth);
  background-color: hsl(339 20% 83%);
  border-color: oklch(0.858 0.021 354.1);
}

Tailwind CSS v4

@theme {
  --color-blush-of-hyacinth: #dccbd1;
  --color-blush-of-hyacinth-50: #faf3f5;
  --color-blush-of-hyacinth-100: #eee5e8;
  --color-blush-of-hyacinth-200: #dcd1d4;
  --color-blush-of-hyacinth-300: #c1b3b8;
  --color-blush-of-hyacinth-400: #a99a9f;
  --color-blush-of-hyacinth-500: #928187;
  --color-blush-of-hyacinth-600: #7b6d72;
  --color-blush-of-hyacinth-700: #63575b;
  --color-blush-of-hyacinth-800: #484043;
  --color-blush-of-hyacinth-900: #322c2e;
  --color-blush-of-hyacinth-950: #1e191b;
}

SCSS

$blush-of-hyacinth: #dccbd1;
$blush-of-hyacinth-rgb: 220, 203, 209;
$blush-of-hyacinth-light: mix(#fff, $blush-of-hyacinth, 20%);
$blush-of-hyacinth-dark: mix(#000, $blush-of-hyacinth, 20%);

.element {
  color: $blush-of-hyacinth;
  box-shadow: 0 0 0 2px rgba($blush-of-hyacinth, 0.35);
}