#EDE0CCUnderstand. Compare. Create.
Orange: 21 shades, names and colour codes
Explore orange shades, HTML and RGB codes, colour meanings and ideas for combining orange in your projects.
Colour code and CSS reference
The CSS keyword orange corresponds to #FFA500. It represents one specific orange shade, not the entire colour family.
- HEX
- #FFA500
- RGB
- 255, 165, 0
- CMYK ≈
- 0%, 35%, 100%, 0%
- HSL
- 39°, 100%, 50%
The displayed CMYK values are estimates without a print profile.
Meaning and perception
Orange sits between red and yellow in familiar colour wheels. Terracotta is more muted than bright orange, although both belong to the same family.
Which colours go with it?
Orange can appear as a vivid accent, terracotta or light peach. Choose that direction first, because it determines how much space the colour takes beside its companions. Saturated orange benefits from a clear role; an earthy version may be easier to extend across a larger surface.
Orange and blue: adjust the intensity
Navy and bright orange create a distinct opposition; greyed blue and terracotta offer a more restrained direction. In either case, avoid starting with equal areas. Make one blue-led version and one orange-led version, then choose the one that genuinely supports the subject or furniture.
Orange and brown: work with materials
Terracotta can accompany brown leather, wood and a sandy background. Distribute lightness to prevent the result from becoming one undifferentiated mass: dark brown, medium terracotta and light sand. Materials can vary, but compare their colours together; three appealing individual samples do not automatically make a palette.
Orange and green: choose a companion that does not compete
Try burnt orange with olive or forest green. Green can frame an orange area rather than occupy an equal one. For an illustration, add a cream background and assess the drawing without its small details first. If the main arrangement works, accents can enrich the composition instead of having to rescue it.
Peach, apricot or terracotta: choosing a large surface
Light peach is not simply a lighter replacement for terracotta; it can also shift towards pink or yellow. For a wall, compare generous samples with the planned textiles. For a digital background, place the photographs and text on it immediately so that you assess the colour in its actual role.
Try this palette: terracotta, greyed blue and sand
Test 60% sand, 30% greyed blue and 10% terracotta. For a more orange-led version, exchange the blue and terracotta areas. Compare both using the same images or objects.
#526F80#BE684BSuggested palette with copyable HEX codes for your own trials. These sRGB previews are not certified paint or textile specifications.
A common trap: using bright orange everywhere for attention
If the button, background, headings and illustrations all use the same bright orange, no element keeps a distinctive job. Reserve the most saturated version for one function and use neutrals or softer variations elsewhere. Check the readability of each piece of text placed on orange separately.
Shades of orange
The names and previews below come from the site’s shade directory. Several codes may share a common name; these shades are not certified RAL or Pantone equivalents.
#ED7F10#E67E30#FFCB60#F1E2BE#FFE4C4#F4661B#DF6D14#E73E01#B36700#EF9B0F#FEA347#DE9816#FAA401#CC5500#AD4F09#F3D617#F88E55#FF7F00#A75502#E1CE9A#E9C9B1Get the free colour kit: HEX/RGB codes and a project worksheet.