Belle of the Ball

CSS

:root {
  --belle-of-the-ball: #e3cbc0;
  --belle-of-the-ball-rgb: 227 203 192;
  --belle-of-the-ball-oklch: oklch(0.859 0.031 46.2);
}

.element {
  color: var(--belle-of-the-ball);
  background-color: hsl(19 38% 82%);
  border-color: oklch(0.859 0.031 46.2);
}

Tailwind CSS v4

@theme {
  --color-belle-of-the-ball: #e3cbc0;
  --color-belle-of-the-ball-50: #fdf3ee;
  --color-belle-of-the-ball-100: #f1e5df;
  --color-belle-of-the-ball-200: #e0d1c9;
  --color-belle-of-the-ball-300: #c5b3aa;
  --color-belle-of-the-ball-400: #af998f;
  --color-belle-of-the-ball-500: #988075;
  --color-belle-of-the-ball-600: #816d63;
  --color-belle-of-the-ball-700: #67574f;
  --color-belle-of-the-ball-800: #4c3f3a;
  --color-belle-of-the-ball-900: #352b28;
  --color-belle-of-the-ball-950: #201916;
}

SCSS

$belle-of-the-ball: #e3cbc0;
$belle-of-the-ball-rgb: 227, 203, 192;
$belle-of-the-ball-light: mix(#fff, $belle-of-the-ball, 20%);
$belle-of-the-ball-dark: mix(#000, $belle-of-the-ball, 20%);

.element {
  color: $belle-of-the-ball;
  box-shadow: 0 0 0 2px rgba($belle-of-the-ball, 0.35);
}