18 Different Shades of Orange (+ HEX codes)
Explore all shades of orange, from lighter to darker shades. See HEX codes, shade names, and orange color palettes. Click any shade to copy its HEX code.
Orange is the most physical colour: appetite, warning, sport, cheap fun and premium leather, depending entirely on how dark and how saturated it is.
A bright orange needs near-black text; take it three steps darker and it becomes a workable brand colour with white on top.
- early dawn#fff8eb
- papaya whip#ffefd2
- peach#ffe7ba
- cream brulee#ffdea1
- grandis#ffd689
- goldenrod#ffcd70
- golden tainoi#ffc558
- yellow orange#ffbc40
- my sin#ffb327
- sun#ffab0f
- orange peel#f59f00
- tangerine#dd9000
- pirate gold#c48000
- chelsea gem#946000
- cinnamon#7b5000
- nutmeg wood finish#634000
- cola#4a3000
- nero#1a1100
Orange: HEX & RGB Codes
orange has the following primary color codes:
HEX: #fff8eb
RGB: (255, 248, 235).
Explore a wide range of orange shades using our interactive color picker. Click any color to copy its HEX code and use it in your project!
Explore tints of orange
Early Dawn
#fff8eb
Early Dawn
#fff8eb
Bridal Heath
#fff9f0
Bridal Heath
#fffaf0
Quarter Pearl Lusta
#fffcf5
Bridal Heath
#fffbf5
Bridal Heath
#fffbf5
Romance
#fffdfa
Black White
#fffefa
White
#ffffff
Explore shades of orange
Clinker
#342509
Punga
#4c3915
Dallas
#654d25
Yellow Metal
#81683b
Barley Corn
#9b8255
Mongoose
#b49c74
Sorrell Brown
#ccb894
Stark White
#e5d7bd
orange in HEX, RGB, HSL and CMYK
| HEX | #FFA500 | |
|---|---|---|
| RGB | rgb(255, 165, 0) | |
| HSL | hsl(39, 100%, 50%) | |
| CMYK | cmyk(0%, 35%, 100%, 0%) |
Tints and shades of orange
Tints add white and shades add black, keeping the hue. Use them for hover states, borders and backgrounds that still belong to the same colour.
Tints (lighter)
#ffb327
#ffc14e
#ffcf75
#ffdc9c
#ffeac4
#fff8eb
Shades (darker)
#d88c00
#b17300
#8a5a00
#634000
#3b2700
#140d00
Colours that work with orange
Complementary
#FFA500 #0059ff
Opposite on the colour wheel. Maximum contrast — use it for accents, not for half the page.
Analogous
#ff2600 #FFA500 #d9ff00
Neighbours on the wheel. Calm and cohesive, the safest way to build a palette.
Triadic
#FFA500 #00ffa6 #a600ff
Three colours evenly spaced. Lively and balanced; let one dominate.
Text on orange
Measured against WCAG: 4.5:1 for body text, 3:1 for large text. Test your own pair in the Contrast Checker
orange shade chart
Right-click to save the chart, or copy the individual codes above.