PaintCode Power User: Library Colors

This post is a part of series PaintCode Power User.

One of the defining features of PaintCode is Library. It brings flexibility to your drawings and makes it trivial to experiment with your designs. In this post, I will show you some tips for working with Colors.

Creating New Color

First step to working with colors is to create one. There are many ways to create new Library Color, here they are:

Dragging Color ConnectionDragging Color Connection Fill MenuFill Menu

Editing Colors

When you edit a color in PaintCode, all shapes and library items that use this color are updated. That’s the power of Library.

Color EditorColor Editor Touch Bar for Editing ColorsTouch Bar for Editing Colors Color Usage DotsColor Usage Dots

Derived Colors

PaintCode has a quite unique feature that allows you to create colors that are based on other colors. In Color editor, you might notice the Base Color popup which offers all other color from your Library. Once you pick a base color, the editor changes significantly.

Derived Color EditorDerived Color Editor

For a derived color, you need to pick an operation and its amout that should be applied on the base color. Here is the list of operations with their effect:

With this mechanism it is very easy to derive different shades of a single tint color. It allows you to create realistic gradients and shadows, while preserving the connection to the base color. Change the base color at any time and all derived colors, gradients and shadows will change too.

Colors are the foundation of visual design and we use them all the time. I hope these tips will make your workflow more effective and in the next post I will focus on Gradients.


To learn more about Library Colors, read our Colors documentation or watch Dynamic Colors video.