#F66C96

CSS

:root {
  --embarrassed: #f66c96;
  --embarrassed-rgb: 246 108 150;
  --embarrassed-oklch: oklch(0.71 0.173 3.5);
}

.element {
  color: var(--embarrassed);
  background-color: hsl(342 88% 69%);
  border-color: oklch(0.71 0.173 3.5);
}

Tailwind CSS v4

@theme {
  --color-embarrassed: #f66c96;
  --color-embarrassed-50: #ffe1ee;
  --color-embarrassed-100: #ffd0df;
  --color-embarrassed-200: #ffb5ca;
  --color-embarrassed-300: #ff90ab;
  --color-embarrassed-400: #ef6c94;
  --color-embarrassed-500: #dd467a;
  --color-embarrassed-600: #ba3d67;
  --color-embarrassed-700: #963052;
  --color-embarrassed-800: #6f223e;
  --color-embarrassed-900: #4f162b;
  --color-embarrassed-950: #340718;
}

SCSS

$embarrassed: #f66c96;
$embarrassed-rgb: 246, 108, 150;
$embarrassed-light: mix(#fff, $embarrassed, 20%);
$embarrassed-dark: mix(#000, $embarrassed, 20%);

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