DEV Community

Cover image for We build a tool that identifies colors from a website URL and generate a CSS/Sass code palette

We build a tool that identifies colors from a website URL and generate a CSS/Sass code palette

Arbaoui Mehdi on January 09, 2022

As a Frontend Developer, I always asked how can I get a code color palette of a website without reaching into the dev tools, so I tried multiple br...
Collapse
 
itwondersteam profile image
itwondersteam

nice tool! the css snippet is useful!
Thanks for the creating it.

One thought is if this tool is able to tell the number of times a particular color is being used, as some of the colors only used once or twice in the whole page.

Collapse
 
ta9i profile image
Taki eddine

verry good job ♥
is it open source!
you also did not talk about the most important part 'the development jorney', like technologeis and how you are getting the data from the website

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi • Edited

It's not an open-source project!

And for how we tackle colors sorting:

We first extract the colors by analyzing the code and pulling hexadecimal/rgb/rgba codes; as a starting point, the difference between each color is calculated using the Delta E CIE 2000 algorithm to match the colors list as closely as possible.

We used Delta E as a formula that defines color difference which measures the distance between two colors in terms of their coordinates in a perceptual color space such as CIELAB or CIELUV; we used it to quantify how different two colors are. It's defined as:

∆E = (ΔL / Δa)² + (ΔC / Δb)²
Enter fullscreen mode Exit fullscreen mode

Where:

ΔL = Δa = Δc = the change in lightness, from one sample to the next, throughout the entire color gamut.

Thank you for your feedback!

Collapse
 
flashsplat profile image
Chris

This is really cool and kind of what I need for a project I'm working on. Any thoughts of making it accessible via API? Pass it a URL and it return a list of colors?