Midwinter Fire

CSS

:root {
  --midwinter-fire: #dd1100;
  --midwinter-fire-rgb: 221 17 0;
  --midwinter-fire-oklch: oklch(0.568 0.228 30);
}

.element {
  color: var(--midwinter-fire);
  background-color: hsl(5 100% 43%);
  border-color: oklch(0.568 0.228 30);
}

Tailwind CSS v4

@theme {
  --color-midwinter-fire: #dd1100;
  --color-midwinter-fire-50: #ffdecd;
  --color-midwinter-fire-100: #ffccb8;
  --color-midwinter-fire-200: #ffae96;
  --color-midwinter-fire-300: #ff8469;
  --color-midwinter-fire-400: #ff5844;
  --color-midwinter-fire-500: #f91000;
  --color-midwinter-fire-600: #d21807;
  --color-midwinter-fire-700: #a91408;
  --color-midwinter-fire-800: #7f0a0b;
  --color-midwinter-fire-900: #5a0807;
  --color-midwinter-fire-950: #3c0000;
}

SCSS

$midwinter-fire: #dd1100;
$midwinter-fire-rgb: 221, 17, 0;
$midwinter-fire-light: mix(#fff, $midwinter-fire, 20%);
$midwinter-fire-dark: mix(#000, $midwinter-fire, 20%);

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