Red-Hot Mama

CSS

:root {
  --red-hot-mama: #a91f29;
  --red-hot-mama-rgb: 169 31 41;
  --red-hot-mama-oklch: oklch(0.479 0.172 23.6);
}

.element {
  color: var(--red-hot-mama);
  background-color: hsl(356 69% 39%);
  border-color: oklch(0.479 0.172 23.6);
}

Tailwind CSS v4

@theme {
  --color-red-hot-mama: #a91f29;
  --color-red-hot-mama-50: #ffe3dc;
  --color-red-hot-mama-100: #ffd2ca;
  --color-red-hot-mama-200: #ffb7ae;
  --color-red-hot-mama-300: #ff9289;
  --color-red-hot-mama-400: #f36f6c;
  --color-red-hot-mama-500: #e2484b;
  --color-red-hot-mama-600: #be3f40;
  --color-red-hot-mama-700: #993233;
  --color-red-hot-mama-800: #722326;
  --color-red-hot-mama-900: #51171a;
  --color-red-hot-mama-950: #35070a;
}

SCSS

$red-hot-mama: #a91f29;
$red-hot-mama-rgb: 169, 31, 41;
$red-hot-mama-light: mix(#fff, $red-hot-mama, 20%);
$red-hot-mama-dark: mix(#000, $red-hot-mama, 20%);

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