#F17097

CSS

:root {
  --embarrassed: #f17097;
  --embarrassed-rgb: 241 112 151;
  --embarrassed-oklch: oklch(0.709 0.163 3.1);
}

.element {
  color: var(--embarrassed);
  background-color: hsl(342 82% 69%);
  border-color: oklch(0.709 0.163 3.1);
}

Tailwind CSS v4

@theme {
  --color-embarrassed: #f17097;
  --color-embarrassed-50: #ffe3ef;
  --color-embarrassed-100: #ffd2e0;
  --color-embarrassed-200: #ffb7cb;
  --color-embarrassed-300: #fd93ac;
  --color-embarrassed-400: #eb7195;
  --color-embarrassed-500: #d84c7b;
  --color-embarrassed-600: #b74269;
  --color-embarrassed-700: #933454;
  --color-embarrassed-800: #6d253f;
  --color-embarrassed-900: #4d192b;
  --color-embarrassed-950: #320819;
}

SCSS

$embarrassed: #f17097;
$embarrassed-rgb: 241, 112, 151;
$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);
}