Ideal color palette for 24 colors?

Question

I'm making a simple collaborative whiteboard app just for fun and I originally had a color picker with all the colors but the few friends I showed it too said it was too much and they aren't artists and would prefer if there were just 16 or 24 "good" colors that they could pick from.

I found this page for an optimal 16 color palette but even this I don't think is necessarily ideal for an online painting app (probably would want more saturated/brighter colors for some of them). Also, this would be 24 colors.

I figure you absolutely need black, grey, white, red, blue, green, yellow, orange, brown, purple, pink like Wad suggests, and past that I suppose just varying shades of each, but I am not an artist nor an expert in color theory so I'm not sure how exactly to come up with such a palette, even after some googling.

What would be a good palette with 24 colors that would allow users to paint just about anything they wanted without thinking "oh I wish they had this color for this object"?

Answer 1

I would use there 24 Colors found in 24-pack Crayola Crayons.

red, yellow, blue, brown, orange, green, violet, black, carnation pink, yellow orange, blue green, red violet, red orange, yellow green, blue violet, white, violet red, dandelion, cerulean, apricot, scarlet, green yellow, indigo and gray

I'm sure some sort of research went into getting the most used colors they can into that pack.

You can use this link to get the HTML color codes of all Crayola Crayons

Answer 2

You are asking what 24 colors to use, but I think the bigger question is 'is there an ideal number of colors to even offer in the first place?'

Looking at a couple of the sketching apps on the iPad, you will notice they they use very limited palettes.

Paper, for example, has palettes of 7 colors:

Granted, Paper comes with a bunch of different palettes to choose from, but I think the key point here is that--at least for sketching--there's a certain comfort in having a defined set of just a handful of colors.

Bamboo Paper (one of my faves) also has a limited palette:

These are likely based on the fact that most folks, when sketching or wireframing with markers or pens, tend to have a limited set. There's good reasons for this, as the whole point of sketching is to get ideas onto 'paper' as fast as possible. Stopping to ponder which of dozens of colors to grab is a lot slower then having a nice solid set of 6 or so:

In conclusion, for a whiteboard app that is also collaborative I'd advocate a much more limited color palette than 24...and would suggest limiting it to something closer to 6-8 for the following reasons:

• It's a sketch app. Speed is the key, so make picking colors faster with a smaller set to choose from.
• It's collaborative. If you need to grab the 'blue' marker, there should just be one blue marker, rather than 6 shades of blue to have to pick through.
• Fewer colors means you can make them a) more distinctive and b) more cohesive.

If people find that simply too limiting, you could offer up the option where they could customize the 6 colors to anything they want, but I'd still push for a very limited set of colors to choose from when drawing.

Answer 3

figure you absolutely need black, grey, white, red, blue, green, yellow, orange, brown, purple, pink

This is my suggestion for your color options based on color theory that, should you go with this method, once you have your base set picked, should leave you with a min of 24 colors.

1. Set your base colors: These should be your basic colors and they should be in this order: red, orange, yellow, green, blue, violet. This base color group are your hues - a mix of the primary colors and complementary colors. Black and white should always be available, separately from your basic color values.

2. Add white and black: Now add tints and shades, to triple the amount of colors you have. Tints are color + white, or a lighter color. Shades are color + black, or darker colors. You could create 3 levels of white and black for each color, or simply allow the ability to increase or decrease the amount of white or black for each individual color or all colors as a set. If this isn't clear, search for tints vs shades on Google.

