Color guide
Orange Color
#F97316
orange color codes
What orange means
Orange blends the energy of red with the friendliness of yellow. It feels enthusiastic, affordable and creative without the aggression of pure red.
How to use it in design
Works well for CTAs, food and fitness brands, and friendly onboarding flows.
Color combinations with orange
Harmonies calculated with color theory for the base hue 25°.
Complementary
Maximum contrast: #F97316 + #159AF9
Analogous
Harmony at ±30°: #F91528 · #F97316 · #F9E615
Triadic
Even 120° spacing: #F97316 · #15F974 · #7415F9
orange color shades (50–900 scale)
Ready-to-use tailwind-style scale generated from #F97316.
Colors that go well with orange
FAQ about the orange color
What is the HEX code of orange?
A widely used hex value for orange is #F97316, which equals rgb(249, 115, 22). Depending on the shade you want, you can adjust saturation and lightness while keeping the same hue (25°).
What colors go well with orange?
orange pairs beautifully with white, navy, teal, charcoal. Its complementary color is #159AF9, and a classic triadic scheme adds #15F974 and #7415F9.
Is orange accessible for text and backgrounds?
It depends on the contrast ratio against the other color. Use NanoPalettes's contrast checker to verify WCAG AA (4.5:1) and AAA (7:1) compliance before shipping orange in text or UI elements.
Create your own orange palette
Generate harmonious combinations from #F97316 in seconds.
Open the palette generator