Red Door

CSS

:root {
  --red-door: #ac0000;
  --red-door-rgb: 172 0 0;
  --red-door-oklch: oklch(0.467 0.192 29.2);
}

.element {
  color: var(--red-door);
  background-color: hsl(0 100% 34%);
  border-color: oklch(0.467 0.192 29.2);
}

Tailwind CSS v4

@theme {
  --color-red-door: #ac0000;
  --color-red-door-50: #ffe2d4;
  --color-red-door-100: #ffd1c1;
  --color-red-door-200: #ffb5a1;
  --color-red-door-300: #ff8f79;
  --color-red-door-400: #fb6958;
  --color-red-door-500: #ea3d2f;
  --color-red-door-600: #c6362a;
  --color-red-door-700: #9f2b21;
  --color-red-door-800: #771d19;
  --color-red-door-900: #541310;
  --color-red-door-950: #380404;
}

SCSS

$red-door: #ac0000;
$red-door-rgb: 172, 0, 0;
$red-door-light: mix(#fff, $red-door, 20%);
$red-door-dark: mix(#000, $red-door, 20%);

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