3. Add grey: Next, take your hues, and mix them with equal amounts of white and black. These are your tones. (Note that just as you can get different tints and shades depending on the amount of white to black you add, you can get the same thing with grey if you don't add white and black equally.) If this isn't clear, search for tints, tones, and shades on Google.

If you've followed along through this point, you will have quadrupled your colors to at least 24, if you just offer one hue plus one shade, one tint, and one tone for each base color.

4. For the color brown: Brown is a mix of different colors, so the final color you get depends on which colors you mix together. One way to achieve brown is to mix all 3 primary colors equally (red, yellow, blue) to create brown. Digitally, you can allow your users to select a set brown, or you can allow them to mix colors and create their own. This wikihow page shows mixing colors to create brown.

Ways to get even more color: If you choose to modify your base colors, such as making them all more yellow, or more blue, or more red, etc, this change would carry through all hues, tints, tones and shades. So, potentially, you could have your base set of 24 * however manyothe.

Opacity: If you offer the ability to change the alpha level - opacity - then you've potentially provided even more color and layering options for your users.

I am happy to help, and I hope this has helped. Here is a nice little site that explains the color wheel (base hues), and the tints, shades, and tones. http://www.craftsy.com/blog/2013/05/hues-tints-tones-and-shades/

As a general comment, though, I do feel that the content of this question is more suited for graphicdesign.stackexchange than UX.stackexchange, since graphic designers professionally deal with color significantly more than UX designers.

Answer 4

The best palette very much depends on the exact nature of your application. A drawing app for little children will require different and slightly more colors than a scientific collaboration app. The question does not indicate whether colors will be solid and whether they would apply to all kinds of virtual tools (like pen, brush, marker, pencil, crayon; background, border, text).

You might want to consider what people will probably like to draw or paint and which contextual colors they will need for that. Maybe that will include some color effects rather than actual colors, e.g. glitter, sparkle, shine, semi-transparent, opaque, pastel, neon, soften, smear, spray, camouflage, inverse, rainbow … This way, users might be able to mix colors intuitively on the canvas to get the blend they want.

That being said, here’s a made-up list for several common (non-solid) colors found in physical writing, sketching and highlighting tools.

• 1 pencil: anthracite/coal
• 5 classic pens: black, navy, blue, red, green
• 6 neon highlighters: yellow, orange, magenta/fuchsia, lime, cyan, violet
• 4 metallic gel pens: bronze, silver, gold, pink
• 2 rubbers: white, gray
• 6 pastel brushes: peach, lilac, salmon, ivory, blush, mint

Other scenarios afford semantic colors, e.g. text / foreground, background / canvas, emphasis, highlight, commentary, which then could be changed in an instant by switching palettes.

Answer 5

Well here's one! After finding your post, I decided to check google search for some examples. This is what I found.

Found at: http://www.clker.com/clipart-24-color-palette.html

The color hue "wheel" is 360° of the color spectrum. If we break it up into 24 sections we get 15° of change between each of the choices.

Personally, I think the colors are way to close to each-others neighbors to use in tandem, but it's the best example of what your looking for I think.

Palette 2:

Here is a color palette which features black to white options and 10 color choices with 50% intensity alternatives.

It's based on colors separated by 30° of hue (360°/12). It offers greater color diversity by increasing the separation of colors and intensities.

Below is another revision with darker colors, more suitable against a white background, and replacing the in-between green/cyan color with a brown choice.

Palette 3:

Here's the latest color palette concept. It contains brown and features darker tones for visual recognition against white backgrounds as the next two images show:

As you can see each color stands out from white visually. The white cell in the palette can be useful too, such as writing in a black region or one of another color, don't discount the white's usefulness. This should cover any color use cases for most situations.

Edit:

Added a new one with 4 less colors. I think the white optimized cyan options are nice, had to kill the baby blue, and ended up removing the magenta hues.

Answer 6

As a real-life-medium painter/sketcher, I don't think your aim to cover all possible needs of users with only 12/24 hues here is realistic. Even big colored pencils sets of 128 shades miss out some colors and have too many of those that are barely used.

Professional artists prefer to compile their own palettes manually by picking 6-12 shades depending on their topic and style. Companies like Faber-Castell/Copic even issue separate sets of 6 to 10 paints/pencils/markers that cater to different kind of work (like industrial sketching, fashion sketching, landscape painting and so on). For instance, a set for industrial sketching would include 3 shades of cold grey, 2 shades of warm grey, 3 shades of blue and a few warm tones. A set for a nature/landscape painter would focus mainly on green and earth tones. Whiteboard palette for diagrams & charts is, again, entirely different from this.

So what could help you with narrowing down the palette is

1. Deciding who are your app users and what do they need a palette for.

2. Then you can draw inspiration from the existing solutions and use the tools like Color.adobe.com and Paletton.com.

3. And then as you have chosen the palette of 5 at color.adobe.com, you can insert that into the Illustrator and expand it or use hacks like ColorPickingTool to derive palettes from the photos that have harmonic combinations.