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
add comment

5 Answers 5

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.

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
add comment

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
add comment

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
add comment

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
add comment

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
add comment

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.