Manchester Nights

CSS

:root {
  --manchester-nights: #992222;
  --manchester-nights-rgb: 153 34 34;
  --manchester-nights-oklch: oklch(0.45 0.155 26.1);
}

.element {
  color: var(--manchester-nights);
  background-color: hsl(0 64% 37%);
  border-color: oklch(0.45 0.155 26.1);
}

Tailwind CSS v4

@theme {
  --color-manchester-nights: #992222;
  --color-manchester-nights-50: #ffe5dd;
  --color-manchester-nights-100: #ffd5cb;
  --color-manchester-nights-200: #ffbbaf;
  --color-manchester-nights-300: #fd978a;
  --color-manchester-nights-400: #ec766d;
  --color-manchester-nights-500: #da534c;
  --color-manchester-nights-600: #b84741;
  --color-manchester-nights-700: #943934;
  --color-manchester-nights-800: #6e2827;
  --color-manchester-nights-900: #4e1b1a;
  --color-manchester-nights-950: #330a0a;
}

SCSS

$manchester-nights: #992222;
$manchester-nights-rgb: 153, 34, 34;
$manchester-nights-light: mix(#fff, $manchester-nights, 20%);
$manchester-nights-dark: mix(#000, $manchester-nights, 20%);

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