Dizzy Days

CSS

:root {
  --dizzy-days: #d14e2f;
  --dizzy-days-rgb: 209 78 47;
  --dizzy-days-oklch: oklch(0.596 0.172 34.6);
}

.element {
  color: var(--dizzy-days);
  background-color: hsl(11 64% 50%);
  border-color: oklch(0.596 0.172 34.6);
}

Tailwind CSS v4

@theme {
  --color-dizzy-days: #d14e2f;
  --color-dizzy-days-50: #ffe5d3;
  --color-dizzy-days-100: #ffd4c0;
  --color-dizzy-days-200: #ffbaa0;
  --color-dizzy-days-300: #ff9677;
  --color-dizzy-days-400: #f27355;
  --color-dizzy-days-500: #e04e2a;
  --color-dizzy-days-600: #be4326;
  --color-dizzy-days-700: #98351e;
  --color-dizzy-days-800: #722517;
  --color-dizzy-days-900: #50190f;
  --color-dizzy-days-950: #350803;
}

SCSS

$dizzy-days: #d14e2f;
$dizzy-days-rgb: 209, 78, 47;
$dizzy-days-light: mix(#fff, $dizzy-days, 20%);
$dizzy-days-dark: mix(#000, $dizzy-days, 20%);

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