Shades of orange

CSS names only a handful of oranges, from peach puff (#ffdab9) to orange red (#ff4500). Here are 8 with hex codes and text contrast; the scale then gives you 11 more steps of whichever orange you click.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

Base colour

Named shades

Or take colours from a photo

or drop it here. It never leaves your browser.

Shades

50#fff5edWhite1.1 FailInk16.8 AAA
100#ffe6d4White1.2 FailInk15.1 AAA
200#ffcca5White1.5 FailInk12.4 AAA
300#ffa65dWhite1.9 FailInk9.4 AAA
400#ea841cWhite2.7 FailInk6.7 AA
500#c66b00White3.8 AA largeInk4.7 AA
600#a45800White5.3 AAInk3.4 AA large
700#844500White7.4 AAAInk2.4 Fail
800#653400White10.3 AAAInk1.8 Fail
900#4b2500White13.4 AAAInk1.3 Fail
950#331700White16.6 AAAInk1.1 Fail

Copy as

CSSTailwindHexJSON

Palette code

:root {
  --color-orange-50: #fff5ed;
  --color-orange-100: #ffe6d4;
  --color-orange-200: #ffcca5;
  --color-orange-300: #ffa65d;
  --color-orange-400: #ea841c;
  --color-orange-500: #c66b00;
  --color-orange-600: #a45800;
  --color-orange-700: #844500;
  --color-orange-800: #653400;
  --color-orange-900: #4b2500;
  --color-orange-950: #331700;
  --color-accent-1: #ffd5b5;
  --color-accent-2: #ff8c00;
  --color-accent-3: #804300;
  --color-accent-4: #482300;
}

At a glance

Peach puff (peachpuff): #ffdab9 · white text 1.31:1 (Fail), near-black text 13.77:1 (AAA); Source: w3.org, checked 2026-11
Light salmon (lightsalmon): #ffa07a · white text 1.98:1 (Fail), near-black text 9.10:1 (AAA); Source: w3.org, checked 2026-11
Sandy brown (sandybrown): #f4a460 · white text 2.03:1 (Fail), near-black text 8.89:1 (AAA); Source: w3.org, checked 2026-11
Orange (orange): #ffa500 · white text 1.97:1 (Fail), near-black text 9.16:1 (AAA); Source: w3.org, checked 2026-11
Dark orange (darkorange): #ff8c00 · white text 2.33:1 (Fail), near-black text 7.75:1 (AAA); Source: w3.org, checked 2026-11
Coral (coral): #ff7f50 · white text 2.49:1 (Fail), near-black text 7.24:1 (AAA); Source: w3.org, checked 2026-11
Tomato (tomato): #ff6347 · white text 2.94:1 (Fail), near-black text 6.14:1 (AA); Source: w3.org, checked 2026-11
Orange red (orangered): #ff4500 · white text 3.44:1 (AA large), near-black text 5.25:1 (AA); Source: w3.org, checked 2026-11

Give your page these colours

A Liite page comes with 15 themes, from sunset to midnight, and your own colours on top. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.

Make your free page

Shades of orange: what to know

This page starts the colour palette generator for this case. For every option and how to use it, see the colour palette generator.

Which shades of orange can carry text

None of these orange shades takes white body text at WCAG AA (4.5:1). Put near-black text on them, or take a darker step from the scale for text.

Near-black text (#161616) passes on all of them.

Orange text on white is hard

Orange is light at full strength. White text on dark orange is 2.33:1 and on orange red 3.44:1, both below 4.5:1. Near-black text passes on all eight.

If you need orange text on a white page, use step 600 of the dark orange scale (#a45800) or darker, which turns burnt orange.

Questions

What are all the shades of orange?

The named oranges are peach puff, light salmon, sandy brown, orange, dark orange, coral, tomato and orange red. Any orange can be stretched into 11 lighter and darker steps with the generator above.

What are the names of the different shades of orange?

Beyond plain orange, CSS has dark orange, coral, tomato, orange red, light salmon, sandy brown and peach puff. Each one's hex code is in the list on this page.