HCHTML Color

Shades of orange

Orange sits between red's urgency and yellow's warmth. It feels friendly and active, which is why it shows up on call-to-action buttons and in food and sports brands.

orange · #FFA500

9 orange color names

Every CSS named color in the orange family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

peachpuff#ffdab9rgb(255 218 185)oklch(0.911 0.06 63.7)lightsalmon#ffa07argb(255 160 122)oklch(0.794 0.125 42.4)orange#ffa500rgb(255 165 0)oklch(0.793 0.171 70.7)sandybrown#f4a460rgb(244 164 96)oklch(0.784 0.127 59.7)darkorange#ff8c00rgb(255 140 0)oklch(0.751 0.179 58.3)coral#ff7f50rgb(255 127 80)oklch(0.735 0.168 40.2)tomato#ff6347rgb(255 99 71)oklch(0.696 0.196 32.3)orangered#ff4500rgb(255 69 0)oklch(0.66 0.229 35.4)chocolate#d2691ergb(210 105 30)oklch(0.634 0.155 50.3)

Tailwind orange scales

The Tailwind v4 default palette families closest to orange, 50 to 950.

Using orange in a UI

Bright orange is light in OKLCH terms, so white text on orange-500 usually fails contrast. Use orange-700 or darker behind white text, or dark text on the bright shades.

orange-colors.css
:root {
  --peachpuff: oklch(0.911 0.06 63.7); /* #ffdab9 */
  --lightsalmon: oklch(0.794 0.125 42.4); /* #ffa07a */
  --orange: oklch(0.793 0.171 70.7); /* #ffa500 */
  --sandybrown: oklch(0.784 0.127 59.7); /* #f4a460 */
  --darkorange: oklch(0.751 0.179 58.3); /* #ff8c00 */
  --coral: oklch(0.735 0.168 40.2); /* #ff7f50 */
  --tomato: oklch(0.696 0.196 32.3); /* #ff6347 */
  --orangered: oklch(0.66 0.229 35.4); /* #ff4500 */
  --chocolate: oklch(0.634 0.155 50.3); /* #d2691e */
}
Generate a orange scaleBuild a palette

Frequently asked questions

What is the hex code for orange?
The CSS keyword orange is #FFA500, which is rgb(255 165 0) or oklch(0.793 0.171 70.7). Tailwind's orange-500 is #FF6900, a softer orange that many design systems use instead.
How many shades of orange have CSS color names?
This page lists 9 CSS named colors in the orange family, from peachpuff (#FFDAB9) at the light end to chocolate (#D2691E) at the dark end. Every one can be used directly in CSS by name.
What colors go well with orange?
Orange pairs well with blue, teal and brown. For a guaranteed match, open any orange shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a orange color scale for my design system?
Pick a orange you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

RedYellowGreenTealBluePurplePinkBrownGrayWhite