Intuitive colour pickers for non-expert users?

Question

Does anyone have examples of favourite colour pickers (as UI elements, not dedicated color-picking apps or sites) for common, 'everyday' colours - not for RGB or HSL values?

I find traditional colour wheels really unintuitive for common colours - hard for people who don't understand colour theory to know how to pick black, white, or grey:

I quite like Polyvore's:

But what I'd really like to see is one that combines colour and words in some attractive way - Polyvore's squares are so small they work best for people with good eyesight on high-res, bright screens.

I know the concept of 'everyday' colours is problematic, but the UX requirements are:

• let users select colours without understanding how HSL etc work
• let users distinguish between light and dark versions of common colours
• be distinguishable on a mobile, non-retina screen.

Answer 1

Here are some exciting resources:

1. Kuler

   A popular color-picker tool on the web, also available as a PhotoShop plugin.

2. Color Scheme Designer

   If you don't know the science behind colors, don't worry. This will help you.

3. Color by Hailpixel

   A very interesting tool which helps you select random colors with fun.

4. Pictaculous

   Generates a color palette from any image.

5. ColorHexa

   Gives much detail of any particular color.

6. ColorCombos

   Provides ready made color combos.

7. Coolors

   The super fast color schemes generator with playful interaction.

Answer 2

I would not reject HSL so quickly. While the model is kind of technical, it does correspond to qualities that are (in my opinion) part of people's mental model of colors:

• H(ue): The "kind" of color (red, green, blue, yellow etc.), roughly corresponding to the spectral colors of the rainbow and most color terms of average people
• S(aturation): How "colorful" a color is
• L(ightness): How bright or dark a color is

You could try to use the power of HSL, but hide its technicalities. Here is a sketch of my idea:

^{download bmml source – Wireframes created with Balsamiq Mockups}

First, the user selects a color from a list of predefined colors. The minimum should be the primary colors (red, green, blue), the secondary colors (yellow, cyan, magenta) and the most important colors that are not obvious in HSL (white, gray, black and brown). Use meaningful default colors that fit the purpose of the color selection, e.g. don't use too "loud" colors if the user is selecting a background color for a website template.

Then the user can interactively explore the color space by starting with the selected color and iteratively changing it along the HSL-axes, but in a visual and non-technical way.

Answer 3

Reduce cognitive friction by limiting the number of choices

There are almost 17 million possible hex color combinations and limiting this to just a few options will reduce the cognitive load on the end user.

I find traditional colour wheels really unintuitive for common colours ...

I feel the same way. Traditional color wheels can be overwhelming so I set out to create a more intuitive color picker patterned after a deck of paint sample cards.

Demo of a simple color picker

Here are some things I like about it ...

• The only options are common everyday colors of the rainbow.

• Both words and colors are visible so it's color blind friendly.

• All possible color choices are visible when a user hovers or clicks on the control.

• Once a choice is locked into place the control stays out of your way.

Here are some limitations ...

• The total number of color choices that this pattern supports is limited to about 10

• Multiple clicks are required to select and lock a choice into place

Most people can distinguish between 20 - 25 colors

There is quite a bit of color theory research out there but the bottom line is that most humans can confidently distinguish only about 20 colors. Giving a user more than 20 color choices could easily add confusion by making them question a previous color choice later on ... is that tan or khaki?

Your original example of placing colors close together in a grid helps a little and is hard to improve upon when more color choices are needed.

It is still a good idea to assign a readable name to each choice because not all users can tell the difference between light blue and cornflower blue.

Answer 4

I'll propose to use colorbrewer tool, which has solid scientific background. Also there are a number of color tools.

Satisfying your UX requirements,

let users select colours without understanding how HSL etc work

use pre-defined colors set

let users distinguish between light and dark versions of common colours

choose appropriate color scheme

be distinguishable on a mobile, non-retina screen

use Polyvore's-like increased squares. The squares sides size should be aligned with finger touch (about 0.5cm)

You can also give away this problem from users by auto-assigning colors for your objects using pre-defined color scheme, like it does MS Excel when you build a chart diagram.

Answer 5

As an illustrator the first thing I thought of was a painter's wheel/palette of some sort - and then my mind went to Corel Painter's color picker, which is one of the best color pickers I've used. Hue is the primary attribute that people associate with 'color', and this picker keeps that separate from saturation and value.

To simplify it further for non-expert users, you could break the color wheel on the outside into 'common' colors instead of a continuous gradient. The internal triangle may also be a bit confusing at first, so you could only display the color ring initially and then bring up the saturation/value controls later (and likewise break that into steps).

Answer 6

I've found the CIELab color space, and its transformation CIELCH, feel far more natural. The "L" dimension corresponds to lightness and that fits nicely into a user's mental model of color.

Unfortunately we couldn't find a color picker out there based on these color spaces, so we built our own little color picker (warning, shameless self-plug). Here is the link to the GITHUB project.

The bars to the left and right of the wheel control the darkness and transparency respectively. The colors at the top are inspired by a ColorBrewer palette.

Answer 7

I think what you're looking for is a list of named colors you can pick from.

Name That Color was a project that was aimed at associating names to colors (from Hex codes) using near-matches, but it also offers a drop down full of named colors to choose from:

As Chirag quotes on Name That Color:

The color names in this list were found via Wikipedia, Crayola, and Color-Name Dictionaries like Resene. I removed duplicates and manually edited the list for consistency.

Take a look at those resources linked above as well. They have plenty of named colors. Chirag's dropdown just makes the color picking experience more intuitive.

Answer 8

Color picking is a common design pattern.

There is no "ideal" widget here...

...because the right solution will depend on the needs of your application:

• How precisely you need users to be able to select a color (a professional designer may need #hex or rgb() interfaces for precise selection, a consumer will not necessarily understand a traditional color wheel, etc).

---

However...

...an effective contemporary color picker is the rectangular palette plus lightness/luminosity widget. Here are a couple of examples, the right hand widget includes a shortcut palette:

Here's why:

• A color palette typically needs to provide 3 axes of control to properly encompass all colors (e.g. HSL, RGB).
• Users understand color lightness/luminosity better than saturation or hue. This widget properly considers this by using a 2D palette for the user to pick hue/saturation, and a separate control for luminosity.
• It presents an effective, left-to-right micro-workflow for the user: (1) pick a color; (2) adjust how dark or light the color is.
• It allows users to select the most commonly used colors (black and white) very easily using the slider.
  • Many other palette designs neglect this simple black/white use case for users.

Again, there is no right answer here but this example of a modern widget may illustrate some of the key considerations for finding the right design for your application.

Answer 9

The color selection in sketch has a good UI. You could make it more basic by using the top part (draggable based on a color + white + black on corners) and the rainbow color selectors (and show "mycolor" that changes dynamic).