Cherangi, My journey to name the color variables :)

Amin Shariati
Oct 22, 2017 · 4 min read

How did it all start

As a frontend developer, I usually deal a lot with color names on my projects. So when I want to start a project, I typically create a SCSS file and name it colors, then I define all the color variables in it.

How my variables in color.scss looks like

So the problem is when I want to name these variables. It’s easy for the primary colors but when it comes to a big range of color names I have no idea what to call them? Well, I only know Red, Green, and Blue 😎 (OK, Just kidding… I recognize more color names… 😉).

So this would take about 15 minutes of my time just to choose a proper name. Such a waste of time 😔.

I was sure there had to be a better way. So I searched a bit and found some helpful websites that helped me to decide color names, such as http://chir.ag/projects/name-that-color

The tools were nice and beautiful but I didn’t like to leave my coding environment and to switch to another app just to find a name. So I decided to write a small node module to do that for me.

And “Cherangi” was born.

Cherangi (Che Rangi?) is a Farsi (Persian) sentence which means “What color?”

Cherangi node module in action

Installation

$ npm install -g cherangi

Usage

$ cherangi #fcfcfc

results

{ status: 2,name: 'Brilliance',hex: '#fdfdfd',delta: 0.34559411394170403,message: 'Not perceptible by human eyes' }

How did I develop Cherangi

To get started, The fastest way for me to get the names will be through the terminal; I can access terminal within Visual Studio Code (Which is my primary code editor). And Node modules can be executed as CLI, so I decided to make cherangi as a node module.

The source code can be found here 👇 on my github page.

So creating node module was simple I had already built few other modules, and I immediately started to write the codes.
First I needed a function to read the input and sanitize it to be a HEX color value.
Then the next challenge was the names. Well, apparently I couldn’t name the colors, so I needed a library of color names to help me.

The first thought was to search the web for names and extract them. When I started to do so, I found a great github project by meodai who had already built what I was looking for.

So I used his color library (16K+ Color 🌈 names available 😎).

OK now lets face the next challenge, The tool had to read the input color and match it against the color library. if it was a match then I needed to show the name but what if no match were found?

If no matches were found the best way was to show the closest color in the color library that matches the input color.

But how? After a bit of research I learned more about color systems by reading about them (I love coding … isn’t that awesome? You learn so much while you want to create something).

So what I learned was, I needed to find the distances between these two points; hence I had to change the RGB color system to LAB color system to be able to calculate the distance using the Delta E algorithm.

Thanks to Zachary Schuessler for the great article about Delta E, I managed to write the function to do the calculation and find me the closest color.

The beautiful thing this algorithm was that it could return the delta itself which I modified it a bit in my function and called it status.
Now status value could even say how far the two colors are from each other and how detectable it is for human eyes 👀. Voila! 🎉 that’s so cool, Now I can even say can a human detect the deferences of two colors or not.

So problem solved now I had a nice function to do all the calculations for me.

deltaE1994 Function

mathColor Function

Now I could read the input, match it against the color library and if no match was found a closest color was selected and the following object was sent for the user:

{ status: 2,name: 'Brilliance',hex: '#fdfdfd',delta: 0.34559411394170403,message: 'Not perceptible by human eyes' }

And that’s all folks 🙂 the module is ready. I hope you like it.

Please leave me your comments below so I can enhance this tool further.

Very soon I’ll be writing about my journey in creating this into a Mobile 📱 app.

Cheers!

Netscape

A community dedicated to those who use JavaScript every day.

Amin Shariati

Written by

Front-End Developer who Enjoys photography and dealing with latest libraries and frameworks in Javascript and CSS.

Netscape

Netscape

A community dedicated to those who use JavaScript every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade