Glitzy Red

CSS

:root {
  --glitzy-red: #af413b;
  --glitzy-red-rgb: 175 65 59;
  --glitzy-red-oklch: oklch(0.526 0.145 26.4);
}

.element {
  color: var(--glitzy-red);
  background-color: hsl(3 50% 46%);
  border-color: oklch(0.526 0.145 26.4);
}

Tailwind CSS v4

@theme {
  --color-glitzy-red: #af413b;
  --color-glitzy-red-50: #ffe6de;
  --color-glitzy-red-100: #ffd6cd;
  --color-glitzy-red-200: #ffbdb1;
  --color-glitzy-red-300: #f99a8d;
  --color-glitzy-red-400: #e87970;
  --color-glitzy-red-500: #d55850;
  --color-glitzy-red-600: #b44b44;
  --color-glitzy-red-700: #913c36;
  --color-glitzy-red-800: #6c2a28;
  --color-glitzy-red-900: #4c1d1b;
  --color-glitzy-red-950: #320c0b;
}

SCSS

$glitzy-red: #af413b;
$glitzy-red-rgb: 175, 65, 59;
$glitzy-red-light: mix(#fff, $glitzy-red, 20%);
$glitzy-red-dark: mix(#000, $glitzy-red, 20%);

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