Dressed to the Nines

CSS

:root {
  --dressed-to-the-nines: #bb5057;
  --dressed-to-the-nines-rgb: 187 80 87;
  --dressed-to-the-nines-oklch: oklch(0.571 0.138 18.6);
}

.element {
  color: var(--dressed-to-the-nines);
  background-color: hsl(356 44% 52%);
  border-color: oklch(0.571 0.138 18.6);
}

Tailwind CSS v4

@theme {
  --color-dressed-to-the-nines: #bb5057;
  --color-dressed-to-the-nines-50: #ffe6e4;
  --color-dressed-to-the-nines-100: #ffd6d4;
  --color-dressed-to-the-nines-200: #ffbdbb;
  --color-dressed-to-the-nines-300: #f69a99;
  --color-dressed-to-the-nines-400: #e47a7e;
  --color-dressed-to-the-nines-500: #d25962;
  --color-dressed-to-the-nines-600: #b14c53;
  --color-dressed-to-the-nines-700: #8e3d42;
  --color-dressed-to-the-nines-800: #6a2b31;
  --color-dressed-to-the-nines-900: #4b1d21;
  --color-dressed-to-the-nines-950: #310d11;
}

SCSS

$dressed-to-the-nines: #bb5057;
$dressed-to-the-nines-rgb: 187, 80, 87;
$dressed-to-the-nines-light: mix(#fff, $dressed-to-the-nines, 20%);
$dressed-to-the-nines-dark: mix(#000, $dressed-to-the-nines, 20%);

.element {
  color: $dressed-to-the-nines;
  box-shadow: 0 0 0 2px rgba($dressed-to-the-nines, 0.35);
}