Red Contrast

CSS

:root {
  --red-contrast: #b33234;
  --red-contrast-rgb: 179 50 52;
  --red-contrast-oklch: oklch(0.515 0.166 24.4);
}

.element {
  color: var(--red-contrast);
  background-color: hsl(359 56% 45%);
  border-color: oklch(0.515 0.166 24.4);
}

Tailwind CSS v4

@theme {
  --color-red-contrast: #b33234;
  --color-red-contrast-50: #ffe4dc;
  --color-red-contrast-100: #ffd3cb;
  --color-red-contrast-200: #ffb9af;
  --color-red-contrast-300: #ff948a;
  --color-red-contrast-400: #f0726c;
  --color-red-contrast-500: #df4d4c;
  --color-red-contrast-600: #bc4241;
  --color-red-contrast-700: #973534;
  --color-red-contrast-800: #712527;
  --color-red-contrast-900: #50191a;
  --color-red-contrast-950: #35080a;
}

SCSS

$red-contrast: #b33234;
$red-contrast-rgb: 179, 50, 52;
$red-contrast-light: mix(#fff, $red-contrast, 20%);
$red-contrast-dark: mix(#000, $red-contrast, 20%);

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