Red Purple

CSS

:root {
  --red-purple: #e40078;
  --red-purple-rgb: 228 0 120;
  --red-purple-oklch: oklch(0.595 0.241 0.3);
}

.element {
  color: var(--red-purple);
  background-color: hsl(328 100% 45%);
  border-color: oklch(0.595 0.241 0.3);
}

Tailwind CSS v4

@theme {
  --color-red-purple: #e40078;
  --color-red-purple-50: #ffd9ef;
  --color-red-purple-100: #ffc6e1;
  --color-red-purple-200: #ffa6cc;
  --color-red-purple-300: #ff7aad;
  --color-red-purple-400: #ff4b98;
  --color-red-purple-500: #f6007f;
  --color-red-purple-600: #cf006b;
  --color-red-purple-700: #a70056;
  --color-red-purple-800: #7c0042;
  --color-red-purple-900: #58012d;
  --color-red-purple-950: #3b001a;
}

SCSS

$red-purple: #e40078;
$red-purple-rgb: 228, 0, 120;
$red-purple-light: mix(#fff, $red-purple, 20%);
$red-purple-dark: mix(#000, $red-purple, 20%);

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