Mar 23

Previously I’ve written about using Sass to create better, more interesting color palettes for web sites, but perhaps you may not fully understand, or be fully convinced until you’ve seen it in action. I’ve created a demo site that shows how mixing colors can influence and enhance the mood of a web page, and you can see it at demo.lighting. (What better use for the new .lighting TLD than a website that uses natural lighting!) Open that link in a new tab or window and follow along. This is a site for an as-yet-fictional travel supply company that sells designer luggage stickers of exotic and novel destinations around the world.

Officially it’s beta, because there are some technical hurdles I’d like to try to overcome. For instance, I haven’t implemented the luminosity media queries I talked about in Part III, because no device supports them yet. I’ll touch on another at the end of this article.

Let’s Travel The World

For the benefit of those not following along in your browser, I’ve included screenshots of each page.

Gullfoss homepage

Now for the tour: the homepage of the Gullfoss Travel Supply Company demonstrates the Alex Ross method of coloring: shaded with black and white. That’s not to say it looks bad, just that it’s what we’ve come to expect out of a typical web interface these days. The text is black, the background is white. There are two brand colors, which you can see in full purity in the stripes at the top:

$ol-blue $toolbox

The rest of the colors are mixed in Sass, as discussed in Part I, with highlight and shadow colors. For this particular project, I decided to have three different highlight and shadow combinations:

The default highlight and shadow.
$highlight $shadow
#cccccc #666666
Highlight and shadow to be used when more contrast or emphasis is needed.
$bright-highlight $bright-shadow
#ffffff #000000
Highlight and shadow to only be used in the background, “behind” the content (note, these may not be visible at smaller screen sizes).
$bg-highlight $bg-shadow
#454236 #211e1b

The homepage shows the basis for what is possible with color mixing and a typical website aesthetic. But click on the first sticker, Olympia, and you’ll be transported to a whole new world.

Olympia sticker page

Olympia

The mood of the page is totally different, yet all of the markup, typography, and basic layout remain the same. It’s just that since nearly every color has been mixed to some degree with yellowy highlights or purple shadows, a new light, literally, has been cast on the page. Now the background is an eggshell color. The Add to Cart button is natural, yet vibrant. The background purples mellow with the contrasting foreground. The footer has a pleasant glow to it.

The default highlight and shadow.
$highlight $shadow
#fffca1 #776d81
Highlight and shadow to be used when more contrast or emphasis is needed.
$bright-highlight $deep-shadow
#fefdd7 #4a3744
Highlight and shadow to only be used in the background, “behind” the content (note, these may not be visible at smaller screen sizes).
$bg-highlight $bg-shadow
#545f85 #4a3744

If we go back and look at Lincoln instead, it’s a subtle, yet distinctly different aesthetic.

Lincoln sticker page

Lincoln

You can see that the page pulls from the color of the sticker design and gives everything a kind of reddish cast. The far background may appear to be almost black to your eyes, but really it’s a dark green hue, which is red’s compliment and helps bring the color out a little bit more, without sacrificing readability.

The default highlight and shadow.
$highlight $shadow
#e4c5bd #5b2135
Highlight and shadow to be used when more contrast or emphasis is needed.
$bright-highlight $deep-shadow
#f4ede0 #2e0d0d
Highlight and shadow to only be used in the background, “behind” the content (note, these may not be visible at smaller screen sizes).
$bg-highlight $bg-shadow
#426454 #17231e
Austin sticker page

Austin

Now on to Austin. This sticker was designed by brilliant illustrator and friend Marcus Tegtmeier. I pulled the yellow highlights from the girl’s sunglasses, and the shadows from the text and water. The background colors are based on the trees in the sticker’s background. Contrast the cool colors of this page with the warmth of Olympia.

The default highlight and shadow.
#f1d49f #785646
Highlight and shadow to be used when more contrast or emphasis is needed.
$bright-highlight $deep-shadow
#cfe3e7 #44758c
Highlight and shadow to only be used in the background, “behind” the content (note, these may not be visible at smaller screen sizes).
$bg-highlight $bg-shadow
#01a925 #012007

Again, you might find it a subtle difference, but it would be a failing of the design if the colors were hitting you over the head. Instead, think about it like photography. When photographers shoot, they can get extremely picky about the color of the light. If the actual conditions are inadequate, they may spend a lot of time in post-production shifting temperature and tint a notch or two at a time. Similarly, color grading in cinema can take a competently lit scene and dramatically shift the viewers feelings by adjusting it in a way to add warmth or remove it altogether. All that said, now take a look at The Grid.

The Grid sticker page

The Grid

This sticker was also designed by Marcus. Okay, okay! The sticker is excellent, but I admit it’s the Hot Dog Stand color scheme of the Gullfoss site. In this example, I swapped all the highlight and shadows. Dark shadows became bright highlights, while highlights were turned into shadows. This shows how versatile your color palettes can be. Since nearly all the colors are mixed in some way, this dramatic change was achieved simply by switching around three color pairs!

The default highlight and shadow.
$highlight $shadow
#00036e #ed75ff
Highlight and shadow to be used when more contrast or emphasis is needed.
$bright-highlight $deep-shadow
#000037 #00fff4
Highlight and shadow to only be used in the background, “behind” the content (note, these may not be visible at smaller screen sizes).
$bg-highlight $bg-shadow
#00000b #0f2e39

Closing Thoughts

Hopefully this gives you an idea about how you can use Sass’s new color mixing tools to push your web colors to new heights. Admittedly, Gullfoss is pretty extreme in its implementation of color mixing. Do I think all sites should mix together every color on their site? No, in most cases probably not. There is something to say for the clean professionalism of neutral backgrounds and text. But I do want to get people thinking about appropriate places to use this. For example, I absolutely think if you're designing 3D elements, like skeuomorphic buttons and form controls, you should choose highlights and shadows with some color.

Also, you should recognize that because each page has its own color scheme, each page also loads its own stylesheet. Every time I make a change to the styles, I have to save it out five different times and upload them all to the server. This clearly becomes unmanageable very quickly, as more pages are added to the site. There’s probably a way to do this more efficiently in Sass and I suspect it would require separating color mixing into its own Sass file, which is an idea that may have some merit. As yet, I haven’t been able to explore that, however.

Beyond the issue of practicality, I would not encourage you to pick different highlight colors for every page, anyway. Just like your logo and button colors, you're trying to establish a recognizable brand. Consistent color mixing across the site will provide another aspect with which your visitors will become familiar.

If you end up trying this out on some sites of your own, do let me know by sending me an email or tweeting at me. I would love to see what you all come up with!

Previously…

Thank you for reading. You can find me in these fine locations across the web: