Reuse Your Desktop Color Palette

When I say that the process of choosing the colors for your mobile site is different, don’t take it that it has nothing to do with the standard process you know from desktop sites. In fact, you seldom have to start from scratch but instead reuse your desktop color palette. This might seem like a lazy approach but in fact it is much superior in almost every aspect to choosing your colors from scratch.

For instance, if you want to ensure consistency between your mobile site and its desktop counterpart, the best you can do is use a stripped down version of the color palette of your desktop site. All you have to do is remove the colors for the site components you won’t be using on your mobile site, make sure that they display well on your target mobile devices (you might need to replace some of the colors, if they are too fancy to use on a mobile or if the contrast is unsafely low), and you are ready to go.

However, it is also totally acceptable to start your mobile site from scratch rather than make it a stripped down version of your main site. The most common case for this is when your mobile site has a very different functionality from your desktop site. Of course, even in this case you can use a modified version of the color palette from your main site but if due to various reasons this is not possible, you need to create your separate mobile color scheme.

In any case, when you choose the colors for your mobile website, the technical limitations of mobile devices are a very important consideration to keep in mind.

Keep in Mind the Technical Limitations of Mobile Devices

Mobile devices get more and more powerful day by day but still in terms of technical abilities, they are far behind contemporary PC displays. For instance, mobiles with monochrome displays are almost history, though you can occasionally find people who use them. You might laugh at the idea to design with these devices in mind but the USE_OF_COLOR Human Test (“Browse the page in a monochrome environment.”) by the W3C recommends them as the ultimate test of how readable your colors are. This is not an exaggeration because some of the technical limitations of mobiles (and the environment you use them in) basically take away from you many of the advanced color options desktop displays award you with.

Image from Wikipedia

Color Depth Dictates Fewer Colors

One of the main characteristics of mobiles to take into account is their color depth. Technology is improving rapidly but still even the best models today have relatively low color depth. Low color depth, such as 8 or 16 bits means that a device is capable of displaying 256 and 65,536 shades of red, green, and blue, respectively, which is far from enough.

It is true that mobile displays are constantly increasing their color depth but there is still a lot of room for improvement. For instance, this article (though a bit old) gives an idea of what color depths some of the major brands on the market today offer. For a more detailed look at color depth, check this white paper.

Therefore, if you want to make the colors of your mobile site user-friendly, use as few colors as possible. It is better to stick to main colors and avoid the use of fancy ones because the risk of them not being displayed properly is higher. Additionally, because of the small mobile screens, you simply don’t have much space for lots of tiny squares all in different colors, which further forces you to use a palette with fewer colors.

Brightness and Contrast Settings Demand High Contrast Schemes

In addition to color depth limitations, you also need to consider brightness and contrast settings. The levels you see on specifications might sound decent but they can be misleading because they don’t take (and can’t take) into account the actual viewing environment. For instance, a very common use of a mobile is in the brightness of daylight, when the perceived brightness and contrast are much lower than the ones stated by the manufacturer. You can’t make your visitors browse your site only in the dark of the night to see it in its full glory, right?

What is more, many users keep the brightness and contrast settings low on purpose to conserve energy. All these mean that your site will be viewed with less brightness and contrast. To counterbalance, you need to use really high contrast color schemes. You can use a contrast analyzer to check how you fare.

Be Careful with Gradients and Background Images

If you use a lot of gradients in your designs (as I do), you need to be even more careful. Gradients are cool, but really only on a desktop. On a mobile, a user can see gradients even when they are not present – he or she just needs to bend the device a little, and voila, here is a gradient that you didn’t include in your design. Of course, this doesn’t mean you must kick gradients completely out of your mobile repertoire but if you minimize their use, this won’t be a mistake.

Backgrounds pose a similar problem. The same background might be perfectly legible on a desktop but on a mobile it might be impossible to read the text. It is your task to make sure this doesn’t happen.

Don’t Rely on Colors to Convey Meaning

Even with desktop design, it is not good to rely on colors to convey information – every usability expert will tell you this. However, this is true for mobile designs and even W3C has included it in its Mobile Web Best Practices.

Time to Get the Color Scheme Ready

Image by Wikipedia

When you get to the very task of choosing the color scheme for your mobile site, you need to take into account the meaning of colors and the right color combinations to use. Even if you plan to reuse your desktop color palette, it won’t hurt to see if a better alternative is available and try using a color scheme generator. These also help when you are stuck and have no idea which colors to use, or if you simply want to speed the process. You might not like every scheme the generator offers you but often the suggestions are at least decent and with some minor modifications (i.e. replace the colors in the scheme you don’t like with other colors you find more suitable), you are done.

Examples of Mobile Sites – Great, Good, Bad, and So-So

1. Weather Underground - a great site with clean design visible on any screen

2. Craigslist- boring to look at but really useful, very minimal, as the site itself, doesn’t waste my bandwidth with useless imagery.

3. Gmail – clean and easy to use.

4. Flickr – if they didn’t use the colors from the main site, the contrast could have been better but still it is OK.

5. Walmart – clean interface, though the text color is a bit light.

6. McDonald’s – the logo is rather pale, occupies a lot of space on the screen, but when you scroll down, things get better.

