Color Grid

Color Grid screenshot
DemoGitHub

Description: Create a matrix of colors by choosing four colors and then splitting up the distance between them.

Why I made Color Grid: One day I had a realization: if colors can be represented as numbers, then the color between two colors is just the average of the two colors. I thought a cool way to visualize this would be to split the distance between colors using a slider. Taking this realization further, I then decided to make a color matrix using four colors. As you split the distance into more and more colors, it starts to look like a color gradient - conceptually, this is like an integral taken between two colors.

What I'm proud of: I think this is some of my very best design work. Another cool thing is, instead of having four separate color pickers, I have one color picker that controls the color that you tap - less bloat in the code and conceptually kind of cool to think about.

Date: July 2019

Tech:

React logoNode.js logoWebpack logoBabel logoES6 logoSass logoJavaScript logoCSS3 logoHTML5 logo