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.
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.
