Sprinkled With Pink

CSS

:root {
  --sprinkled-with-pink: #e7a2ae;
  --sprinkled-with-pink-rgb: 231 162 174;
  --sprinkled-with-pink-oklch: oklch(0.782 0.083 7.7);
}

.element {
  color: var(--sprinkled-with-pink);
  background-color: hsl(350 59% 77%);
  border-color: oklch(0.782 0.083 7.7);
}

Tailwind CSS v4

@theme {
  --color-sprinkled-with-pink: #e7a2ae;
  --color-sprinkled-with-pink-50: #ffecf0;
  --color-sprinkled-with-pink-100: #ffdde2;
  --color-sprinkled-with-pink-200: #f5c6cc;
  --color-sprinkled-with-pink-300: #dea6ae;
  --color-sprinkled-with-pink-400: #ca8a95;
  --color-sprinkled-with-pink-500: #b56e7c;
  --color-sprinkled-with-pink-600: #995e69;
  --color-sprinkled-with-pink-700: #7b4b54;
  --color-sprinkled-with-pink-800: #5b363e;
  --color-sprinkled-with-pink-900: #40252b;
  --color-sprinkled-with-pink-950: #281318;
}

SCSS

$sprinkled-with-pink: #e7a2ae;
$sprinkled-with-pink-rgb: 231, 162, 174;
$sprinkled-with-pink-light: mix(#fff, $sprinkled-with-pink, 20%);
$sprinkled-with-pink-dark: mix(#000, $sprinkled-with-pink, 20%);

.element {
  color: $sprinkled-with-pink;
  box-shadow: 0 0 0 2px rgba($sprinkled-with-pink, 0.35);
}