Orange Dusk

CSS

:root {
  --orange-dusk: #fe4c40;
  --orange-dusk-rgb: 254 76 64;
  --orange-dusk-oklch: oklch(0.669 0.216 28.3);
}

.element {
  color: var(--orange-dusk);
  background-color: hsl(4 99% 62%);
  border-color: oklch(0.669 0.216 28.3);
}

Tailwind CSS v4

@theme {
  --color-orange-dusk: #fe4c40;
  --color-orange-dusk-50: #ffdfd0;
  --color-orange-dusk-100: #ffcdbd;
  --color-orange-dusk-200: #ffb09c;
  --color-orange-dusk-300: #ff8772;
  --color-orange-dusk-400: #ff5d4f;
  --color-orange-dusk-500: #f42421;
  --color-orange-dusk-600: #ce231f;
  --color-orange-dusk-700: #a61d18;
  --color-orange-dusk-800: #7c1114;
  --color-orange-dusk-900: #580c0d;
  --color-orange-dusk-950: #3b0002;
}

SCSS

$orange-dusk: #fe4c40;
$orange-dusk-rgb: 254, 76, 64;
$orange-dusk-light: mix(#fff, $orange-dusk, 20%);
$orange-dusk-dark: mix(#000, $orange-dusk, 20%);

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