Working with color programmatically

tl;dr
🎨

It's been nearly two years now since I nurtured a keen interest on color and its mathematical nature. I'm not a math nerd (don't get me wrong) but I was amazed by the way one could get colors of a certain look by applying a specific range of values to the channels responsible for achieving the desired effects.

Most of this effort has been inspired by material I scraped from the open source community. I stand on the shoulders of giants.

Color has a set of attributes or properties that we can use to describe to the computer how a certain color is supposed to look like. These properties (in this scenario) are hue,saturation,lightness and opacity . We'll refer to them as channels when we're dealing with them in code.

These properties achieve different effects if we apply deliberate changes to their values. For example a color with a low value on the lightness channel will appear darker (no surprise on that of course). By keeping the lightness channel clamped whilst tweaking the values of the hue and saturation channels we achieve colors with a certain look. For example pastels have high saturation and low value and are easily reproduced in the HSV color space.

In huetiful-js there's a pastel() utility that returns the pastel version of a color from a randomised range in the responsible channels in which we can obtain pastel colors:

 import { pastel } from "huetiful-js" 

 let myPastelBlue = pastel("blue") 

 console.log(myPastelBlue) 

 // "#030361ff" 

You can even pass it to Array.map and iterate it over a collection of colors and get an array of the pastel versions:

 let sample = [ 
 "#00ffdc", 
 "#00ff78", 
 "#00c000", 
 "#007e00", 
 "#164100", 
 "#ffff00", 
 "#310000", 
 "#3e0000", 
 "#4e0000", 
 "#600000", 
 "#720000", 
 ]; 

 let samplePastels = sample.map(pastel) 

Okay, but what if we wanted colors from a certain hue range ?

 import { filterByHue } from "huetiful-js" 

 let sample = [ 
 "#00ffdc", 
 "#00ff78", 
 "#00c000", 
 "#007e00", 
 "#164100", 
 "#ffff00", 
 "#310000", 
 "#3e0000", 
 "#4e0000", 
 "#600000", 
 "#720000", 
 ]; 


 let filteredColors = filterByHue(sample,30,120) 

But our customer is picky and wants the colors sorted according to hue in ascending order:

 import { sortByHue,filterByHue } from "huetiful-js" 

 let sample = [ 
 "#00ffdc", 
 "#00ff78", 
 "#00c000", 
 "#007e00", 
 "#164100", 
 "#ffff00", 
 "#310000", 
 "#3e0000", 
 "#4e0000", 
 "#600000", 
 "#720000", 
 ]; 


 let filteredColors = filterByHue(sample,30,120) 

 let sortedColors = sortByHue(filteredColors) 
 // 

What about lightness,luminance,saturation and (even) temperature ? Yeah you can use those and more as filtering and sorting criterion too

i think you can see where I'm going with this (hopefully). By encapsulating properties of colors inside functions we can create flexible palettes that we can fine tune using utilities.

There's even a function that can tell if a color is grayscale or not (go test it out if you think I'm lying. If it fails do a PR).

You can check out the repository on GitHub here or as a package on npm

Or just drop an email and let me know what you think. Or even a simple hello.

May the FOSS be with you👽🛸.