Golden Wonder: Using Gold Colour to Design Websites

Golden Wonder: Using Gold Colour to Design Websites

Gold gives the impression of royalty; it’s regal, a sign of high standards or class. These properties make gold ideal for websites that want to convey themselves as the best, a cut above the rest, providing something of great value. However, its value as a design tool shouldn’t be overlooked either.

Golden Wonder: Using Gold Colour to Design Websites

We should first clear up what gold actually is and can be. Even in jewellery terms gold could refer to many different colours. First gold doesn’t have to look shiny or metallic, yes it can be a property of the colour but isn’t the defining property. Looking at the natural world this can be explored further. A pot of honey for instance may be described as golden, but could also be called yellow. A blonde woman could be described as having golden hair but again this is closer to yellow or even brown.

So if we accept gold is a colour that is or is somewhere in between yellow and brown does that give us an answer? It does to an extent as it defines the general area on the colour wheel. What really defines gold as a colour more than anything is context, how it’s used in design.

We see gold as a mixture of two different colours, yellow and brown. What makes it a really durable design tool is the additional properties it brings or should I say maintains. Yes gold is royal, a sign of wealth etc. but it can be eye catching like yellow, or give warmth like brown. The variations of the colour gives us the ability to convey different moods and impressions, this is what makes gold so versatile. Let’s look closer at how gold can be used in different design contexts.

Gold in Complementary Designs

Both complementary and harmonising colour schemes can utilise gold effectively. This is down to the many variations of yellows and browns that can be used along side it. Complementary colour schemes will always give a comfortable look. It establishes a basic level of unity in the design.

Gold’s association and likeness to the colour brown opens up a whole range of possibilities. As brown is a very warm colour which gold maintains the colour can combine with effective unity. In addition the gold elements have properties that brown doesn’t, such as its being a bolder colour. This similarity yet difference is the key factor to making this kind of design work, maintaining design harmony while getting the message across.

Holdsworth Design
Holdsworth Design

Barleys Greenville
Barleys Greenville

Jumbalaya
Jumbalaya

Club Kuat
Club Kuat

Alyson Stoner
Alyson Stoner

The Rascal Flatts
The Rascal Flatts

Wawa Coffeetopia
Wawa Coffeetopia

Vermont Coffee Works
Vermont Coffee Works

Hotel Grand Pacific
Hotel Grand Pacific

Outline2Design
Outline2Design

Gold in Dark Designs

Gold is visually strong against a black or dark background. Using gold in a dark colour scheme in particular can lead to very dynamic looking websites. Dark websites are often used to create a mysterious mood so combining it with a regal colour like gold can create some very glamorous and high quality designs.

Black is probably the ultimate timeless colour. Even alone it brings elegance to a design, so imagine what happens when you add some gold touches to it. As well as conveying quality, high standards etc. small touches of the colour can be used to emphasise important elements in the layout.

For this type of colour scheme to succeed, gold needs to exist on the same or lesser level to the dark elements. There has to be more dark elements than gold ones. What makes the gold noticeable and the design effective is this element of economy. Small amounts of gold elements will standout strongly so consider limiting gold elements you want to use in the design carefully.

Johnnie Walker
Johnnie Walker

Focus Missions
Focus Missions

Enliven Labs
Enliven Labs

New York Palace
New York Palace

Berlin Rodeo
Berlin Rodeo

Uhrecky and Partners
Uhrecky and Partners

Tammaso Ziffer
Tammaso Ziffer

Daniel Gutiérrez
Daniel Gutiérrez

Gold in Light Websites

Light colours have neutral properties associated with them, in other words they give a very clean look. This purity helps create an almost subdued mood.

Adding gold to light backgrounds has the opposite effect of dark backgrounds. The colour appears not only far less threatening, but due to the lesser contrast, a more unified design can be achieved. Gold elements can and will still convey extravagance, but won’t visually dominate the design. A greater impression of space can be created but also reinforces the overall relaxed mood.

Gucci
Gucci

Small Luxury Hotels
Small Luxury Hotels

Mother Earth Brewing
Mother Earth Brewing

Creative Payne
Creative Payne

Preview Naples
Preview Naples

Bright Gold

Bright gold can be seen to resemble yellow and as has some yellow properties. Usually bright gold will catch the eye of the viewer; it can be used to get your message across forcefully.

