CloudLife

color rocks
A Guide on Website Colors

December 9, 2016

^

^

^

18 years ago, most websites looked pretty ugly. The limit on technology and new experience with Online markets gave everyone plenty of excuses to have a bad looking website. Today, thats not the case. Theme plays an important role in the color of your website, this guide will deal with how to use color properly, and show you some examples of how to separate yourself from the competition.

Click to Fast Scroll to parts of the guide.

The 90s Website

Black vs White Text

Colors That Look Good Together

Tom Early

About the Author: Born and Raised in San Antonio, Texas. Loves art, nature and Data-centers.

The 90s Website

Lets put these websites into a little perspective. Back in the late 90s, most homes got their Internet through Dial-up with speeds rated at 28.8Kb per second to 33.6Kb per second. Today, the average house hold uses speeds 10MB per second and up. Here is an example of the conversion rate: 1000 Kilobytes = 1 Megabyte. Lets not forget about the technology we had back then to access web pages, Like the Pentium II with a CPU speed of 233MHz.

Here are some 90s Websites that are still up and accessible, from an article on mentalfloss.com

you got mail website CNN OJ trial website
Netscape website USA today baseball website

Notice the similarities? For one thing, its easy to read. A White background compliments black text and blue hyper-links. Now Compare those sites with these that use colors, or pictures, as a background with different colored text.

Car website blue website

Right away there is a big difference. The websites that use a white background and black text look more clean, and they are easy to read. Which one would your customer prefer? If you want to look at more websites, the last two example are from websitesthatsuck.com

Black vs White Text

First Lets look at text throughout history. When is the last time you read the book Pride and Prejudice where each page was black with white text? This is, of course, a ridiculous example, mainly because paper has always been white and it doesn't really give prove of readability, but it brings up some articles i have found on the subject.

Uxmatters.com has a great article on Contrast and Legibility, providing pictures of different color text with backgrounds.

"The Following color combinations provide good contract and legibility:"

blue yellow green blue

In the Article, the author also states, "Avoid using gray for text or symbols consisting of fine lines on a color background, because a successive-contrast effect causes them to take on the hue of their background color’s complement."

white vs black vs gray

More Helpful Links

Light on Dark

When to use white text

LCD Display Polarity

Colors That Look Good Together

Now lets say you have a color theme in mind for your business website. Maybe its red, or blue, but either way you'll need a guide to figure out the best combinations of colors. Here are some website examples along with their corresponding Colors.

Colors that go with red

red website

A simple website with 4 colors. Red, White, Black, and Grey. Notice how the background is always a darker color then the white boxes with black text. They highlight the information for you and make it easy for to navigate the page.

Color codes:

#A71B1D

#F1F1F1

#2C2827

#FFFFFF

Colors that go with blue

#6DB3E6

#184E86

#2C2827

#FFFFFF

blue website

Searching on Google for "blue websites", or , "most popular blue websites", yielded some good results. Take for instance the white house website. It uses blue just in the menu and header of the page to mark important events. The rest of the website is white with little variation of text color to highlight topics.

Color codes:

Colors that go with green

#669900

#316189

#F2F0EB

green website

The top bar being black and holding contact and social media icons. The menu is green with white text. In the middle of the page a white background with green and black titles shows you recent articles, while the sides are a tiny bit grayer and display company information and search options. If you want three sections of your web-page all on one page, this is the way to do it.

Color codes:

#222222

More Helpful Links

Color Combos

Copyright 2017 © CloudLife. All rights reserved.

color rocks
A Guide on Website Colors
The 90s Website Netscape website USA today baseball website Car website blue website
Black vs White Text blue yellow green blue white vs black vs gray
Colors That Look Good Together
red website
A Guide on Website Colors
color rocks
The 90s Website
you got mail website CNN OJ trial website Netscape website USA today baseball website Car website blue website
Black vs White Text blue yellow green blue white vs black vs gray
Colors That Look Good Together
red website
blue website
green website