Ecstasy
See how #F56217 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Ecstasy Base */
--color-primary: #F56217;
--color-primary-rgb: 245 98 23;
--color-primary-hsl: 20 92% 53%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #feeee7;
--color-primary-100: #fccdb6;
--color-primary-200: #faac85;
--color-primary-300: #f88a54;
--color-primary-400: #f66923;
--color-primary-500: #dc5009;
--color-primary-600: #ab3e07;
--color-primary-700: #7a2c05;
--color-primary-800: #491b03;
--color-primary-900: #180901;
}