For bright gold to work there needs to be some darker elements also to help produce the necessary contrast. This doesn’t always mean black as darker complementary colours can create a suitable contrast also. The boldness of contrast can lead to some very striking designs being created.

Midas
Midas

Elkland Hardwerke
Elkland Hardwerke

Wiser
Wiser

Delia Explorers
Delia Explorers

Conclusion

The colour gold can be used to convey royalty, an extravagant mood and a reflection of high quality. Its durability as a colour can be used for a number of purposes. Warm designs can be achieved through using it in complementary colour schemes. Dynamic sites can be achieved by using it against a darker background. By integrating the colour into lighter designs, it can help to create relaxing moods. Strong and eye catching designs can be created through using bolder versions of the colour.

Remember design is just as much as about experimentation as it is about good practice. Don’t be afraid to try gold in different ways, the colour really is durable and can be used to create some very special looking designs. What do you think of the colour Gold? How have you used Gold in your designs? Do you know any good examples we’ve missed? Why not let us know below.

Scott Carmichael is a freelance web designer, developer and blogger from Fife, Scotland. He’s interested in a whole range of web related things, from digital art and design to coding and programming.

Comments

    • kevin,
    • December 30, 2010
    / Reply

    Interesting showcase, we don’t see much gold color based shopwcases. I recommend the Gucci site to visit, it’s pretty amazing and javascript / ajax based!

  1. / Reply

    Absolute genius! Love the way gold has been used in some of these website!!

    • Lobo,
    • December 31, 2010
    / Reply

    We don’t see many articles about colors in design so nice to see one and you speak strictly on subject (as many people don’t).

    • Ruana,
    • December 31, 2010
    / Reply

    Hi,

    I found this very interesting because I was thinking to create a website in either gold or bronze (one of the metal colors for sure, but not steel grey!). The thought first came to me just about 10 days ago when I realized just how seldom web designers use those colors in their designs. Is it them or is it the clients, I wonder?
    Thanks for the great selection. This will give me the inspiration I needed to get me going.

  2. / Reply

    Great article. One nice touch would be to add a link to a tutorial for creating the GOLD EFFECT in Photoshop.

    • Complex Things,
    • January 19, 2011
    / Reply

    Just finished a gold colored website: http://www.wellsandcojewelers.com/ myself.

    1. / Reply

      Very elegant site there…

  3. / Reply

    This similarity yet difference is the key factor to making this kind of design work, maintaining design harmony while getting the message

  4. / Reply

    yellow, or give warmth like brown. The variations of the colour gives us the ability to convey different moods and impressions, this is what makes gold so versatile. Let’s look closer at how gold can be used in different design contexts.

  5. / Reply

    ideal for websites that want to convey themselves as the best, a cut above the rest, providing something of great value. However, its value as a design tool shouldn’t be overlooked either.

  6. / Reply

    This is really useful, gold is one of the hardest design colours to get right!

    • Nick,
    • September 9, 2011
    / Reply

    Golden color can make a sense of elegance and luxuriance. Very good ideas. Thanks for sharing.

  7. / Reply

    I’ve been looking for Gold Inspiration and have struggled to find any, some fab ideas to work with here. Thank you…

  8. / Reply

    I particularly like the “Focus Missions” and “New York Palace” designs listed above. Gold seems to add a real feeling of affluence prestige to a website, I will consider introducing a gold and black color scheme on a bullion website I am working on.

  9. / Reply

    So if we accept gold is a colour that is or is somewhere in between yellow and brown does that give us an answer? It does to an extent as it defines the general area on the colour wheel. What really defines gold as a colour more than anything is context, how it’s used in design.So if we accept gold is a colour that is or is somewhere in between yellow and brown does that give us an answer? It does to an extent as it defines the general area on the colour wheel. What really defines gold as a colour more than anything is context, how it’s used in design.So if we accept gold is a colour that is or is somewhere in between yellow and brown does that give us an answer? It does to an extent as it defines the general area on the colour wheel. What really defines gold as a colour more than anything is context, how it’s used in design.

  10. / Reply

    Was looking for a bit of gold and black website inspiration and this post helped a lot! Not that keen on gold websites on the whole, but there’s some nice ones here.

    Cheers

Leave a Reply

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

Deals