Shades of Orange | Colormapped

Shades of Orange color ramp

These swatches are generated from one base hue using fixed HSL lightness steps. They are computed references, not official color names.

#FFF6E5 HSL lightness 95%

#FFE4B3 HSL lightness 85%

#FFD280 HSL lightness 75%

#FFC04D HSL lightness 65%

#FFAE1A HSL lightness 55%

#E69400 HSL lightness 45%

#B37300 HSL lightness 35%

#805200 HSL lightness 25%

#4D3100 HSL lightness 15%

Base reference: #FFA500. Use the Tints and Shades Generator when you need a ramp based on a specific project color.

Common CSS named orange colors

The orange family includes pale peach-like colors, coral/orange-red values, standard orange, and deeper dark-orange directions.

ColorCSS keywordHEX

Papaya Whip papayawhip #FFEFD5

Moccasin moccasin #FFE4B5

Peach Puff peachpuff #FFDAB9

Light Salmon lightsalmon #FFA07A

Coral coral #FF7F50

Tomato tomato #FF6347

Orange orange #FFA500

Dark Orange darkorange #FF8C00

Orange Red orangered #FF4500

Named-color values above use the standardized CSS sRGB keywords documented by MDN. The list is curated for this color family; it is not a perceptually uniform scale.

Orange sits between red and yellow on a traditional color wheel, and its family can range from pale peach-like values to dark burnt-orange tones. This generated ramp varies lightness while keeping a stable orange hue relationship.

Orange can become difficult to read when used as text on white at lighter values, so treat decorative warmth and readable contrast as separate decisions. The darker end of the ramp usually offers more flexibility for text and borders.

Useful next steps

Try a specific color in the Tints and Shades Generator, or browse other shade families.