Dark text passes AAA
10.63:1

Orange

#FFA500

Orange #FFA500 is the CSS standard orange, warmer and lighter than a traffic cone. It sits between red's energy and yellow's brightness, which makes it popular for calls to action and food brands. Use dark text on it: white manages only 2:1.

HEX#FFA500
RGBrgb(255, 165, 0)
HSLhsl(39, 100%, 50%)
OKLCHoklch(79.3% 0.171 70.7)
CMYKcmyk(0%, 35%, 100%, 0%)
CMYK is an approximate screen conversion, not for print matching.

Lighter and darker

Ten steps toward white and ten toward black, with orange in the middle. Click a step to copy its hex code.

LightestOrange #FFA500Darkest

Readability

White text on orangeNormal text at 16px. The quick brown fox jumps over the lazy dog.
1.97:1
  • Fails AA and AAA
Dark text on orangeNormal text at 16px. The quick brown fox jumps over the lazy dog.
10.63:1
  • Passes AA normal
  • Passes AA large
  • Passes AAA normal
  • Passes AAA large

Colors that go with orange

#FFA500#005AFF

Complementary

The opposite on the color wheel
#FF2500#FFA500#DAFF00

Analogous

Its two neighbors
#FFA500#00FFA5#A500FF

Triadic

Three evenly spaced colors
#FFA500#00DAFF#2500FF

Split-complementary

The two colors beside its opposite

Orange color palettes

Monochrome

Lighter and darker versions of the same color.

Analogous

Neighbors on the color wheel, for a calm, related look.

Complementary

The color with its opposite, for strong contrast.

Triadic

Three colors evenly spaced around the wheel, with a light and dark version.

Similar colors

  • Marigold#EAA221
  • Dark Orange#FF8C00
  • Goldenrod#DAA520
  • Mango#FDBE02
  • Amber#FFBF00
  • Tangerine#F28500
  • Fawn#E5AA70
  • Caramel#C68E17

Use orange in a tool

Check text contrast with orangeMix orange with other colorsBuild an accessible palette from orange

Questions about orange

What is the hex code for orange?

The hex code for orange is #FFA500. In RGB it's rgb(255, 165, 0), and in HSL it's hsl(39, 100%, 50%).

What colors go with orange?

Its complementary color is #005AFF. For a calmer look, try the analogous colors #FF2500 and #DAFF00, or one of the palettes above, which all include orange.

Is text readable on orange?

Dark text is the better choice, with a contrast ratio of 10.63:1. That passes WCAG AA for normal text.