Ceremonial Red Ribbon

CSS

:root {
  --ceremonial-red-ribbon: #e63127;
  --ceremonial-red-ribbon-rgb: 230 49 39;
  --ceremonial-red-ribbon-oklch: oklch(0.602 0.217 28.8);
}

.element {
  color: var(--ceremonial-red-ribbon);
  background-color: hsl(3 79% 53%);
  border-color: oklch(0.602 0.217 28.8);
}

Tailwind CSS v4

@theme {
  --color-ceremonial-red-ribbon: #e63127;
  --color-ceremonial-red-ribbon-50: #ffdfd0;
  --color-ceremonial-red-ribbon-100: #ffcdbc;
  --color-ceremonial-red-ribbon-200: #ffb09b;
  --color-ceremonial-red-ribbon-300: #ff8770;
  --color-ceremonial-red-ribbon-400: #ff5d4d;
  --color-ceremonial-red-ribbon-500: #f5231c;
  --color-ceremonial-red-ribbon-600: #cf231b;
  --color-ceremonial-red-ribbon-700: #a61c16;
  --color-ceremonial-red-ribbon-800: #7d1112;
  --color-ceremonial-red-ribbon-900: #580b0c;
  --color-ceremonial-red-ribbon-950: #3b0001;
}

SCSS

$ceremonial-red-ribbon: #e63127;
$ceremonial-red-ribbon-rgb: 230, 49, 39;
$ceremonial-red-ribbon-light: mix(#fff, $ceremonial-red-ribbon, 20%);
$ceremonial-red-ribbon-dark: mix(#000, $ceremonial-red-ribbon, 20%);

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