My Fair Lady

CSS

:root {
  --my-fair-lady: #f3c4c2;
  --my-fair-lady-rgb: 243 196 194;
  --my-fair-lady-oklch: oklch(0.861 0.054 21.1);
}

.element {
  color: var(--my-fair-lady);
  background-color: hsl(2 67% 86%);
  border-color: oklch(0.861 0.054 21.1);
}

Tailwind CSS v4

@theme {
  --color-my-fair-lady: #f3c4c2;
  --color-my-fair-lady-50: #fff0ee;
  --color-my-fair-lady-100: #fae1df;
  --color-my-fair-lady-200: #ebccc9;
  --color-my-fair-lady-300: #d2adaa;
  --color-my-fair-lady-400: #bc9291;
  --color-my-fair-lady-500: #a77877;
  --color-my-fair-lady-600: #8d6665;
  --color-my-fair-lady-700: #715150;
  --color-my-fair-lady-800: #543b3b;
  --color-my-fair-lady-900: #3a2828;
  --color-my-fair-lady-950: #241616;
}

SCSS

$my-fair-lady: #f3c4c2;
$my-fair-lady-rgb: 243, 196, 194;
$my-fair-lady-light: mix(#fff, $my-fair-lady, 20%);
$my-fair-lady-dark: mix(#000, $my-fair-lady, 20%);

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