Shades of Orange
Oranges occupy roughly 15° to 40° on the HSL wheel, between red and yellow. They exist only at medium to high lightness: darken an orange and the eye reads it as brown, not as a deep orange. That is why most orange named colors are bright and fully saturated, with the family reaching into softer peach and salmon tints at the light end. In RGB terms, an orange keeps red at or near 255, puts green somewhere in the middle and keeps blue lower still: orange itself is rgb(255, 165, 0).
In CSS, orange (#FFA500) sits at 39°, close to yellow, while darkorange (#FF8C00) sits at 33°; despite its name it has the same HSL lightness as orange and is simply a deeper, redder hue. Orangered (#FF4500) and coral (#FF7F50) both sit at 16°, near red, and lightsalmon (#FFA07A) is a pale, warm tint of the same hue.
7 orange CSS color names
Sorted from lightest to darkest by OKLCH lightness. Open any color for its codes, shades, harmonies and contrast.
Using orange in design
Orange reads as energetic and approachable, so it shows up in calls to action, food and delivery apps, and creative brands. In interfaces it often marks warnings that are less severe than errors, or highlights such as "new" badges. On the color wheel it is the classic complement to blue, which makes blue-and-orange pairings common for sports teams and dashboards.
Accessibility tip: white text on bright orange rarely passes. #FFA500 with white is only 1.97:1, while black on the same orange is 10.63:1. Use dark text on orange buttons, or move to a much deeper orange if the text must be white.