7. Digg – rather pale, difficult to read.

8. Bloomberg – again, could have had more contrast but not bad as a whole.

9. US magazine – the colors don’t have enough contrast, blurred and hard to read.

10. AztekWeb – gradient + low contrast + scrolling + light text on a dark background, though it probably could have been worse.

If you are familiar with color theory and if you have experience in designing desktop sites, you won’t find it difficult to come up with good color schemes for your mobile site. In fact, thanks to the specifics of mobile sites and the fact that all equal you need fewer colors, you might find it easier to design mobile color schemes than desktop ones.

I wanted to create this list, because there are times when I struggle choosing my design colors -  for me it’s not always easy task to just play with the colors and choose the right ones – of course, there are few favorite colors for everybody, but finding new great color combinations are not so easy task. That’s why there a lot of helpful resources to ease this task,  and I am here to show You those!

Hopefully this will help You to create new designs and the process will become a little easier.

1. Colourlovers

This is a great resource that monitors different color trends. There are a lot of colors for ad campaigns, packaging design, web design – You can check out different color schemes and patterns, compare color palettes, read color related articles, interviews – yes, there are also blog there.

New color schemes are regularly created and examples of the way colors are used in the real world – and there are rating system to give You a chance to find out the most popular ones. And I think this is one of the best places to check out for harmonic color combinations and get inspiration.

2. Kuler

Kuler is nice place created by Adobe company, where You can browse popular created color themes and create Your own from colors, images and get really advanced options and possibilities to create something really great! You can upload images from Your desktop or flickr, which is pretty handy too. To save and download themes You must register with Your Adobe account. You have possibilities to even download “Kuler desktop” software to  browse, search and save themes directly from Your desktop.

3. ColorBlender

There are lot of color combinations available there – and that’s pretty nice way to easily choose between colors.   It’s free online tool – just choose Your preferred color using the color picker  and 6-color  palette will be calculated from this color automatically. If Your browser accepts cookies You can save colors and use them whenever You return to this site from the same computer. When You are finished, You can easily download blend in Photoshop format *.act or for Illustrator colors *.eps.

4. ColorExplorer

ColorExplorer is free online tool for creating and working with color palettes.  There are many options with color circle, color libraries, color pickers and much more. Check out few screenshots with features creating Your own unique color palette.

The ColorExplorer toolset include, but is not limited to:

• color matching; from a single color to a full matching palette – instantly
• browsing popular color libraries
• NCS color picker (Natural Color System)
• conversion hints between multiple color libraries (RAL, PANTONE, and more)
• palette export for use in popular programs like Adobe Photoshop, Illustrator, and InDesign
• color palette analysis and import from images/photographs
• centrally stored palettes for easy access
• palette filters and styles

5. ColorSchemer

Interesting resource offering 3692 different color schemes for now, So You have a little list to choose from. I enjoy this resource because of its forum, where You can discuss with other designers, color tips and get answer to Your questions and blog where You can get even more great colors and find out where to search for any.

6. ColorJack

ColorJack even on the first page offers different color palettes and just mouse over to get even more 6 similar colors. There are also list with useful color related links and more advanced color mixing software, I am describing You below.

I think this software are the main reason I enjoy this site too. There are three different online software tools – Color Galaxy, Color Sphere and  Color Studio.

Below You can see Color Galaxy and Color Sphere  – nice tools to play with and get really the right color You want. You can also download these software as widgets.

7.Color Combo

Check out this resource too – choose colors from palette or tags cloud. Nice feature is, You can grab the specific website colors just by entering web address.

8. Colortoy

Colortoy is another online flash color scheme generator. It generates complementary color schemes based on Your inputted color code – it felt good to play with the software, but You can use it also in the serious projects, this program definitely do his job.

9. Colr

Colr.org has been around since Year 2005 – it fulfils the purpose to fiddle with colors as fun thing and load Your own image – get the best colors out of it!

10. 100 random colors

Handy little color page using AJAX and offering 100 random colors, refresh the page to get another 100 random colors. Every color got his code in the square, so You can easily grab the code. Good stuff if You cannot decide which color You really want.

11. Deagreve – Color Palette generator

Just enter the complete URL to the image to get out the colors. Very simple, but fast and handy software. There are also many more useful little software to create simple business card, favicon etc.

12. WellStyled Color Scheme

Little, useful service to play with color circle and choose between  6 different variations – default, pastel, dark pastel, light pastel, contrast and pale. As an output You  get 5 similar colors to choose from. Actually just play with all the options – those are pretty much there.

13. Colors On The Web

Besides 3 different color tools and mixers, You can learn also about color theory, color terms, how to combine the colors, color contrast and lot more. Nice resource if You are interested not only mixing colors, but also want to dig deeper – learning about color and definitions.

14. Gpeters.com color schemes

Get Your color scheme just submitting word or phrase, service will grab 5 related images from Yahoo images and get 6 most distinctive colors from each.

You can also choose from the huge list of color schemes.

15. Color Calculator

Color wheel where You can choose between RGB, CMYK, HTML  colors, change saturation, lightness values and choose between different harmony settings.

I am planning to create similar list with different pattern and stripe generators, so if You are interested – keep in touch!