🎨 Shades of Orange

26 orange tones, each one click from your clipboard — 16 classic named colors plus a generated tint scale for building UI palettes. Orange is enthusiasm made visible — the color of energy without red's alarm. It's the highest-visibility hue to human eyes in most conditions (hence life vests and traffic cones) and the classic 'act now' accent in design.

• Burnt Orange#cc5500
• Rust#b7410e
• Terracotta#e2725b
• Pumpkin#ff7518
• Dark Orange#ff8c00
• Orange#ffa500
• Tangerine#f28500
• Carrot#ed9121
• Amber#ffbf00
• Marigold#eaa221
• Apricot#fbceb1
• Peach#ffe5b4
• Melon#fdbcb4
• Coral#ff7f50
• Papaya Whip#ffefd5
• Sandy Brown#f4a460
• Orange 100#492909
• Orange 200#6d3d0d
• Orange 300#915212
• Orange 400#b66616
• Orange 500#da7a1b
• Orange 600#e68f37
• Orange 700#eba35c
• Orange 800#efb880
• Orange 900#f4cca4
• Orange 1000#f8e0c9

Click any swatch to copy its hex code.

Using orange well

Burnt orange and terracotta anchor warm, earthy palettes with cream and brown; bright tangerine pops hardest against its complementary blue. Peach and apricot serve as warm alternatives to pink in soft palettes.

Need variations of a specific shade? Copy its hex into the palette generator for harmonies, or the contrast checker to verify text passes WCAG on top of it.

Frequently asked questions

What are the most popular shades of orange?

The classics are Burnt Orange, Rust, Terracotta, Pumpkin, Dark Orange, Orange — the named swatches at the top of this page. Click any of them to copy the hex code.

What do the numbered shades (100–1000) mean?

They're a generated lightness scale of one representative hue, in the naming style design systems like Tailwind and Material use — low numbers dark, high numbers light. Use them as a ready-made UI ramp.

How do I get RGB or HSL instead of hex?

Copy the hex here, then paste it into our HEX to RGB converter — it returns RGB and HSL together, and the color picker gives sliders for fine-tuning.