Blog Post: Gold Doesn’t Exist

Red Deer & Blackfalds Web Design Writes:

As Web Design capabilities are enhanced, new programming languages become available, and greater softwares/content-management-systems are offered, there is still one glaringly obvious thing wrong with websites and logos these days … The colour Gold does not exist!

I know what you’re thinking: “But I have Gold on my website?!?” … short answer, yes you do. Long answer: the actual term “Gold” refers to an element, and not a colour. In order to capture it in a design space you would need to use an excess of gradient from light to dark and subtle hints of whites in order to make it Shimmer the way gold does. Doable in a logo? You betcha! With modern CSS? Only if you’re willing to utilize an image.

Let’s look at some examples:

GOLD CSS

This is “Gold” the way that css displays it, using the following HTML/CSS.
<div style=”width: 100px; height: 100px; background: gold;”>GOLD CSS< /div>


GOLD CSS

This is the default Gold CSS Hex, with a subtle gradient
<div style=”width: 100px; height: 100px; background: INSERT GRADIENT CSS; float: right; margin-right: 20px;”>GOLD CSS< /div>


GOLD CSS

This is a triple gradient (the limit of modern CSS) and how you might display 3 different tones of the preset CSS “Gold”
<div style=”width: 100px; height: 100px; background: INSERT CSS; float: right; margin-right: 20px;”>GOLD CSS< /div>


NOW! I’m not writing this article to offend anyone with a Gold Logo/Website, or anyone who is thinking of putting one together. I’ve seen and built websites with these elements and they look great! But humour me a bit and pull out your phone and your tablet, and take a look at this same article on a few different devices. These colours/gradients will appear differently on every device and every screen you view them on. Just something to keep in mind if your plan is to look elegant? It might turn out more yellow…

CSS USED

Single Gradient
background: rgb(255, 215, 0); background: -moz-linear-gradient(30deg, rgb(255, 215, 0) 30%, rgb(255, 194, 0) 70%); background: -webkit-linear-gradient(30deg, rgb(255, 215, 0) 30%, rgb(255, 194, 0) 70%); background: -o-linear-gradient(30deg, rgb(255, 215, 0) 30%, rgb(255, 194, 0) 70%); background: -ms-linear-gradient(30deg, rgb(255, 215, 0) 30%, rgb(255, 194, 0) 70%); background: linear-gradient(120deg, rgb(255, 215, 0) 30%, rgb(255, 194, 0) 70%);

Double Gradient
background-color:#FDD600; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FDD600, endColorstr=#d6c400); background-image:-moz-linear-gradient(top, #FDD600 28%, #d6c400 51%,#FFC200 64%); background-image:linear-gradient(top, #FDD600 28%, #d6c400 51%,#FFC200 64%); background-image:-webkit-linear-gradient(top, #FDD600 28%, #d6c400 51%,#FFC200 64%); background-image:-o-linear-gradient(top, #FDD600 28%, #d6c400 51%,#FFC200 64%); background-image:-ms-linear-gradient(top, #FDD600 28%, #d6c400 51%,#FFC200 64%); background-image:-webkit-gradient(linear, right top, right bottom, color-stop(28%,#FDD600), color-stop(51%,#d6c400),color-stop(64%,#FFC200));

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)