Orange Background
#FFA500 · rgb(255, 165, 0)
About the orange background
Orange (#FFA500) blends the passion of red with the optimism of yellow — pure red plus half green, zero blue. It reads as enthusiastic, creative and affordable, which is why it's everywhere in food, retail and community brands.
Full-screen orange is bold and warm. Black text keeps it accessible at roughly 9.5:1, and it makes a natural base for sunset and autumn palettes alongside gold, coral and brown.
What to use a orange background for
- Food, retail and entertainment branding
- Autumn and Halloween seasonal design
- Creative workshop and community events
- High-visibility warnings with a friendly tone
How to use orange in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page orange background */
body {
margin: 0;
background-color: #FFA500;
}
/* A single section or element */
.hero {
background-color: rgb(255, 165, 0);
} Orange shades and tints
Click any swatch to copy it. Tints mix orange with white; shades mix it with black.
Orange background FAQ
What is the RGB value of orange?
Web orange is rgb(255, 165, 0) — the CSS keyword `orange`. In HSL that's hsl(39, 100%, 50%), exactly halfway between red and yellow on the wheel.
Why is orange used for 'high visibility'?
Orange sits in a sweet spot where human vision is highly sensitive and few natural backgrounds match it — that's why safety gear and traffic signage use it. On screens, it also reads as energetic without red's alarm.
What is the hex code for orange?
Orange is #FFA500 in hexadecimal, rgb(255, 165, 0) in RGB and hsl(39, 100%, 50%) in HSL. Paste #FFA500 into any CSS background-color property to use it.
How do I set a orange background in CSS?
Add background-color: #FFA500; to any element, or apply it to the whole page: body { background-color: #FFA500; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(255, 165, 0) — with identical results.