Dark Red

CSS

:root {
  --dark-red: #840000;
  --dark-red-rgb: 132 0 0;
  --dark-red-oklch: oklch(0.385 0.158 29.2);
}

.element {
  color: var(--dark-red);
  background-color: hsl(0 100% 26%);
  border-color: oklch(0.385 0.158 29.2);
}

Tailwind CSS v4

@theme {
  --color-dark-red: #840000;
  --color-dark-red-50: #ffe5da;
  --color-dark-red-100: #ffd5c8;
  --color-dark-red-200: #ffbbab;
  --color-dark-red-300: #fe9885;
  --color-dark-red-400: #ed7666;
  --color-dark-red-500: #db5344;
  --color-dark-red-600: #b9473a;
  --color-dark-red-700: #95392e;
  --color-dark-red-800: #6f2822;
  --color-dark-red-900: #4e1b17;
  --color-dark-red-950: #340a08;
}

SCSS

$dark-red: #840000;
$dark-red-rgb: 132, 0, 0;
$dark-red-light: mix(#fff, $dark-red, 20%);
$dark-red-dark: mix(#000, $dark-red, 20%);

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