Mod Orange

CSS

:root {
  --mod-orange: #d8583c;
  --mod-orange-rgb: 216 88 60;
  --mod-orange-oklch: oklch(0.621 0.167 33.9);
}

.element {
  color: var(--mod-orange);
  background-color: hsl(11 67% 54%);
  border-color: oklch(0.621 0.167 33.9);
}

Tailwind CSS v4

@theme {
  --color-mod-orange: #d8583c;
  --color-mod-orange-50: #ffe5d5;
  --color-mod-orange-100: #ffd5c2;
  --color-mod-orange-200: #ffbba3;
  --color-mod-orange-300: #ff977a;
  --color-mod-orange-400: #f07459;
  --color-mod-orange-500: #de5031;
  --color-mod-orange-600: #bc452b;
  --color-mod-orange-700: #973722;
  --color-mod-orange-800: #71261a;
  --color-mod-orange-900: #501a10;
  --color-mod-orange-950: #350904;
}

SCSS

$mod-orange: #d8583c;
$mod-orange-rgb: 216, 88, 60;
$mod-orange-light: mix(#fff, $mod-orange, 20%);
$mod-orange-dark: mix(#000, $mod-orange, 20%);

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