Megido Red

CSS

:root {
  --megido-red: #a10000;
  --megido-red-rgb: 161 0 0;
  --megido-red-oklch: oklch(0.445 0.183 29.2);
}

.element {
  color: var(--megido-red);
  background-color: hsl(0 100% 32%);
  border-color: oklch(0.445 0.183 29.2);
}

Tailwind CSS v4

@theme {
  --color-megido-red: #a10000;
  --color-megido-red-50: #ffe3d5;
  --color-megido-red-100: #ffd2c3;
  --color-megido-red-200: #ffb7a4;
  --color-megido-red-300: #ff917c;
  --color-megido-red-400: #f76d5c;
  --color-megido-red-500: #e64435;
  --color-megido-red-600: #c23b2f;
  --color-megido-red-700: #9c2f25;
  --color-megido-red-800: #75201c;
  --color-megido-red-900: #531612;
  --color-megido-red-950: #370505;
}

SCSS

$megido-red: #a10000;
$megido-red-rgb: 161, 0, 0;
$megido-red-light: mix(#fff, $megido-red, 20%);
$megido-red-dark: mix(#000, $megido-red, 20%);

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