Skip to content

Orange #ffa500

Energy you can’t ignore, warmth you can’t fake.

RGB
255, 165, 0
HSL
39°, 100%, 50%
CMYK
0, 35, 100, 0
Luminance
0.4817

About Orange

Orange is red’s urgency with the alarm switched off — maximum visibility without threat. That combination made #ffa500’s family the world standard for safety equipment, calls-to-action and everything that must be seen: life vests, traffic cones, black-box recorders (which are orange).

The color is named after the fruit, not the other way around — before the 1500s English simply called it "yellow-red."

History

Orange pigments span from ochre earth to poisonous realgar to chrome orange, but the color’s cultural arrival came with the fruit trade and with the House of Orange-Nassau, which painted a nation — the Netherlands still bleeds orange on every football pitch. Buddhist monks’ saffron robes made orange the color of renunciation across South Asia millennia earlier.

Psychology

Orange rates highest for “affordable”, “friendly” and “energetic” — and lowest for “luxurious.” It triggers action with less pressure than red, which is why it owns the Buy Now button economy. Physically it is the highest-visibility hue against most natural backgrounds, hence rescue and hunting gear.

In design

Pure #ffa500 fails as text on white (1.9:1) — orange is a background, accent and icon color; for text roles burn it down toward #c2410c. It sings on dark navy and slate (this hub’s construction tools run amber-orange on warm stone for exactly that pop), and with its complement blue it forms the most-used CTA pairing on the internet.

In culture

Orange is Dutch pride, Buddhist devotion, Halloween and hazard. It is autumn’s official color and prison’s infamous one — the rare hue equally at home on a monk and a traffic cone.

Brands that own orange

Shades of orange

Every format

HEX#ffa500
RGBrgb(255, 165, 0)
HSLhsl(39, 100%, 50%)
CMYKcmyk(0%, 35%, 100%, 0%)
LABlab(74.9 23.9 79.0)
LCHlch(74.9 82.5 73.1)
OKLCHoklch(0.793 0.171 70.7)

Copy-ready code

/* CSS */
color: #ffa500;
background-color: #ffa500;
/* Tailwind (arbitrary) */
class="text-[#ffa500] bg-[#ffa500]"
/* SCSS */
$brand: #ffa500;
/* SwiftUI */
Color(red: 1.000, green: 0.647, blue: 0.000)
/* Android */
Color.parseColor("#ffa500")

Accessibility — WCAG contrast

Aa
#ffa500 on white: 1.97:1
AA ✗ fail · AA-large · AAA
Aa
#ffa500 on black: 10.63:1
AA ✓ pass · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red100.0%
Green64.7%
Blue0.0%

CMYK percentages

Cyan0.0%
Magenta35.3%
Yellow100.0%
Key (black)0.0%

Color previews

#ffa500 text on a black background

contrast 10.63:1

Card sample

#ffa500 text on a white background

contrast 1.97:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #ffa500;
Background color
Panel with #ffa500 background
background-color: #ffa500;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #ffa500;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(255, 165, 0, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(255, 165, 0, 0.45);
Border & gradient
Gradient panel
border: 3px solid #ffa500;
background: linear-gradient(135deg, #ffa500, #AFFF00);

Monochromatic scale

Palettes built from #ffa500

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Orange, answered

What is the hex code for orange?

CSS orange is #ffa500 — rgb(255, 165, 0). Design staples include dark orange #ff8c00, amber #ffbf00 and Amazon’s #ff9900.

Is orange text accessible?

Rarely on white: #ffa500 manages only ~1.9:1. Use orange for buttons, icons and accents, or darken to burnt tones (#c2410c ≈ 5.4:1) for text roles.

What does an orange button convey?

Action with friendliness — urgency without red’s alarm. That balance is why orange dominates e-commerce CTAs like Amazon’s Buy Now.

Work with #ffa500 in the Color Lab