Aug 25th — 2017

I built a Tachyon color generator
colorgen

Link to prototype

When working with brand colours I always found it a bit messy to simply guess the colors in a color palette. Colours shouldn't be made up out of the blue (heh). They should be thoughtfully chosen based on a set of principles. Think hue rotation, darkness, lightness, brightness, saturation and many more color parameters.

colorgen image

When building design systems it's important that every UI element has a purpose and is build with a certain logic in mind, and it should be the same for colours.

With this problem in mind I developed a palette generator.

Enter any color HEX or color name and it will generate an aesthetically pleasing palette that will complement the key color. The colours that are generated are hue rotated, darkened or lightened accordingly to be a perfect match with the key color that was entered.

Use the generated colors for hover effects, branding elements, marketing and those obscure edge-cases where you need that lighter version of the brand color.

At this time there is only one set of color principles in place. But in the future I will add custom color parameters, where designers can fine tune how the color palette is generated. Until then I need to learn more about VueJS.