Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

trad colour wheel

I quite like Polyvore's:

enter image description here

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.
share|improve this question
2  
The most fancy minimalist palette I have come across so far: flatuicolors.com –  rk. Jun 18 '13 at 14:35
1  
What's your use case? How many different colors do you need to be able to select? 8? 16,777,216? Something inbetween? –  Sebastian Negraszus Jun 18 '13 at 17:52
    
Apple's color picker is one I like--mainly because of the many many options and ways to pick a color it offers up. –  DA01 May 14 at 2:47

8 Answers 8

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.

share|improve this answer
2  
Nice collection of color-picker resources! –  SNag Jun 19 '13 at 9:56
    
These are great, thank you, but I was really looking for a color picker UI tool. I will update the question to make that a bit clearer... –  cakehoover Jun 20 '13 at 8:41
    
Colorful......! –  jaczjill Jun 20 '13 at 9:52

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:

mockup

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.

share|improve this answer
    
Interesting, thank you. –  cakehoover Jun 20 '13 at 8:42
    
+1 HSL/HSV is designed for an intuitive approach –  Gustav May 13 at 13:15

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.

simple color picker

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

locked color

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.

grid

share|improve this answer

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.

share|improve this answer
    
I would recommend kuler.adobe.com over colorbrewer. While colorbrewer doe shave scientific background, it is limit to usage within maps. –  rk. Jun 18 '13 at 14:22
    
Not maps only but data visualization. There is very useful function of choosing sequential, diverging and qualitative color schemes for the data of different nature. Kuler is more popular but has no such function. –  Alexey Kolchenko Jun 18 '13 at 14:28
    
I am familiar with the merits of colorbrewer, but, it is not for everyday usage. Also, it does not serve the purpose of light & dark colors while adding complexity by using 'sequential, diverging and qualitative' labels. –  rk. Jun 18 '13 at 14:38
    
To provide good UX, designer should work a little and choose colors carefully only once. Kuler rely on subjective designer's mind while colorbrewer guarantees objective (math-based) results. I am sure there are more user-friendly tools which provide objective result. –  Alexey Kolchenko Jun 18 '13 at 14:54

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.

Hue Saturation/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).

share|improve this answer

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:

Dropdown Color Chart

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.

share|improve this answer

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:

enter image description here

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.

share|improve this answer

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.

Color picker

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.