Tartan Red

CSS

:root {
  --tartan-red: #b1282a;
  --tartan-red-rgb: 177 40 42;
  --tartan-red-oklch: oklch(0.501 0.173 25.5);
}

.element {
  color: var(--tartan-red);
  background-color: hsl(359 63% 43%);
  border-color: oklch(0.501 0.173 25.5);
}

Tailwind CSS v4

@theme {
  --color-tartan-red: #b1282a;
  --color-tartan-red-50: #ffe3da;
  --color-tartan-red-100: #ffd2c8;
  --color-tartan-red-200: #ffb7ab;
  --color-tartan-red-300: #ff9386;
  --color-tartan-red-400: #f46f67;
  --color-tartan-red-500: #e24846;
  --color-tartan-red-600: #bf3f3c;
  --color-tartan-red-700: #9a322f;
  --color-tartan-red-800: #732324;
  --color-tartan-red-900: #511718;
  --color-tartan-red-950: #360709;
}

SCSS

$tartan-red: #b1282a;
$tartan-red-rgb: 177, 40, 42;
$tartan-red-light: mix(#fff, $tartan-red, 20%);
$tartan-red-dark: mix(#000, $tartan-red, 20%);

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