Red is the most attention-grabbing color on a page. Interfaces use it for errors, destructive actions and sale prices, and brands use it for energy and urgency, as in food, sports and streaming.
Using red in web design
- Keep pure red (
#FF0000) for small accents: large areas of it are tiring to look at. - For error text on white, use a darker red such as
#B91C1C(Tailwind red-700), which passes WCAG AA. Bright reds like#EF4444are only 3.8:1 on white. - Pair red with plenty of neutral space, or with a cool complement such as teal for balance.
- Don't rely on red alone to show an error. Add an icon or a message for people with red-green color blindness.
About this page
The colors above are grouped automatically by hue, saturation and lightness. Click any swatch to copy its HEX code, or open Details to convert it to RGB, HSL, HSV and CMYK in the color picker. To build a full scale from one of these colors, use the tints & shades generator, and check text colors with the contrast checker.