Red Wrath

CSS

:root {
  --red-wrath: #ee1155;
  --red-wrath-rgb: 238 17 85;
  --red-wrath-oklch: oklch(0.608 0.238 14.1);
}

.element {
  color: var(--red-wrath);
  background-color: hsl(342 87% 50%);
  border-color: oklch(0.608 0.238 14.1);
}

Tailwind CSS v4

@theme {
  --color-red-wrath: #ee1155;
  --color-red-wrath-50: #ffdade;
  --color-red-wrath-100: #ffc7cd;
  --color-red-wrath-200: #ffa8b1;
  --color-red-wrath-300: #ff7c8d;
  --color-red-wrath-400: #ff4d72;
  --color-red-wrath-500: #fb0054;
  --color-red-wrath-600: #d40047;
  --color-red-wrath-700: #ab0039;
  --color-red-wrath-800: #80002b;
  --color-red-wrath-900: #5a011d;
  --color-red-wrath-950: #3d000d;
}

SCSS

$red-wrath: #ee1155;
$red-wrath-rgb: 238, 17, 85;
$red-wrath-light: mix(#fff, $red-wrath, 20%);
$red-wrath-dark: mix(#000, $red-wrath, 20%);

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