Color Guide: Using Orange for Your Website

In our first post of this color series, we talked about the color red. This week in color scheming, orange!

Life in the tropics
Brights — especially neons– are all the rage these days, but it can be difficult to incorporate a bright color into your website. Orange is a fun color. It screams energy, happiness, lightheartedness, and joy. It’s bright and sunny, conjuring images of summer, citrus, beautiful sunsets, and warmth. It’s energizing. It’s youthful. And who doesn’t want a little pizazz added to their site?

Orange is very energetic, but it can be difficult to work into a site tastefully. Because it packs a punch, orange can bring an appearance of chaos if used incorrectly. But paired with the right colors, orange can effectively give you the extra zing that you’re looking for.

Orange works well with white, bringing a fresh, summery glow to a site. Like other colors, it all depends on what shade of orange you use. Try for an orange that has a hint of yellow, making it bright, but not too bright so that it’s harsh on the eyes. Adding more red or brown can make a bright orange more of a pumpkin shade, which can be great if you’re looking for color that isn’t so action-packed. Often used in autumn color schemes, darker shades of orange can easily be paired with browns to make a warm, natural atmosphere. Orange also pairs nicely with some greens and blues.

You may notice as you look around that orange is often used for food related companies. Why does orange particularly fit this niche? Orange is a very warm color, and it’s fresh. Orange applies to food for this reason, whether you’re promoting steaming burgers or fresh summer produce.

Examples

Whataburger

Whataburger: One thing you’ll notice here is that the entire page is orange, just various shades to give off an energetic vibe. With the image layout on the main page being a bit overwhelming, it does help that the main image is crystal clear while others fade into the background. It’s even more important to make sure your page isn’t too busy when you’re using bright colors like orange, yellow, and red.

Snapplr

Snapplr: A gradient pattern that brings out the brightness of orange, but isn’t too overwhelming helps this site stay colorful but not chaotic. White text works nicely with this lighter shade of orange, creating a bold but fresh look and the deep green in the video helps offset the brightness as well.

Orange

Orange.com: Orange and black might remind some people of Halloween, but this company effectively uses the color pair to their advantage. The orange text and images bring color to the site, but really there isn’t much orange at all. Effectively placing the color in the header, symbols, and titles gives the impression of color without taking away from the professional look of the site. Black of course contrasts the bright shade of orange, and white brings the concept home by keeping a fresh, clean layout.

Concentrate

Concentrate: This site uses a bright, bold shade of orange. But it works for them. Concentrate is cleverly woven into the concept with the orange, and classic orange juice label. It seems as if the shades on the orange slice have been used to fill up the entire space, giving a fresh, citrus-y vibe to the page. This conveys energy, which helps bring the viewer back to the idea of concentration- having the energy to focus and get things done. There’s also a very subtle texture to the background of this page, which combats the brightness of the orange.

Invoice

Invoicera: The combination of a darker orange and grey creates an industrial look for this website. Again we see a gradient in the center panel, which works to highlight their graphics and images. This helps bring the viewer’s eye to the middle of the page, and makes the panel appear to be full — but if you look carefully, there’s a lot of empty space. This is a great way to make sure your site isn’t too busy, but not too plain either.

OrangeSoda

Orange Soda: Not a ton of orange in this site, but enough to make it noteworthy. In one of the cycling center panels, the background is a light orange-yellow, almost a peach color. This brings a pop of color to the page without being overwhelming. Also there are a few small images in the panel that use a darker orange, accenting the lighter shade. Finally, the dark orange in the logo contrasts the cool grayish-blue header, which brings definition to one of the most important parts of your business, while still keeping a clean look.

StoryCubes

Story Cubes: This site uses the boldest shade of orange that we’ve seen so far, but the company effectively uses images of various shades of orange within the main panel to offset the brightness. Everything about this page — from the scrolling grey background with orange text to the thin, black dotted lines connecting individual cubes — brings a unique aspect to the table. Contrast is accomplished perfectly, but it’s not overdone either. I like the use of gray and white here, rather than using lots of black. It keeps the page warm and inviting, but still allows viewers to read text without straining their eyes.

Idealists1

Idealists2

 

The Idealists: I really, really like this site. Why? It has hardly any color at all, but uses it so effectively that the site isn’t the least bit boring. That’s the big fear about grayscale websites- what’s so exciting about a bunch of dark shades? This company has a winning combination of contrast by using various shades of gray, white, and a few hints of color. Simple, clean, effective, and unique.

Amber

 

Amber Support Services: See how this site uses brown with a darker orange? This combination creates a feeling of warmth, autumn, and going home. Add that to a nice yellow-brown background and white text boxes, and you have a color scheme destined for aesthetic greatness. Not a ton of orange, but enough to bring in that concept of warmth.

Creative

Discovery Creative: Why I like this site: orange on gray can be hard to pull off. You really have to hit the right shades of both colors to make these two work together. If they’re both bright, they’ll compete for the viewer’s attention, and ultimately exhaust the eyes. This site uses a few light shades of gray to separate sections, and uses a bold orange as an accent. It’s very simple, but its just enough to bring drab gray to a more professional, designer look.

Next time we’ll be talking about Yellow. Stay tuned! In the meantime, you can check out my post on the 10 big mistakes even smart website owners make.

Comments are closed.