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.
Top comments (5)
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.
really nice tool. I would add to it a rest API so that people will be able to use is directly from code.
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
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:
Where:
ΔL = Δa = Δc =the change in lightness, from one sample to the next, throughout the entire color gamut.Thank you for your feedback!
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?