What colors go with orange?

Orange pairs naturally with neutrals, warm browns and earth tones. Its complementary is blue — deep navy with orange is a classic professional pairing. Analogous partners are red and yellow. Teal and forest green also work well for a more unexpected, modern combination.

Orange Colors — HEX, RGB, HSL, Shades & Complementary

Q: What is the purest orange hex code?

CSS orange is #FFA500 — RGB (255, 165, 0), which sits at hue 39°. A more saturated mid-orange used in modern design systems is #F97316 (Tailwind) or #EA580C (deeper). The web-safe vivid orange closest to ‘pure’ is around #FF7F00.

Q: What is the complementary color of orange?

Blue. Orange sits at about 30° on the color wheel and blue at about 210°, making them direct opposites. Split-complementary partners are blue-violet and blue-green. Full-saturation orange-and-blue is high-impact; softening either end produces more sophisticated results.

Q: Is orange accessible for text?

Orange text on white is rarely accessible. #F97316 reaches only about 3.1:1 — fails AA for body copy. Darker oranges like #C2410C (about 5.6:1) and #9A3412 (about 7.3:1) pass AA and AAA. Most designs use orange as an accent or background color, not for text.

Orange 200 · Soft

#FED7AA rgb 254, 215, 170

HSL 30°, 98%, 83%

Orange 500 · Base

#F97316 rgb 249, 115, 22

HSL 25°, 95%, 53%

Orange 800 · Deep

#9A3412 rgb 154, 52, 18

HSL 15°, 79%, 34%

Orange color reference

A systematic orange scale with hex, RGB and HSL values.

Name	HEX	RGB	HSL
Orange 100	`#FFEDD5`	255, 237, 213	34°, 100%, 92%
Orange 200	`#FED7AA`	254, 215, 170	30°, 98%, 83%
Orange 300	`#FDBA74`	253, 186, 116	27°, 97%, 72%
Orange 400	`#FB923C`	251, 146, 60	26°, 96%, 61%
Orange 500	`#F97316`	249, 115, 22	25°, 95%, 53%
Orange 600	`#EA580C`	234, 88, 12	21°, 90%, 48%
Orange 700	`#C2410C`	194, 65, 12	17°, 88%, 40%
Orange 800	`#9A3412`	154, 52, 18	15°, 79%, 34%
Orange 900	`#7C2D12`	124, 45, 18	15°, 75%, 28%
Orange 950	`#431407`	67, 20, 7	13°, 81%, 15%

Named oranges

Common named oranges from CSS and design practice.

Orange (CSS) #FFA500

Coral #FF7F50

Tomato #FF6347

Orange red #FF4500

Dark orange #FF8C00

Light salmon #FFA07A

Sandy brown #F4A460

Peru #CD853F

Chocolate #D2691E

Navajo white #FFDEAD

Complementary and harmonious colors

Orange sits at about 30° on the color wheel. Here are the relationships that pair well with orange.

Relationship	Angle	Example hue
Complementary	180°	Blue
Split-complementary	150° / 210°	Blue-violet / Blue-green
Triadic	120° / 240°	Green / Purple
Analogous	−30° / +30°	Red / Yellow

#431407

#7C2D12

#EA580C

#F97316

#FDBA74

#FFEDD5

Orange in design and accessibility

Orange communicates warmth, energy, creativity and appetite. It sits between red’s urgency and yellow’s cheer, which makes it one of the most versatile accent colors. Brands use orange to signal friendliness and approachability, especially in food, sports, entertainment and children’s products.

Common uses in interfaces

Warnings and pending states — the standard color for caution notices.
Call-to-action accents — a warm color that pops against neutral pages.
Food and hospitality branding — warmth increases perceived appetite.
Data visualization — a second category color, often paired with blue.

Accessibility notes

Orange has relatively low luminance, which makes it difficult for text on white. #F97316 reaches only about 3.1:1 and fails AA. Darker oranges such as #C2410C (about 5.6:1) and #9A3412 (about 7.3:1) pass AA and AAA. Orange is best used for accents, warnings and backgrounds — pair with dark text if it must carry content.

Frequently asked questions

What is the purest orange hex code?

CSS orange is #FFA500. A modern vivid orange is #F97316 or #EA580C. Because orange is a secondary color — a mix of red and yellow — it has no single "pure" definition; the range from #FF6600 to #FFA500 is all considered pure orange in practice.

What colors go well with orange?

Blue is the classic complement and produces a professional, high-contrast combination — think accents on navy or slate blue surfaces. Analogous partners red and yellow create a warm, cozy feel. Teal and forest green offer a modern, unexpected pairing that works especially well for editorial and lifestyle brands.

What is the complementary color of orange?

Blue. Orange sits at 30° and blue at 210° on the HSL color wheel, making them direct opposites. Split-complementary partners are blue-violet and blue-green. Full-saturation orange on blue is high impact; softening either end — muted terracotta on slate blue — reads as refined.

Is orange accessible for text?

Orange text on white rarely passes AA for body copy. #F97316 reaches about 3.1:1 (fails AA), #C2410C reaches about 5.6:1 (passes AA), and #9A3412 reaches about 7.3:1 (passes AAA). Use darker oranges for text, and reserve bright oranges for accents, badges and backgrounds.

How do I generate a full orange scale?

Use our shades generator. Enter any orange as the base and it produces an 11-step 50–950 scale ready for CSS variables or Tailwind configs.