#F89BA5

CSS

:root {
  --ballet-slippers: #f89ba5;
  --ballet-slippers-rgb: 248 155 165;
  --ballet-slippers-oklch: oklch(0.786 0.112 13);
}

.element {
  color: var(--ballet-slippers);
  background-color: hsl(354 87% 79%);
  border-color: oklch(0.786 0.112 13);
}

Tailwind CSS v4

@theme {
  --color-ballet-slippers: #f89ba5;
  --color-ballet-slippers-50: #ffe9eb;
  --color-ballet-slippers-100: #ffd9dc;
  --color-ballet-slippers-200: #ffc1c5;
  --color-ballet-slippers-300: #eba0a5;
  --color-ballet-slippers-400: #d8828c;
  --color-ballet-slippers-500: #c46471;
  --color-ballet-slippers-600: #a65560;
  --color-ballet-slippers-700: #85444c;
  --color-ballet-slippers-800: #633139;
  --color-ballet-slippers-900: #452127;
  --color-ballet-slippers-950: #2d1015;
}

SCSS

$ballet-slippers: #f89ba5;
$ballet-slippers-rgb: 248, 155, 165;
$ballet-slippers-light: mix(#fff, $ballet-slippers, 20%);
$ballet-slippers-dark: mix(#000, $ballet-slippers, 20%);

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