Red Rhapsody

CSS

:root {
  --red-rhapsody: #ca1b1b;
  --red-rhapsody-rgb: 202 27 27;
  --red-rhapsody-oklch: oklch(0.537 0.206 27.9);
}

.element {
  color: var(--red-rhapsody);
  background-color: hsl(0 76% 45%);
  border-color: oklch(0.537 0.206 27.9);
}

Tailwind CSS v4

@theme {
  --color-red-rhapsody: #ca1b1b;
  --color-red-rhapsody-50: #ffe0d3;
  --color-red-rhapsody-100: #ffcebf;
  --color-red-rhapsody-200: #ffb2a0;
  --color-red-rhapsody-300: #ff8a76;
  --color-red-rhapsody-400: #ff6255;
  --color-red-rhapsody-500: #f0302b;
  --color-red-rhapsody-600: #cb2c26;
  --color-red-rhapsody-700: #a3231e;
  --color-red-rhapsody-800: #7a1718;
  --color-red-rhapsody-900: #560f0f;
  --color-red-rhapsody-950: #3a0103;
}

SCSS

$red-rhapsody: #ca1b1b;
$red-rhapsody-rgb: 202, 27, 27;
$red-rhapsody-light: mix(#fff, $red-rhapsody, 20%);
$red-rhapsody-dark: mix(#000, $red-rhapsody, 20%);

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