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.

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.

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)²

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.