Old Glory Red

CSS

:root {
  --old-glory-red: #bf0a30;
  --old-glory-red-rgb: 191 10 48;
  --old-glory-red-oklch: oklch(0.512 0.202 20.6);
}

.element {
  color: var(--old-glory-red);
  background-color: hsl(347 90% 39%);
  border-color: oklch(0.512 0.202 20.6);
}

Tailwind CSS v4

@theme {
  --color-old-glory-red: #bf0a30;
  --color-old-glory-red-50: #ffdfdb;
  --color-old-glory-red-100: #ffcec9;
  --color-old-glory-red-200: #ffb1ac;
  --color-old-glory-red-300: #ff8987;
  --color-old-glory-red-400: #ff626a;
  --color-old-glory-red-500: #ee3049;
  --color-old-glory-red-600: #c92c3e;
  --color-old-glory-red-700: #a22431;
  --color-old-glory-red-800: #791726;
  --color-old-glory-red-900: #550f19;
  --color-old-glory-red-950: #39010a;
}

SCSS

$old-glory-red: #bf0a30;
$old-glory-red-rgb: 191, 10, 48;
$old-glory-red-light: mix(#fff, $old-glory-red, 20%);
$old-glory-red-dark: mix(#000, $old-glory-red, 20%);

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