Color Coded Section


Users need to recognize that they are in the right place


Color each major section with it's own color


Use when

Complex sites with a lot of "sub-sites" or 'sub-categories" that almost form a site of their own. Typically, E-commerce Site sites. Because of the complexity of the site, some extra re-enforcement of where users are is welcomed.


The most common way to tell users where they are is using "words", i.e. a label that names the section. In addition to such verbal communication, the users can also receive "visual" cues that communicate the same thing, e.g. using icons and colors. A subtle color-coding of sections can help users to recognize where they are.
So use a fairly saturated color to color fixed elements of the page such as navigation bars. Double Tab Navigation is especially suited for coloring. Do not color the background because such changes in large area's of the page will be perceived as too heavy. If possible, choose colors that are related to the topic of the section. Do not use the same color for more than one section and use colors consistently.


Re-enforces recognition of users that they are in a particular section. Relies on recognition rather than recall. When used creatively, the colors can contribute to the "fun" aspect of the site.

More Examples

At color-coded sections are used in the same way as Amazon does. They even used a "jaguar" skin to "color" the section:

plml logo


1 comment has been added to this pattern.

rdiehl, 9th November 2010
I appreciate this page/pattern collection a lot, thanks for the great work!

Good to know that there is something like color coding, but
this pattern is one of the worst usability mistakes you could possibly make, as it is not barrier free at all.

Keep that in mind, designing your application/site.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below