10 Years of Making Apps

Colors - The Color Picker, Color Scheme, and Color Palette Tool on Steroids

Colors App Theory

t1b

The Passage of Light

Around 1660 Sir Isaac Newton developed the first color wheel,
the first circular diagram of colors. Newton took the bar of colors created by the passage of light through a prism and transformed it into a segmented circle, where the size of each segment differed according to his calculations of its wavelength and of its corresponding width in the spectrum. The placement and size of the colored sections of Newton's circle suggested other mathematical and harmonic relationships. Over the centuries the color wheel evolved and changed many times and still today, people argue about different variations; like they argue about Mac vs PC.

t2

Yellow vs. Green

Colors is designed for us screen workers and pixel pushers. Therefore, color variations and schemes are based on, and calculated on, RGB and not on RYB. In other words: The basis of all calculations is the additive color model since we don't actually mix real pigments (subtractive color model) on our displays. And you can't argue with that.

t3b

The pure Math of Harmony

Colors effect our lives and we have strong emotional reactions to them. There is a reason the STOP sign has a red background or border, no matter if it is a German, a US, or a Chinese one. In addition, there are, of course, cultural backgrounds and our personal taste.
Just think of iOS 6 vs. iOS 7.

One can study color theory their whole lives and one would still learn something new every day, especially nowadays when there are thousands of different displays and display profiles, thousands of colors, and hundreds of different artificial lights involved.

Your #00f303 green on your screen differs from my #00f303 green on my display, and on my iPad it looks more like a #00f37d minty green. All our displays are calibrated and profiled differently and then there is the different lighting at your workplace and at mine; not to mention the different kinds of displays involved: AMOLED, LCD, Plasma etc.

But no matter your favorite color, no matter your display profile, the corresponding complementary color to your favorite color is calculated the same way as the corresponding complementary color to my favorite color. It's just pure math…

t4

Primary and Secondary

As said before, when you actually work with 'real' colors, with pigments, most color wheels are based on the primary colors red, yellow and blue. Since we just push pixels with our Macs, our color wheel is based on red, green, and blue.

If you mix one of those primary colors with another primary color, you will get a secondary color, like green or purple. If you mix two secondary colors, you will end up with a tertiary color. And yes, you can mix two tertiary colors and you will end up with…

t5b

Shades, Tints, and Tones

When working with 'real' colors there is another thing one can do: One can adde pure white, black, or gray to a color. If a color is made lighter by adding white, the result is called a tint. If black is added, the darker version is called a shade. And if gray is added, the result is a different tone. Of course, when working with a display and display colors, this works differently depending on the display technique involved. In most cases we change the amount of (back) light or how the single pixels are ordered. The result is the same for our eyes. Usually, when we use the word green or blue, we are talking about the hue.

When we use the terms light, weak, pale, dark, strong or -ish we usually mean the saturation of a hue (a color). A design that exists of colors with similar saturation levels is more pleasant to most eyes than a design that has lots of contrasting saturation levels.

Then there is the thing called chroma - or the purity of a color.
When there is no white, gray, or black in it, a hue (color) has a high chroma.

Most 'designers' do this by instinct. When they create schemes and palettes, they tend to avoid hues (colors) with similar chromas. When you think of chroma as brightness in contrast to white, it may make more sense to you. You can't (or better yet: shouldn't) mix a neon cyan with a neon yellow if you want the result to be readable and pleasant to the eye.

t6

Color Schemes

Speaking of pleasant to the eye: There are some basic color schemes, some basic formulas, describing how you can 'mix' different colors so that they will look good together and the result is considered pleasing.

t7

Complementary Color Scheme

Complementary colors are any two colors which are directly opposite each other. Complementary colors can be tricky to use, especially in large doses and you should never ever use them for text. And no, black and white are not colors.

t8

Split Complementary Color Scheme

The split complementary color scheme is a variation of the complementary color scheme. It doesn't use the complementary color but the two colors adjacent to it. The advantage of using it over the complementary color scheme is that it is not as 'harsh' and you usually can't mess it up.

t9

Analogous Color Scheme

Analogous color schemes use colors that are next to each other on the color wheel. You can't do anything wrong with such a scheme; they will always match. The downside of things that can't go wrong always is their disposition to boredom. If you want a scheme, a color palette, to 'stand out' you shouldn't use analogous colors.

t10

Triadic Color Scheme

A triadic color scheme uses colors that are evenly spaced around the color wheel, or in other words: Every 120 degrees another color. Triadic color schemes work best if you want a vibrant result but you should only use one main color and the other two only as accents.

t11

Tetradic Color Scheme

The tetradic color scheme is my favorite one. It makes use of four colors that are arranged into two complementary pairs. You can do anything with it and you must be a real color klutz if you can't create a nice design from it as long as you pay attention to balancing the colors out between warm and cool ones.