Stanger Red

CSS

:root {
  --stanger-red: #a40000;
  --stanger-red-rgb: 164 0 0;
  --stanger-red-oklch: oklch(0.451 0.185 29.2);
}

.element {
  color: var(--stanger-red);
  background-color: hsl(0 100% 32%);
  border-color: oklch(0.451 0.185 29.2);
}

Tailwind CSS v4

@theme {
  --color-stanger-red: #a40000;
  --color-stanger-red-50: #ffe2d5;
  --color-stanger-red-100: #ffd2c2;
  --color-stanger-red-200: #ffb6a3;
  --color-stanger-red-300: #ff907b;
  --color-stanger-red-400: #f86c5b;
  --color-stanger-red-500: #e74234;
  --color-stanger-red-600: #c33a2d;
  --color-stanger-red-700: #9d2e24;
  --color-stanger-red-800: #751f1b;
  --color-stanger-red-900: #531512;
  --color-stanger-red-950: #370505;
}

SCSS

$stanger-red: #a40000;
$stanger-red-rgb: 164, 0, 0;
$stanger-red-light: mix(#fff, $stanger-red, 20%);
$stanger-red-dark: mix(#000, $stanger-red, 20%);

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