Ketchup Later

CSS

:root {
  --ketchup-later: #a91c1c;
  --ketchup-later-rgb: 169 28 28;
  --ketchup-later-oklch: oklch(0.475 0.176 27.2);
}

.element {
  color: var(--ketchup-later);
  background-color: hsl(0 72% 39%);
  border-color: oklch(0.475 0.176 27.2);
}

Tailwind CSS v4

@theme {
  --color-ketchup-later: #a91c1c;
  --color-ketchup-later-50: #ffe3d8;
  --color-ketchup-later-100: #ffd2c6;
  --color-ketchup-later-200: #ffb7a9;
  --color-ketchup-later-300: #ff9282;
  --color-ketchup-later-400: #f56f63;
  --color-ketchup-later-500: #e34840;
  --color-ketchup-later-600: #c03e37;
  --color-ketchup-later-700: #9a322c;
  --color-ketchup-later-800: #732221;
  --color-ketchup-later-900: #511716;
  --color-ketchup-later-950: #360707;
}

SCSS

$ketchup-later: #a91c1c;
$ketchup-later-rgb: 169, 28, 28;
$ketchup-later-light: mix(#fff, $ketchup-later, 20%);
$ketchup-later-dark: mix(#000, $ketchup-later, 20%);

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