Rackham Red

CSS

:root {
  --rackham-red: #d6341e;
  --rackham-red-rgb: 214 52 30;
  --rackham-red-oklch: oklch(0.576 0.201 31.1);
}

.element {
  color: var(--rackham-red);
  background-color: hsl(7 75% 48%);
  border-color: oklch(0.576 0.201 31.1);
}

Tailwind CSS v4

@theme {
  --color-rackham-red: #d6341e;
  --color-rackham-red-50: #ffe1d0;
  --color-rackham-red-100: #ffd0bd;
  --color-rackham-red-200: #ffb39c;
  --color-rackham-red-300: #ff8d71;
  --color-rackham-red-400: #ff664e;
  --color-rackham-red-500: #ee371e;
  --color-rackham-red-600: #c9311c;
  --color-rackham-red-700: #a22717;
  --color-rackham-red-800: #791a13;
  --color-rackham-red-900: #56110c;
  --color-rackham-red-950: #390201;
}

SCSS

$rackham-red: #d6341e;
$rackham-red-rgb: 214, 52, 30;
$rackham-red-light: mix(#fff, $rackham-red, 20%);
$rackham-red-dark: mix(#000, $rackham-red, 20%);

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