Dear Adobe Color

(A breakup letter)

When Adobe Color first came around 2009 I wanted to like it. I really did. But every time I used it, I came away feeling frustrated with no colors for my project.

For starters, it has too many color options. I don’t want the option to pick every color in the universe, which is what it presents you with:

I’m better off just thinking up a random hex code color and trying that.

The interface is wonky too. I think I’m a fairly savvy internet user but it confuses even me. What is the point of moving these handles:

It looks like a rave in your browser.

Explore tab

There are collections of themes by made by users. And some of these are o.k. But I generally don’t trust the wisdom of the crowd to pick colors for me. That doesn’t work in Fashion, Art, or Design.

Nor does it work for colors:

Starting from Scratch

Ultimately I decided to build the tool that I wish existed. (Spoiler alert: its this color picker ). All of the color suggestions are based on color theory. You pick an initial color relationship (complementary, triad, etc) and the results after that are sorted accordingly.

All of the results are hand-picked. Some colors are made by me, and some were sampled with permission from talented Illustrators like Coen Pohl and Daniel Triendl:

You don’t have to use their exact colors, rather they can be a jumping off point for your project.

Building the interface

At first, I tried to design the interface so that clicking the right arrow below would lead to color wheels beyond the first five based on color theory. But this felt clunky. There were six different elements competing for attention:

But it was too busy. After taking a step back, I realized the most essential elements were:

• 1. The arrows for toggling back and forth
• 2. The name of the current color wheel

The previous and upcoming colors were nice to know, but not essential. If it meant having a cluttered UI it wasn’t worth it.

After messing around a bit, I came up with this solution:

Here you just click to move between color wheels. No more buttons underneath. Now there are only three elements to look at. Two arrows, and the name of the current wheel. One principal of design is that if two elements are close to one another, it implies a relationship. This solution works well because of the close proximity of the arrows to the wheel. The user groks that clicking the arrow will change the wheel.

This is a better solution.

In the end, I ended up with a color picker that I really liked. Give it a try and let me know what you think!