DEV Community

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

Posted on • Updated on

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

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 browsers extensions, but the result wasn't right. We decided my work partner and me to build that tool. So we spent 14 days from prototyping into making https://alwane.io.

Sketching Alwane Components

Alwane Tool Wireframing

alwane.io is a web-based tool giving you the ability to extract colors from a website URL or an existing CSS code, regroup/order colors, then generate a palette including a CSS/Sass file. A simple and handy tool to build your next project's colors, get inspiration, and examine your website's color palette.

Spotify Code Color Palette

Tool Description

It's a simple web application to help you generate palettes for your projects. It uses a color sorting algorithm to gather colors from a website's CSS or any other existing CSS code and regroup them into color classes.

You can then order these colors, generate a CSS or SASS code, and start using it in your project. The tool also offers some other useful features:

  • Colors can be extracted from an existing CSS code (the one used by the website) or from any other CSS code.

  • Colors can be sorted and regrouped from a list of Hexadecimal codes.

  • Colors can be saved in sets: you can therefore create multiple lists of colors so that you can easily manage them.
    This is incredibly convenient when each set contains colors from a different website or project, and you want to keep track of everything separately.

  • You have complete control of the pallet, where you can remove one color or a group of colors.

And for how we tackle color sorting

We first extract the code 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.

I hope you like the tool. I’d be happy to answer any questions, and I welcome your feedbacks.

Top comments (4)

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?