Shades of Red
A complete guide to red shades with hex codes, RGB, and HSL values. From deep maroon to pale blush red — every shade with copy-ready colour values.
Red is one of the most powerful, high-impact colours in UI design. It commands immediate attention, signals urgency, and evokes strong emotional responses — which is why it dominates error handling, e-commerce sale alerts, and food delivery apps. The range from deep burgundy to pale blush gives designers a spectrum to manage energy levels, moving from critical warnings to warm, inviting interfaces.
Using Red Shades in UI Design
Dark reds like Maroon and Burgundy work beautifully as primary brand colours for luxury, gaming, or entertainment products. They establish an elegant, grounded mood, pair naturally with white text, and easily pass WCAG AA contrast rules for structural surfaces like navigation panels.
Mid-range reds like Crimson, Ruby Red, and Scarlet are the default choices for high-priority interactive states. They are ideal for destructive actions (like “Delete Account” buttons), critical error alerts, real-time notifications, and conversion-driving elements that must stand out instantly on any background.
Light reds and pink-tinted shades like Salmon Red, Blush Red, and Rose Tint serve perfectly as background fills for alert banners, flash message containers, and hover states. They provide immediate contextual warmth without overwhelming the user or fatiguing the eyes with heavy saturation.
Accessibility Notes
While mid-range reds are highly visible to most, they can be a major accessibility bottleneck. Pure, highly saturated red (#ff0000 or close to Scarlet) requires a dark canvas or very thick typography to maintain proper legibility against white backgrounds.
Never rely on red alone to convey an error, failure, or destructive state. Protandopia and deuteranopia (forms of red-green colour blindness) affect roughly 8% of men and 0.5% of women. To someone with red-green deficiencies, a bright red alert can look like a dull, muddy brown or gray. Always pair red indicators with concrete visual anchors: an error icon (like an exclamation mark), clear supporting text, or a thicker border treatment to ensure your interface remains functional for everyone.