colorcodekit

Color Codes › Shades of Orange

Shades of orange

Q: What are the shades of orange?

Shades of orange are made by mixing orange with black, producing progressively darker versions. Tints mix with white for lighter versions, and tones mix with grey for muted versions.

Q: What is the hex code for orange?

A common orange is #F97316 (rgb(249, 115, 22)), but orange spans a whole range — see the full set of shades and tints on this page.

A full palette of orange — shades (toward black), tints (toward white) and tones (toward grey) — each with its hex and RGB code. Click any swatch to copy.

#F97316

Shades of orange

Orange mixed with black — darker and deeper.

#F97316

rgb(249, 115, 22)

#E26914

rgb(226, 105, 20)

#CC5E12

rgb(204, 94, 18)

#B55410

rgb(181, 84, 16)

#9E490E

rgb(158, 73, 14)

#883F0C

rgb(136, 63, 12)

#71340A

rgb(113, 52, 10)

#5B2A08

rgb(91, 42, 8)

#441F06

rgb(68, 31, 6)

#2D1504

rgb(45, 21, 4)

#170A02

rgb(23, 10, 2)

#000000

rgb(0, 0, 0)

Tints of orange

Orange mixed with white — lighter and softer.

#F97316

rgb(249, 115, 22)

#FA802B

rgb(250, 128, 43)

#FA8C40

rgb(250, 140, 64)

#FB9956

rgb(251, 153, 86)

#FBA66B

rgb(251, 166, 107)

#FCB380

rgb(252, 179, 128)

#FCBF95

rgb(252, 191, 149)

#FDCCAA

rgb(253, 204, 170)

#FDD9BF

rgb(253, 217, 191)

#FEE6D5

rgb(254, 230, 213)

#FEF2EA

rgb(254, 242, 234)

#FFFFFF

rgb(255, 255, 255)

Tones of orange

Orange mixed with grey — muted and subtle.

#F97316

rgb(249, 115, 22)

#EE7420

rgb(238, 116, 32)

#E37529

rgb(227, 117, 41)

#D87733

rgb(216, 119, 51)

#CD783D

rgb(205, 120, 61)

#C27946

rgb(194, 121, 70)

#B77A50

rgb(183, 122, 80)

#AC7B59

rgb(172, 123, 89)

#A17C63

rgb(161, 124, 99)

#967E6D

rgb(150, 126, 109)

#8B7F76

rgb(139, 127, 118)

#808080

rgb(128, 128, 128)

Shades, tints and tones explained

Starting from a base orange (#F97316), a shade adds black, a tint adds white, and a tone adds grey. Together they give you a coherent orange palette — useful for hover states, backgrounds, borders and accessible text.

Want a different starting orange? Open the colour picker, choose your exact orange, and it will generate fresh shades and tints, or convert any of the codes above to OKLCH, HSL or CMYK.

What are the shades of orange?

Orange mixed with increasing amounts of black, giving progressively darker versions. Tints use white, tones use grey.

What is the hex code for orange?

A common orange is #F97316, but orange spans the whole range shown above.

Popular colours

Sage green Navy blue Teal Coral Burgundy Terracotta Mint green Shades of blue Shades of pink All colour codes →

Color tools

Color Picker →

Pick visually, get every code.

Converter →

Convert between any formats.

Contrast Checker →

WCAG AA/AAA pass-fail.

Named Colors →

All 140 CSS colours.