HTML & CSS - - By Jennifer Farley

Color In Design: Orange

345_orangeMoving on from last week’s versatile Green, today we’re taking a look at the color Orange and its use on the web and in logos. Orange is combination of red and yellow, a warm vibrant color with connotations of energy and flamboyance. It’s less intense or aggressive than red but can be used in a similar fashion to grab attention and highlight important areas of a design.

Orange designs often convey a sense of friendliness and in the right hands can maintain seriousness and professionalism. On the downside, orange is sometimes associated with cheapness thanks to companies such as Easyjet which plaster all of their products and services in bright orange. In general though, it’s a great color to attract attention without offending or stopping anyone in their tracks.

Orange as a citrus fruit conveys thoughts of summer, sun, vitamin C and health. It also has connotations of autumn and change; autumn leaves changing from green to orange to brown. Depending on your audience you might choose a very bright yellow-orange or a more autumnal orange-brown.

Using Orange

As already mentioned, you can use orange as a foreground color to highlight important elements or as a main background color to convey feelings of enthusiasm, vibrancy and warmth. Without screaming, orange makes a big statement.

trainspotting_poster1 trainspotting-poster_1

Red-orange is highly energetic and fiery while softer yellow-orange is more soothing and less flamboyant. Black and orange appears in nature in pumpkins and have a strong association with Halloween. Blue and orange really pop together. Green and orange together provide a tropical feel while the complimentary colors of purple and orange are eye-catching without being too overpowering.

color-poster

Orange In Logo Design

345_orange rss-logo

harley fedex_logo1

sitepoint_logo

Let’s look at some examples of websites using Orange as a main background color, or as a minor color to highlight important areas of the site such as navigation.

Saturized

Saturized

Easyjet

easyjet-web

Lightway Software

lightway

Mulley Communications

mulley

Zipper CMS

zippercms

Navigant Consulting

Navigant

Biker Rewards

Biker

A Crayons Life

Crayon

Guide Dogs South Australia

guidedog

Qodo

qodo

Monolinea

monolinea

And there you have it. What do you think about Orange in web and logo design?  Have you seen any particular orange favorites of your own?