Which color swatches best help users filter products?

Question

I'm currently working on a design for a product filter, and one of the attributes will be color. Products will have any of several dozen specific colours, but it makes more sense to give users a handful of "basic" colors to filter instead of listing every one.

Amazon and eBay do this already. A user might select Green, and see products with color set as Green, Light Green, Olive, etc.

It's tough to define the shortest list to give users the right flexibility, but I've come up with the following:

Black, White, Grey, Brown, Red, Pink, Orange, Yellow, Off-White, Green, Blue, Purple, Gold, Silver, Multicolour, Transparent, Not specified

Do these basic colors swatches make the most sense to display to users, or is there a better list?

Answer 1

This is really a problem of linguistics. In some languages, for example, there's no difference between green and blue. There is some research done by Brent Berlin and Paul Kay, which suggests a natural evolution of colours within languages (see here). I would use this as some guidance towards which are the most 'important' colours. The following diagram shows how it is claimed that colours evolve -- white and black (or light and dark) being found in all languages, red being the next to appear, then either green or yellow, etc:

Image Source: McManus, I. C. (1997) Note: Half-a-million basic colour words: Berlin and Kay and the usage of colour words in literature and science. Perceptron. 26, 367-370. URL: http://www.ucl.ac.uk/medical-education/reprints/1997-Perception-HalfAMillionColourWords.pdf

For English, this would suggest that, at very least, you should include the above colours (white, black, red, green, yellow, blue, brown, pink, purple, orange, grey). I would perhaps do away with gold and silver on your list, perhaps including them with orange and grey -- unless there is a particular reason you would make a distinction.

Answer 2

I've worked on the same problem for many paint brands. For paint, the problem is way more complicated: thousands of colors to choose from, on a variety of products. Figuring out a system to browse all these colors is an art all in itself. Each brand has its own way of dealing with it, and generally a lot of resources are spent on coming up with a good an unique solution. In fact, the way to browse colors is a major usp for paint brands, these days.

So yes, maybe in your design, sorting by hue might be the best option. But it's certainly not the only option.

I would advice you to take a bit of freedom. Print the colors on paper, cut them out and play with it, see if you can make an order that makes sense and looks attractive. The process is more intuitive than analytical. More art than science.

Answer 3

I would also like to point out the value of context in the situation. As an extreme example, I have just gone through an exhaustive process of doing this on our site for makeup. The differentiation between various shades of foundation (the make-up that matches your skintone) consists of a very small slice of beige/browns. The differences are very important in this specific context. For you group the same thing might just be brown.

This is an extreme example, but even small changes from the "standard red, green...." can give much more context to a user. A good example of this is Urban outfitters. They have a color/pattern set which is far more effective because it fits in to their specific brand context.

You say that you have several dozen specific colors. Like mentioned above I would print them (or pull out a sample of each product) and see if you can reduce that set to a contextually relevant set of colors and patterns.