Ever wondered which color transition function to use to get from one color to another? Ever wanted to create a site without hard-coding all similar colors?

Cuttle solves this problem, by suggesting color transition functions. If you want your designs to be customizable via sensible color variables, you should check it out:

Cuttle interface

Source code and bug tracking is available on GitHub. The JavaScript API allows you to get suggestions programatically, see the README for more information.

How it works

Right now, the tool uses each known function to generate all possible colors from the source color. The resulting colors are then compared via Delta-E to the destination color, and the closest colors are presented to the user.

What's in a name?

Cuttle is shorthand for cuttlefish, a cephalopod which is great at changing colors by stretching pigmentation cells (chromatophores).

Tool origins

The idea for this tool originated from a problem we solved in Kendo UI. Each theme had ~250 LESS variables. It was abysmal to apply new colors to old themes. To solve this, we extracted a set of 10 variables from each theme and based all others on them. It was daunting to determine how to transition between each arbitrary color, so I wrote a Ruby version of this tool, just for the task. It appears that the problem is not unique to our case.

If this helped you, let me know by posting a comment!

Interested in becoming a better front-end developer?
Subscribe to the occasional newsletter.

Published

Back to Overview