Embarrassment

CSS

:root {
  --embarrassment: #ff7777;
  --embarrassment-rgb: 255 119 119;
  --embarrassment-oklch: oklch(0.73 0.166 22.1);
}

.element {
  color: var(--embarrassment);
  background-color: hsl(0 100% 73%);
  border-color: oklch(0.73 0.166 22.1);
}

Tailwind CSS v4

@theme {
  --color-embarrassment: #ff7777;
  --color-embarrassment-50: #ffe3de;
  --color-embarrassment-100: #ffd3cd;
  --color-embarrassment-200: #ffb8b2;
  --color-embarrassment-300: #ff948d;
  --color-embarrassment-400: #f17171;
  --color-embarrassment-500: #df4c51;
  --color-embarrassment-600: #bc4145;
  --color-embarrassment-700: #973437;
  --color-embarrassment-800: #712429;
  --color-embarrassment-900: #50181c;
  --color-embarrassment-950: #35080c;
}

SCSS

$embarrassment: #ff7777;
$embarrassment-rgb: 255, 119, 119;
$embarrassment-light: mix(#fff, $embarrassment, 20%);
$embarrassment-dark: mix(#000, $embarrassment, 20%);

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