HTML Color Codes & Palettes | HueRoll
Free color palettes, harmonies and contrast checks

What Does Dark Orange Look Like? Comparing Red Undertones and Brightness with HEX Codes

TIPS

“Dark orange” describes a range of colors that may look deeper than vivid orange and, depending on their hue, closer to reddish brown or ochre. As an everyday color description, it does not have one required color code. CSS (Cascading Style Sheets, the language used to style web pages) has a named color darkorange, defined as ■#FF8C00. Here we use another reference shade to compare redness and lightness. A shade changes when you shift it toward red or lower its lightness. In this article, ■#BF6618 is our reference dark orange, and we compare actual HEX codes to see what changes.

Choose dark orange by separating red undertones and lightness

HEX is a hexadecimal (base-16) code used to specify red, green, and blue color components on the web. For example, our reference ■#BF6618 contains red 191, green 102, and blue 24. Even within orange shades, changing the green component can shift the color toward red or yellow.

It helps to consider hue—the direction of a color around the color wheel—separately from lightness, or how dark or light the color is. HSL (Hue, Saturation, Lightness) describes colors using those properties, with saturation indicating color intensity. The reference shade has a hue of approximately 28 degrees, saturation of 78%, and lightness of 42%.

Compare red undertones and brightness using HEX codes

Compare red undertones: Three hues at nearly the same lightness

  • Red-leaning dark orange ■#BF4418: Hue about 16 degrees, moving toward vermilion or reddish brown.
  • Reference dark orange ■#BF6618: Hue about 28 degrees, between the redder and more yellow-leaning examples.
  • Yellow-leaning dark orange ■#BF8718: Hue about 40 degrees, moving toward golden yellow or ochre.

All three shades have red 191 and blue 24. Only the green component changes, from 68 to 102 to 135. Their HSL saturation is close to 78% and lightness close to 42%, so this comparison chiefly changes the red-to-yellow direction. Nevertheless, equal HSL lightness does not mean equal perceived brightness or equal contrast against a background.

Compare brightness: Three lightness levels with a similar hue

  • Deeper dark orange ■#8D4B11: HSL lightness about 31%; a muted, brown-leaning choice.
  • Reference dark orange ■#BF6618: HSL lightness about 42%; an intermediate option for accents or headings.
  • Slightly lighter orange ■#E5812A: HSL lightness about 53%; an option when the design needs a brighter element.

These shades keep hue near 28 degrees and saturation near 78%. Changing lightness this way makes it easier to compare deeper and lighter versions without moving far toward red or yellow. The approximate HSL values reflect rounding when converted to six-digit HEX codes.

Check text and background contrast before using dark orange on a website

On a light cream background ■#FFF7EE, deeper orange ■#8D4B11 works as a headline color with a contrast ratio of about 6.29:1. Dark gray ■#29241F body text against the same cream reaches about 14.48:1. A button filled with deeper orange ■#8D4B11 and labeled in white ■#FFFFFF reaches about 6.67:1.

For a dark gray ■#29241F banner, a button filled with lighter orange ■#E5812A and labeled in dark gray ■#29241F provides about 5.49:1 contrast between the label and button. However, white ■#FFFFFF text on the reference orange ■#BF6618 provides only about 4.09:1, which is insufficient for normal-sized text.

Hue differences also affect text contrast. Against the cream background ■#FFF7EE, red-leaning orange ■#BF4418 text reaches about 4.88:1, but yellow-leaning orange ■#BF8718 text reaches only about 2.96:1. Despite their similar HSL lightness values, the latter does not provide enough contrast for normal-sized text.

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, one of its conformance levels, generally requires at least 4.5:1 contrast for normal-sized text and 3:1 for qualifying large text. Evaluate each actual text-background combination rather than relying on a color name or HSL lightness alone.

HueRoll lets you adjust colors through HEX input, inspect values such as HSL, and check the selected color against white or black. It does not directly compare two arbitrary colors or automatically determine Level AA compliance. The cream and dark gray comparisons in this article were calculated separately. When choosing dark orange, compare its red undertones, lightness, and intended placement before making a final choice.