2

For a user interface I need at least 10 distinctive perceived hues, to get a palette with these criteria:

  • The palette should have at least 10 hues and 4 lightness levels for each hue (dark, medium-dark, medium-light, light).
  • Each of the hues should have the same perceived distance to the next one.
  • Each of the hues should have high saturation (i.e.: brown shouldn't be an option, since it's a desaturated orange). Grey, white or black aren't options either.
  • Each lightness level should be perceived as the same across all of the hues (ie: dark_blue should be as dark as dark_yellow).
  • If each hue can be easily named, that would be a nice addition (i.e.: red, orange, yellow, etc.).
  • Dark and medium-dark lightness should have good contrast with white
  • Light and medium-light lightness should have good contrast with black

I have made this test, which is far from what I need (i.e. yellow and gold are closer than turquoise and blue), but it can give an idea of what I'm looking for:

12 hues color palette test

Is there a palette that fits these criteria? If not, is there a way to achieve this or something similar to this?

Edit: Changed the question from "12 colors palette" to "At least 10 colors" since I don't need specifically 12.

Improve this question
5
  • Do you need to compensate for colorblind viewers?
    – curious ♦
    Sep 20, 2019 at 15:51
  • 1
    Not really, since there are other visual clues (icons + colors)
    – serknor
    Sep 20, 2019 at 17:01
  • Related graphicdesign.stackexchange.com/questions/108733/…
    – Rafael
    Sep 20, 2019 at 20:08
  • BTW it's vermilion not bermillion.
    – Billy Kerr
    Sep 16, 2020 at 14:04
  • Thanks for the clarification @BillyKerr, I mixed it up with the Spanish word.
    – serknor
    Sep 22, 2020 at 14:48

3 Answers 3

Reset to default
6

The basic color wheel has 12 colors:

enter image description here

This is the result displaying these 12 colors in a row, adding a darker and two light rows:

enter image description here

The same palette modifying the yellow, cyan and magenta brightness to match the tonal values with the other colors:

enter image description here

I think following a couple of basic steps as described, you can get a quite approximate palette to the one of the question, where only small modifications will need to be made, for example in the dark red or blue.

Note: the images of this answer only seek to show an approximate result of the complete palette. I used two rectangles 30% and 50% white screen mode and a 40% black multiply mode rectangle for the lightest and darkest rows respectively and three 25% black multiply mode rectangles over the yellow, magenta and cyan.

Improve this answer
3
  • 1
    To clarify, what process did you apply to modify the yellow, cyan and magenta in the second palette?
    – Joshjurg
    Sep 20, 2019 at 14:59
  • 3
    25% black multiply mode over the colors
    – user120647
    Sep 20, 2019 at 15:05
  • Thanks for your answer Danielillo. The resulting palette is nice, and I will have it in consideration. I do find that some of the colors are, at least to me, closer to each other regarding hues, than others. For example, cyan vs light blue seem closer (to me) than red vs orange. That's why I was looking for something like a munsell or cielab approach, or other method that I'm not aware of. That's why I didn't start from a color-wheel like rgb or cymk. Also, to correct lightness you have to do it by your personal perception which can be different from others. Thanks for your time and insight
    – serknor
    Sep 20, 2019 at 17:12
1

Take a look at Colar: it is a huge palette with perceptual adjustments. It seems to fit all your requirements and is a good base for both UI and design/illustration work

Improve this answer
1

Matplotlib

Just to add a link to a IMHO quality resource is the article Choosing Colormaps in Matoplotlib from the Python universe. The package is noteworthy for its research for producing free perceptually uniform sequential colormaps (Viridis, Plasma, Inferno); but also for your requirement of 10 categorical colors they have something to say with their qualitative colormaps:

Matplotlib qualitative colormaps (12 palette plots)

tab10 does not satisfy your criterion of no desaturated colors though. Set3 (minus grey) might yield input for a different candidate list of hues to use.

Turbo

And, by just following one of the links in the above article, I can throw in Google's entry to the topic of colorful rainbow-palettes: Turbo, a perceptually uniform evolution of Matlab's infamous Jet colormap:

Colormaps Turbo and Jet compared

Turbo subset

I have created a small gist (Python) that takes equally spaced colors out of the continuous turbo colormap; number and offset of those can be customized, here for 12:

Color palette made from turbo colormap

Improve this answer
3
  • I think this is a good approach. I have no python knowledge, but is there a way to quantize Turbo into 12 colors and then get the approximate rgb values?
    – serknor
    Sep 22, 2020 at 14:34
  • @serknor: if you can digest decimal RGB values ([0.0-1.0] instead of [0-255]), this Gist by fmiorelli contains the raw data for turbo. Simply subsampling every n-th row should do the trick to retreive equidistant colors.
    – ojdo
    Sep 28, 2020 at 9:06
  • 1
    I did it, it gave me a nice palette, but there's a problem that I should have seen earlier. Turbo isn't 360º. It jumps from red to violet, it doesn't loop. There's no Crimson color in there. So it doesn't check for the 2nd requisite "same perceived distance".
    – serknor
    Sep 29, 2020 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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