Tangerine
See how #ED8F03 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Tangerine Base */
--color-primary: #ED8F03;
--color-primary-rgb: 237 143 3;
--color-primary-hsl: 36 98% 47%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #fff5e6;
--color-primary-100: #fee0b3;
--color-primary-200: #fecc81;
--color-primary-300: #fdb74e;
--color-primary-400: #fda31c;
--color-primary-500: #e38902;
--color-primary-600: #b16b02;
--color-primary-700: #7e4c01;
--color-primary-800: #4c2e01;
--color-primary-900: #190f00;
}