Placebo Pink

CSS

:root {
  --placebo-pink: #fcebfa;
  --placebo-pink-rgb: 252 235 250;
  --placebo-pink-oklch: oklch(0.958 0.027 329.5);
}

.element {
  color: var(--placebo-pink);
  background-color: hsl(307 74% 95%);
  border-color: oklch(0.958 0.027 329.5);
}

Tailwind CSS v4

@theme {
  --color-placebo-pink: #fcebfa;
  --color-placebo-pink-50: #faf2f9;
  --color-placebo-pink-100: #ede5ec;
  --color-placebo-pink-200: #dbd0d9;
  --color-placebo-pink-300: #c0b3be;
  --color-placebo-pink-400: #a899a6;
  --color-placebo-pink-500: #91808f;
  --color-placebo-pink-600: #7a6c79;
  --color-placebo-pink-700: #625761;
  --color-placebo-pink-800: #483f47;
  --color-placebo-pink-900: #322c31;
  --color-placebo-pink-950: #1e191d;
}

SCSS

$placebo-pink: #fcebfa;
$placebo-pink-rgb: 252, 235, 250;
$placebo-pink-light: mix(#fff, $placebo-pink, 20%);
$placebo-pink-dark: mix(#000, $placebo-pink, 20%);

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