UXDE dot Net Wordpress Themes

Anatomy of Colors: Using Orange in Web Design



Continuing our series of articles on the anatomy of colors, today I’d like to tell you about orange. Lots of people say that orange can look sticky and cheap as it’s known to be a polarizing color. It seems like a fair assessment, remembering the orange color of price stickers, prison uniforms and traffic cones. But the correct using of orange color in web design can give you a range of advantages. Depending on the applying it, orange can cause associations with autumn, flickering fire, and certainly, fruit itself. It all depends on why and how you apply it.

Cultural Considerations

Orange is a Dutch national color. Originally there was an orange stripe on the flag of Netherlands, but later it was replaced by the red one, because at that time orange fabric was scarce. These days during the national holidays of the kingdom people wear orange clothing, Football fans even paint their faces in orange, expressing their support for the national team.

Orange Websites

In many countries, such as Belgium, traffic light is orange instead of yellow one. In Eastern religions orange is a color of the sun. Before word “orange” appeared in English-speaking world, this color was named ġeolurēad that means yellow-red. Web orange color is defined as #FFA500.

Are You Feeling Orange?

Orange is a color of joy and happiness. It takes its name from the orange fruit. Orange is an intermediate color between red and yellow. Orange color frees emotions, raises self-esteem, promotes good mood, and also it’s an excellent anti-depressant.

When it comes to web design orange color can be a strong tool to influence on users’ behavior, but it also one of the most dangerous colors. So, there are a few tips on correct using of orange color in web design below.

Small dose

A few touches of orange can give a life and energy to your website, especially if it is used with other suitable color, for example blue. Below you can see a great example of what I said. If your color palette is extremely muted, therefore it’s better to stick restrained colors, if you’re going to highlight orange heavily.

Fresh Not Canned

Orange Websites


Do not Overdo

But don’t go overboard, because orange can be repressing in really large amounts. As any other warm and bright color, a huge field of orange on the web page can look intimidating and even aggressive. Of course, if you’re not trying to make a bold statement as Toy NY below.

Toy NY

Orange Websites


Cold Colors

Orange really stands out on the cooler colors, like blue, green and purple. Green and blue are safe choices for your main website color and they will perfectly look paired with orange. But green and blue can both appear too cool if they do not have any warm accents.

Jet Blue

Orange Websites


Warm colors

It’s quite difficult to combine orange with other warm colors. Moreover, when you look for a long time for such amount of warm colors your eyes get tired and want to see some cool color in order to break up the space.

Story Cubes

Orange Websites


Difficult to Read

Orange can be difficult to read, so be careful using it as a text color. It’s a beautiful combination, but still it’s always hard to read, even if orange is combining with dark background. Orange looks good as a background color, therefore you can often see it on the buttons and behind headlines.

Zendesk

Orange Websites


Works for You

Orange is associated with youthful, fun and happy look. It’s exiting and lovely color, so it should be used in a context where it will make sense. A venerable and established bank needs more sedate color choices. But the trendy stickers online shop is a great fit for adding orange color.

StickerMule

Orange Websites

There are a few orange websites for your inspiration below.

Get Concentrating

Orange Websites


Grip Limited

Orange Websites


Leftsin

Orange Websites


The Curtis

Orange Websites


ColourPixel

Orange Websites


Clique

Orange Websites


Justinbird

Orange Websites


SkyRocket

Orange Websites


Truskawka

Orange Websites


Pragmatic Mates

Orange Websites


Konosair

Orange Websites


Engine Creative

Orange Websites


Feels

Orange Websites


Giant

Orange Websites


Jopp

Orange Websites


Lexperiencebeaute

Orange Websites


Popp

Orange Websites


Impressa Penguin

Orange Websites


Rumble

Orange Websites


Start

Orange Websites


Mesh

Orange Websites


Envylabs

Orange Websites


Soup

Orange Websites


Conclusion

Of course, there are exceptions to every rule. But still make sure that orange color in your design is really works for you. We will be more than happy to know your thoughts and ideas, so feel free to use a comment field below.

ShmitAcc writes inspirational articles about web design technologies and useful web design tutorials, where you can find a lot of top tips how to create amazing web design artworks.

Discussion 7 Comments

  1. Dietmar

    Orange in my opinion is a really delicate color. It has pros and cons. On the one hand it is a warm cheering color, fresh and vital that directly drags the eyes of a visitor to its center. Great for “Call-To-Action” Buttons and stuff like that. On the other hand it is a very load color and a difficult background for typo. As mentioned use it sparely and wisely. It’s a great color, it is beautiful in combination with so many other colors!!!

    • Nancy Young

      Yes, you’re definitely right. Orange is a delicate color and great for “call-to-action” buttons.
      My favourite combination is orange and light blue like on the Fresh Not Canned website! Thank you for your opinion, Dietmar.

    • Helen Duffy

      Very articulate post, really loved it. I’ve my own blog as well where I have written posts on color philosophy. However, by reading your post I got some new ideas for my blog. Tyvm for sharing such great info with us…..About the post, IMO orange is a difficult-to-use color. So we only use it for call-to-action buttons or banner, that’s all.

      • Nancy Young

        Thank you a lot for your opinion, Helen!

        I think that there are some colors for buttons and other small website detailes, like orange, or light blie (check out the buttons on CrazyPixels). And also there are colors that are good for background and bigger elements, for example, green or blue.

        You need to know the definition of a color before using it. As well as try to see the world in the same way as your users do in order to understand them better. This is a key point of creating good design ;)

  2. John M.

    Wow Orange has so much associated with it when it comes to web design. I am using Orange color quite a lot on one of my websites and would now comparing these orange color facts with the color coding scheme there on my website and graphic design.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>