Palettte App

The advanced color palette editor

Palettte App is a free design tool that helps you to build, analalyze and finetune color palettes.

Import palettes via JSON or start from scratch, tweak them and export them again to JSON, css or via plain text into other design tools.

I designed and developed this tool with react and gatsby.

Why yet another color palette tool?

Most existing apps generate new color schemes based on different geometrical concepts such as complementary colors or colors that are layed out in a triangle or another shape in a certain color space.

The resulting color schemes might be suitable for logos or classic graphic design, but they rarely work for UI Design, where most of the time you need to work with a few base colors (that are often set by brand guidelines) and a whole range of different variations and shades.

Steve Schoger describes the creation of such a color palette quite well:
Building your color palette

Another great article about this is from Eric Kennedy:
Color in UI Design - a practical Framework

What Steve doesn't describe exactly is how he finds those colors:"...you just need to fill in the gaps in between", "Trust your eyes, not the numbers."

This is where palettte app comes into play:

• Build smooth color schemes that flow from one color to another
• Finetune hue, saturation value gradients of your palette and of each color swatch individually
• Import, analyze and edit existing color schemes, find errors or automatically find the most similar colors from a new palette to a list of legacy colors from your codebase

Building a new color palette

To create a new color palette, click on the plus icon in the left sidebar and delete all sample colors by clicking on backspace. You can now add your base color by clicking "add swatch" or hitting the spacebar and entering the HEX-Value in the right sidebar.

When adding more swatches you can see that three curves form: one for the hue, one for the saturation and one for the value (=brightness) of the colors.

A basic palette for UI Design consists of 8-10 shades where the hue stays the same for all shades, the value goes up and the saturation goes down smoothly as the colors get lighter.

Analyzing and editing existing color palettes

If you already have a color palette and you want to know if it can be optimized, import the colors one by one or write the palette down in the special JSON format (example can be seen whan clicking on import) and batch import your palette.

Here is the palette Steve Schoger uses in his example in Refactoring UI:

As you can see there is a little ditch in the value envelope curve and the saturation curve is round in the beginning and falls off in a linear way suddenly, nothing too serious but it's clear that Steve has chosen his colors by "trusting his eyes" and not his numbers ;).

You can edit lines by dragging the handles around or by selecting two handles and clicking on "interpolate" (only linear interpolation is supported at the moment).

When you are happy with your result, simply export your new colors again.

Mapping old colors to new ones

You will often somehow find yourself in a situation where you have built a wonderful new color palette, but your legacy code does not reflect the beauty of it as a lot of different shades and colors have piled up over time.

With palettte app, you can import those (legacy) colors and find the most similar colors from your new palettes automatically. You will also immediatly spot when colors are too far off, and you need to introduce more colors in your palettes.

It can also be useful if you want to add shades to your palette and need to rename all existing colors.

Feedback welcome

If you have ideas how to make this tool better, please let me know via Twitter.

Update: Steve Schoger and Eric Kennedy are now both using palettte.app.