CSS Color: DarkOrange
Named CSS color DarkOrange — #FF8C00 in HEX, rgb(255, 140, 0) in RGB, hsl(33, 100%, 50%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | DarkOrange | color: DarkOrange; |
| HEX | #FF8C00 | color: #FF8C00; |
| RGB | rgb(255, 140, 0) | color: rgb(255, 140, 0); |
| HSL | hsl(33, 100%, 50%) | color: hsl(33, 100%, 50%); |
About DarkOrange
DarkOrange is a deeper, richer variation of Orange that leans slightly more toward red. Its hex value `#FF8C00` places it at 33 degrees on the hue wheel with full saturation and 50% lightness. Despite the name, it is not dramatically darker than Orange — it is more of a deep amber tone.
In web design, DarkOrange works well for hover states on orange buttons, secondary accent colors, and warning indicators that need slightly more visual weight than standard Orange. It is popular in sports, construction, and outdoor brand websites.
For accessibility, DarkOrange against white achieves approximately 3.1:1 contrast ratio — passing WCAG AA for large text only. Use it as a background or decorative element rather than for normal text on light surfaces. Against dark backgrounds, it provides excellent readability.
DarkOrange bridges the gap between Orange and OrangeRed. It pairs well with charcoal, navy, forest green, and cream. In Tailwind CSS, `orange-600` is the closest match for this warm, saturated tone.
FAQ
What is the hex code for DarkOrange?
The CSS named color DarkOrange has the hex code #FF8C00. You can use it in CSS as color: #FF8C00; or simply color: DarkOrange;.
What is DarkOrange in RGB?
In RGB notation, DarkOrange is rgb(255, 140, 0). Use it in CSS as color: rgb(255, 140, 0);.
What is DarkOrange in HSL?
In HSL notation, DarkOrange is hsl(33, 100%, 50%). Use it in CSS as color: hsl(33, 100%, 50%);.
What color category is DarkOrange?
DarkOrange belongs to the Orange color family in the CSS named colors specification.
Can I use the name "DarkOrange" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: DarkOrange; or background-color: DarkOrange; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert DarkOrange to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →