Orange feels warm, friendly and energetic. It works well for calls to action, highlights and brands in food, travel and creative industries, and is less alarming than red.
Using orange in web design
- White text on bright orange usually fails contrast. Use dark text on orange buttons, or a deeper shade such as
#C2410C(Tailwind orange-700) behind white text. - Orange and blue are complementary: a navy layout with orange accents is a classic, readable combination.
- Light oranges and peach tones make soft section backgrounds.
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.