Red Shades
Every named color in the red family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 110 colors shown below.
Quick facts (computed from this family's 110 members)
- Average lightness: 53%
- Average saturation: 79%
- 39 of 110 pass WCAG AA as normal text on white
- 72 of 110 pass WCAG AA as normal text on black
- Lightest named member: MistyRose
- Darkest named member: dark maroon
- Most saturated member: DarkRed
The color science
Red sits at roughly 345-15° on the HSL hue wheel and is one of the three hues (with green and blue) that anchor human trichromatic vision — the long-wavelength (L) cone in the retina peaks in this region, which is part of why red reads as advancing and high-energy even at moderate saturation. Pigment reds have a long documented history: ochre reds from iron oxide are among the oldest pigments used by humans, appearing in cave paintings tens of thousands of years old, and the synthetic dye alizarin crimson (derived originally from the madder plant, later synthesized in 1868) eventually replaced the insect-derived carmine and kermes reds that dominated textile dyeing for centuries because they were dramatically cheaper to produce at scale. Red also has the longest wavelength of visible light before the eye stops perceiving color at all, which is part of why it's used for warning lights meant to remain visible at the edges of peripheral vision. Red is also one of the first colors infants reliably distinguish from gray in vision-development studies, well before most other hues, which researchers generally attribute to the strong long-wavelength cone response combined with red's high real-world salience against green foliage and skin tones in an infant's typical visual environment.
Common uses in design
In interface design red is the default 'stop/error/danger' signal in most Western design systems, which makes it a poor choice for anything that isn't actually an error state — overusing it trains users to ignore it, the same way an alarm that goes off too often gets ignored. In branding it correlates with appetite and urgency (much of the fast-food industry leans on red-and-yellow pairings deliberately, since both studies and long industry practice associate the combination with speed and hunger), and in print it remains the highest-visibility ink on white stock, which is why warning labels, clearance signage, and emergency signage default to it almost everywhere in the world, not just in Western design conventions. Red also carries a starkly different meaning in Chinese and several other East Asian cultural contexts, where it signals luck, prosperity, and celebration rather than danger — red envelopes given at Lunar New Year and weddings are a genuine, widely practiced tradition that has no equivalent in the Western warning-color reading of the same hue.
Accessibility notes
Red-green color confusion (deuteranomaly/protanomaly) affects roughly 1 in 12 men and 1 in 200 women of Northern European descent, so red should never be the sole encoder of meaning next to green (the classic red/green 'error vs success' pairing is the single most common colorblind-accessibility failure in UI design) — pair it with an icon, label, or shape, not color alone. Pure red (#FF0000) on a white background clears WCAG AA for large text but fails AA for normal-size body text, so darker reds (maroon-leaning, lower lightness) are the safer choice for red body copy; a common fix is to keep the bright, saturated red for icons and small badges while using a darker red for any red text. Financial and market-data interfaces add a further wrinkle worth naming: red-green colorblind users are disproportionately affected by exactly the red-for-loss/green-for-gain convention nearly every market UI defaults to, which is why several finance products now offer an alternative blue/orange colorblind-safe mode alongside the traditional red/green one.
Named examples
Crimson, firebrick, and tomato are the most commonly named reds in the CSS/X11 set, each a genuinely different real-world reference: crimson traces to the kermes insect dye historically used across the Mediterranean and Middle East, firebrick to the color of fired clay brick, and tomato to the fruit's ripe skin color rather than an unripe green tomato. IndianRed, despite the name, is a pigment term inherited from a historical (and now considered outdated) reference to a particular iron-oxide pigment source, not a reference to Indigenous American or South Asian culture. Maroon and DarkRed round out the deeper end of the CSS-named red set, both dark enough to clear WCAG AA text contrast on white comfortably, unlike the brighter reds like Crimson and OrangeRed that sit nearer the family's more saturated, harder-to-use-as-text end.
Building a red design-token scale
Design-token scales built on red typically run 9-11 lightness steps rather than exposing a single value — Tailwind CSS's default red ramp spans red-50 (a near-white pink tint) through red-950 (near-black maroon), with red-500/red-600 usually reserved for the 'this is an error' semantic slot precisely because it's the step that clears WCAG AA against white. Apple's iOS system palette exposes a single dynamic 'systemRed' that shifts hue slightly between light and dark appearance modes rather than a full numeric scale, while Material Design 3 generates a full tonal palette (0-100) algorithmically from one seed red rather than hand-picking each step. When building your own red scale, anchor the mid-tone step to a value that passes 4.5:1 against both your light and dark surface colors, then derive the lighter and darker steps from it — don't pick the lightest and darkest steps first and interpolate the middle, since that's how mid-tone accessibility failures slip through unnoticed until a contrast audit catches them. Because red so strongly signals 'error' by convention, any non-error use of a saturated red in a product (a brand red, a decorative accent) benefits from a real usability check to confirm it isn't being misread as a warning by users acting on habit rather than reading carefully.