Boy Red

CSS

:root {
  --boy-red: #b3111d;
  --boy-red-rgb: 179 17 29;
  --boy-red-oklch: oklch(0.489 0.19 25.8);
}

.element {
  color: var(--boy-red);
  background-color: hsl(356 83% 38%);
  border-color: oklch(0.489 0.19 25.8);
}

Tailwind CSS v4

@theme {
  --color-boy-red: #b3111d;
  --color-boy-red-50: #ffe1d7;
  --color-boy-red-100: #ffd0c5;
  --color-boy-red-200: #ffb4a7;
  --color-boy-red-300: #ff8e80;
  --color-boy-red-400: #fb6861;
  --color-boy-red-500: #e93d3d;
  --color-boy-red-600: #c53634;
  --color-boy-red-700: #9f2b2a;
  --color-boy-red-800: #771d20;
  --color-boy-red-900: #541315;
  --color-boy-red-950: #380407;
}

SCSS

$boy-red: #b3111d;
$boy-red-rgb: 179, 17, 29;
$boy-red-light: mix(#fff, $boy-red, 20%);
$boy-red-dark: mix(#000, $boy-red, 20%);

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