Gradients!

A color exploration of gradients

I suppose the genesis is a game called I Love Hue. You are presented with a grid of gradient colors which is then mixed up with the goal to re-assemble the gradient "puzzle".

Process

The first step was to find a way to get what I needed: each individual color between two colors of x length. Of course, there are a few npm packages and I'd settled on gradient-color. I'd also looked at javascript-color-gradient because, TypeScript, however ran into issues using it.

Update: I'd found tinygradient and found it to be a better fit. It's sole dependency is TinyColor and is largely based on that API.

Which is quite permissive "which is meant to make typing a color as input as easy as possible."

Essentially you create a 'tinygradient' and then call function to generate the desired number of colors in that gradient.

const gradient = tinygradient(['#fff', '#000']);
// RGB
const gradientColors = gradient.rgb(10);

What's nice here is that you have all the functions of TinyColor at your disposal. I especially liked that I could validate a string to see if it was a valid color and if not, provide a default. From there, you can loop through the array and call the function that suits your needs. In my case, I relied on toRgbString().

I started with simple horizontal lines which turned to a circle and then just began tweaking numbers to find interesting combinations. Ultimately I wanted to have a grid that would find all colors from the 4 corners which was a fun process to figure out.

Variations

Once I had the process down, I wanted an easy way to change colors to play. Using the URL was an obvious choice which then led to also branching out to 'type' (circle, vertical, horizontal) as well as the number of 'stops' for the gradient.

You can play with the URL structure (/stops/hex/hex) by clicking into each 'type'.

Have fun!

Todo

1. Add variables to the grid
2. Move to tinygradient
3. Figure out TS issues with javascript-color-gradient