Red-Eye

CSS

:root {
  --red-eye: #dd1155;
  --red-eye-rgb: 221 17 85;
  --red-eye-oklch: oklch(0.577 0.224 12);
}

.element {
  color: var(--red-eye);
  background-color: hsl(340 86% 47%);
  border-color: oklch(0.577 0.224 12);
}

Tailwind CSS v4

@theme {
  --color-red-eye: #dd1155;
  --color-red-eye-50: #ffdbe2;
  --color-red-eye-100: #ffc9d1;
  --color-red-eye-200: #ffaab7;
  --color-red-eye-300: #ff8094;
  --color-red-eye-400: #ff547b;
  --color-red-eye-500: #f5035d;
  --color-red-eye-600: #cf114f;
  --color-red-eye-700: #a7103f;
  --color-red-eye-800: #7c0830;
  --color-red-eye-900: #580621;
  --color-red-eye-950: #3b0010;
}

SCSS

$red-eye: #dd1155;
$red-eye-rgb: 221, 17, 85;
$red-eye-light: mix(#fff, $red-eye, 20%);
$red-eye-dark: mix(#000, $red-eye, 20%);

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