Geenes: The color scale tool for designers and coders

Geenes - Vue.js Powered Color Scale Tool

The color scale tool for designers and coders called Geenes can help people who need to generate and export color scales to build their UI. It features a preview of a mobile UI to see live changes on the color scales the have chosen.

Steps to create your own color scale

1 of 3 - Adjust the background

The background is a gradient and is used to pick every single variant. You can tweak its settings to achieve the color palette you have in mind.

Darkness and lightness With these commands you can define how dark is the darkest color and how light is the lightest. Bear in mind that a darker color is not made by overlaying black but adjusting its lightness. The result feels more natural in this way.

Hue range Some tints are perceived darker or lighter than others. For example starting from orange you can shift it toward red to make it darker. Or yellow to make it lighter. Also playing with the hue can lead to more vibrant and interesting scales!

2 of 3 - Draw Bézier curves

The white dots represent all your colors on the scale. You can move these points by drawing the bezier curves on which they are attached to.

The main points on the curves First of all the square shape is the color from which you want to generate other shades and for this reason it cannot be moved. The first and the last point (drag icon shape) can be moved freely. You may not move any other point directly.

The handlers To better adjust the shape of the curve you can use the handlers. Note that by doing this you can adjust the distances between the points in a non-linear way. Which is exactly how we perceive the differences between colors.

3 of 3 - Ready to export? Aside you can see the color scale updated in real-time. You might see a red warning icon, in case two colors are too similer, and you won’t be able to export them both.

Note that you can also change the total number of variants.

When you’re done just click on the export button. You will find many handy export options both for your code or your sketch file.

Created by @GginiDesign.