CSS Color: Orange
Named CSS color Orange — #FFA500 in HEX, rgb(255, 165, 0) in RGB, hsl(39, 100%, 50%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Orange | color: Orange; |
| HEX | #FFA500 | color: #FFA500; |
| RGB | rgb(255, 165, 0) | color: rgb(255, 165, 0); |
| HSL | hsl(39, 100%, 50%) | color: hsl(39, 100%, 50%); |
About Orange
Orange is a warm, energetic color sitting at 39 degrees on the hue wheel. With full saturation and 50% lightness in HSL, and maximum red combined with moderate green in RGB, Orange delivers visibility and warmth without the urgency of Red.
In web design, Orange is one of the most effective call-to-action colors. Amazon's buy buttons and many SaaS platforms use orange to drive conversions because it combines urgency with friendliness. Orange is also the standard color for warning states in many design systems, sitting between the danger of red and the caution of yellow.
Accessibility can be challenging with Orange. Against white, it achieves only about 2.9:1 contrast, failing WCAG requirements for text. For accessible warning messages, consider using darker shades or pairing Orange with very dark text. Against dark backgrounds, Orange achieves good contrast.
Orange is the complement of blue (specifically Azure), making blue-and-orange one of the most popular color combinations in design. In Tailwind CSS, the standard `orange-500` is an excellent match for this named color.
FAQ
What is the hex code for Orange?
The CSS named color Orange has the hex code #FFA500. You can use it in CSS as color: #FFA500; or simply color: Orange;.
What is Orange in RGB?
In RGB notation, Orange is rgb(255, 165, 0). Use it in CSS as color: rgb(255, 165, 0);.
What is Orange in HSL?
In HSL notation, Orange is hsl(39, 100%, 50%). Use it in CSS as color: hsl(39, 100%, 50%);.
What color category is Orange?
Orange belongs to the Orange color family in the CSS named colors specification.
Can I use the name "Orange" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Orange; or background-color: Orange; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Orange to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →