Purple Red

CSS

:root {
  --purple-red: #990147;
  --purple-red-rgb: 153 1 71;
  --purple-red-oklch: oklch(0.44 0.176 4.1);
}

.element {
  color: var(--purple-red);
  background-color: hsl(332 99% 30%);
  border-color: oklch(0.44 0.176 4.1);
}

Tailwind CSS v4

@theme {
  --color-purple-red: #990147;
  --color-purple-red-50: #ffe1ed;
  --color-purple-red-100: #ffd0df;
  --color-purple-red-200: #ffb4c8;
  --color-purple-red-300: #ff8fa9;
  --color-purple-red-400: #f06b92;
  --color-purple-red-500: #de4478;
  --color-purple-red-600: #bc3b66;
  --color-purple-red-700: #972f51;
  --color-purple-red-800: #70213d;
  --color-purple-red-900: #4f162a;
  --color-purple-red-950: #340618;
}

SCSS

$purple-red: #990147;
$purple-red-rgb: 153, 1, 71;
$purple-red-light: mix(#fff, $purple-red, 20%);
$purple-red-dark: mix(#000, $purple-red, 20%);

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