Red Potion

CSS

:root {
  --red-potion: #dd143d;
  --red-potion-rgb: 221 20 61;
  --red-potion-oklch: oklch(0.573 0.223 19.9);
}

.element {
  color: var(--red-potion);
  background-color: hsl(348 83% 47%);
  border-color: oklch(0.573 0.223 19.9);
}

Tailwind CSS v4

@theme {
  --color-red-potion: #dd143d;
  --color-red-potion-50: #ffdcd9;
  --color-red-potion-100: #ffcac7;
  --color-red-potion-200: #ffaca9;
  --color-red-potion-300: #ff8283;
  --color-red-potion-400: #ff5766;
  --color-red-potion-500: #f70e43;
  --color-red-potion-600: #d0163a;
  --color-red-potion-700: #a8132e;
  --color-red-potion-800: #7d0a23;
  --color-red-potion-900: #590717;
  --color-red-potion-950: #3c0009;
}

SCSS

$red-potion: #dd143d;
$red-potion-rgb: 221, 20, 61;
$red-potion-light: mix(#fff, $red-potion, 20%);
$red-potion-dark: mix(#000, $red-potion, 20%);

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