Black text 10.6:1
Orange runs from soft Peach and Apricot to fiery Pumpkin and Burnt Orange.
Here are 33 named shades of orange with HEX, RGB, HSL and CMYK codes.
Copy a code in one click, or turn any orange into a full 50-950 scale below.
Peach - lightest33 shades sorted light to darkdarkest - Rust
Download all 33 shades of orange
Photoshop, Illustrator, InDesign, AffinityA Tailwind-style scale built from Orange (#FFA500), evenly spaced in OKLCH lightness. Paste any other orange to build its own scale, or click a swatch for its codes and contrast.
Something went wrong. Please try again.
Still having trouble? Please contact us and we'll be happy to help!
Hmm, that doesn't look like a color yet. Try #3399cc, rgb(51, 153, 204), hsl(200, 60%, 50%) or a name like Cobalt.
#FFA500rgb(255, 165, 0)hsl(39, 100%, 50%)cmyk(0%, 35%, 100%, 0%)Tints mixed with white
Shades mixed with black
Tones mixed with gray
Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.
:root {
--brand-50: #fcf6ee;
--brand-100: #fae5cd;
--brand-200: #facc96;
--brand-300: #ffa500;
--brand-400: #d88b00;
--brand-500: #b97600;
--brand-600: #9a6200;
--brand-700: #805000;
--brand-800: #694100;
--brand-900: #543507;
--brand-950: #352209;
}Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.
Using the same color wheel maths as our Color Wheel, these are the harmonies for Orange (#FFA500). Click a group to open it on the wheel.
#005AFF Royal Blue
Analogous
Next-door neighbors - calm and harmonious
#FF2600 Scarlet#DAFF00 Chartreuse Yellow
Triadic
Three evenly spaced hues - bold and balanced
#00FFA5 Medium Spring Green#A500FF Veronica
Split complementary
The two neighbors of the opposite - contrast with less tension
#00DAFF Sky Blue (Crayola)#2500FF Blue
Orange feels warm, friendly and energetic. It mixes the excitement of red with the cheerfulness of yellow, without the alarm that red can carry.
The color is named after the fruit, not the other way around - English speakers only started calling it orange in the early 1500s. Before that it was simply a kind of yellow-red.
Bright oranges are hard to miss, which is why Safety Orange is used on hi-vis vests, traffic cones and life jackets.
See orange in complete, ready-made palettes - each one with codes and downloads.
Want a palette built around one exact orange? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.
Orange is #FFA500, which is rgb(255, 165, 0) and hsl(39, 100%, 50%). For print it is about 0% cyan, 35% magenta, 100% yellow and 0% black. It is also a CSS color keyword, so you can simply write orange in your stylesheet.
There is no fixed number - any orange can be made lighter, darker or more muted. This page lists 33 named shades, from Peach (#FFE5B4) to Rust (#B7410E). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any orange.
Orange (#FFA500) has a contrast ratio of 1.97:1 on white and 10.63:1 on black, so it reads best on dark backgrounds or with dark text on top of it. For orange text on white, pick a deeper shade such as Rust (#B7410E), which reaches 5.56:1. Test any pair with the Contrast Checker.
Burnt Orange (#CC5500) is a deep, slightly brown orange. Rust (#B7410E) is darker and redder, like oxidized iron. Both are popular autumn colors.
Peach is usually given as #FFE5B4, a very light, creamy orange. Apricot (#FBCEB1) is a little pinker, and Light Salmon (#FFA07A) is stronger.
Safety Orange (#FF7900) is the high-visibility orange used on traffic cones, vests and warning signs. It stands out against both green and blue backgrounds.