21 Shades of Orange with Hex Codes

Named Orange Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

Orange Color Chart: Hex, RGB, HSL & CMYK

Every orange above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Orange Scale from Light to Dark

A 12-step lightness scale built from the core orange hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate orange design tokens.

What Orange Communicates

Orange is attention-grabbing without red's alarm, which makes it the default for warnings, calls to action, and friendly consumer brands. It is also the hardest common hue to make accessible: mid oranges rarely reach 4.5:1 against white, so orange text usually needs to be darkened well past the swatch you picked.

Where orange works well

• Warning states, one step below a red error
• Calls to action that need to stand out against a blue interface
• Food, sport, and energy brands
• Autumn and earth palettes using terracotta and burnt sienna

Colors that pair with orange

Copy the Orange Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --orange-rust-orange: #B7410E;
  --orange-burnt-orange: #CC5500;
  --orange-chocolate: #D2691E;
  --orange-orangered: #FF4500;
  --orange-terracotta: #E2725B;
  --orange-peru: #CD853F;
  --orange-burnt-sienna: #E97451;
  --orange-tomato: #FF6347;
  --orange-pumpkin: #FF7518;
  --orange-tangerine: #F28500;
  --orange-coral: #FF7F50;
  --orange-darkorange: #FF8C00;
  --orange-darksalmon: #E9967A;
  --orange-marigold: #EAA221;
  --orange-sandybrown: #F4A460;
  --orange-lightsalmon: #FFA07A;
  --orange-orange: #FFA500;
  --orange-amber: #FFBF00;
  --orange-apricot: #FBCEB1;
  --orange-peachpuff: #FFDAB9;
  --orange-peach: #FFE5B4;
}

Orange Color Questions