Mandarin Orange

CSS

:root {
  --mandarin-orange: #ec6a37;
  --mandarin-orange-rgb: 236 106 55;
  --mandarin-orange-oklch: oklch(0.675 0.173 40.6);
}

.element {
  color: var(--mandarin-orange);
  background-color: hsl(17 83% 57%);
  border-color: oklch(0.675 0.173 40.6);
}

Tailwind CSS v4

@theme {
  --color-mandarin-orange: #ec6a37;
  --color-mandarin-orange-50: #ffe6ce;
  --color-mandarin-orange-100: #ffd6ba;
  --color-mandarin-orange-200: #ffbc99;
  --color-mandarin-orange-300: #ff986d;
  --color-mandarin-orange-400: #f17546;
  --color-mandarin-orange-500: #df5004;
  --color-mandarin-orange-600: #bd450c;
  --color-mandarin-orange-700: #98370b;
  --color-mandarin-orange-800: #72260a;
  --color-mandarin-orange-900: #501a07;
  --color-mandarin-orange-950: #350900;
}

SCSS

$mandarin-orange: #ec6a37;
$mandarin-orange-rgb: 236, 106, 55;
$mandarin-orange-light: mix(#fff, $mandarin-orange, 20%);
$mandarin-orange-dark: mix(#000, $mandarin-orange, 20%);

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