CSS named color

Orange

#FFA500
HEX#ffa500
RGBrgb(255, 165, 0)
HSLhsl(39, 100%, 50%)
OKLCHoklch(79.27% 0.1710 70.67)
NAMEorange

Palette

Complementary

180° on the color wheel
Complement
#0059FF

Analogous

±30° around the base hue
Left
#FF2600
Right
#D9FF00

Triadic

±120° for harmonic contrast
Triad 1
#00FFA6
Triad 2
#A600FF

Shades

Lighter and darker variants
Lightest
#FFE4B3
Lighter
#FFC966
Base
#FFA500
Orange
Darker
#996300
Darkest
#4D3200

CSS usage

By name
color: orange;
background-color: orange;
By HEX
color: #ffa500;
background-color: #ffa500;
By RGB
color: rgb(255, 165, 0);
background-color: rgb(255, 165, 0);
By HSL
color: hsl(39, 100%, 50%);
background-color: hsl(39, 100%, 50%);

WCAG contrast vs white

Aa
1.97:1
Below minimum

WCAG contrast vs black

Aa
10.63:1
AAA

Related colors

FAQ — Orange

What is the HEX code for Orange?

The HEX code for Orange is #FFA500. It's one of the 148 named CSS colors and can be used directly in CSS as color: orange; or color: #ffa500;

What is Orange in RGB?

Orange in RGB is rgb(255, 165, 0) — red 255, green 165, blue 0.

What is Orange in HSL?

Orange in HSL is hsl(39, 100%, 50%) — hue 39°, saturation 100%, lightness 50%.

What is the complementary color of Orange?

The complementary color (directly opposite Orange on the color wheel) is #0059FF. The two together produce maximum contrast.

Is white text readable on Orange?

The WCAG contrast ratio against white (#FFFFFF) is 1.97:1, and against black (#000000) it's 10.63:1. White text is more readable. WCAG recommends at least 4.5:1 for body text.

← All colors & converter