#E52440

CSS

:root {
  --red-ribbon: #e52440;
  --red-ribbon-rgb: 229 36 64;
  --red-ribbon-oklch: oklch(0.595 0.222 21);
}

.element {
  color: var(--red-ribbon);
  background-color: hsl(351 79% 52%);
  border-color: oklch(0.595 0.222 21);
}

Tailwind CSS v4

@theme {
  --color-red-ribbon: #e52440;
  --color-red-ribbon-50: #ffddd7;
  --color-red-ribbon-100: #ffcbc5;
  --color-red-ribbon-200: #ffaca7;
  --color-red-ribbon-300: #ff8380;
  --color-red-ribbon-400: #ff5763;
  --color-red-ribbon-500: #f7113f;
  --color-red-ribbon-600: #d01837;
  --color-red-ribbon-700: #a8142b;
  --color-red-ribbon-800: #7d0b21;
  --color-red-ribbon-900: #590816;
  --color-red-ribbon-950: #3b0008;
}

SCSS

$red-ribbon: #e52440;
$red-ribbon-rgb: 229, 36, 64;
$red-ribbon-light: mix(#fff, $red-ribbon, 20%);
$red-ribbon-dark: mix(#000, $red-ribbon, 20%);

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