We build a tool that identifies colors from a website URL and generate a CSS/Sass code palette
Tags: css, sass, webdev, uidesign
Published: 2022-01-09 20:44:08

---
title: We build a tool that identifies colors from a website URL and generate a CSS/Sass code palette
published: true
description: A web-based tool for extracting colors from a chosen website or an existing CSS code; it also regroups/orders colors and gives you, in the end, a CSS/Sass colors palette.
tags: #css #sass #webdev #uidesign
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n780f5psakvohjzpv9ab.jpeg
---

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6v312sgblhiob87ufwj.jpg)

![Alwane Tool Wireframing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6geo5z4w8x15wz08kaxo.jpg)

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

![Spotify Code Color Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jnx6i5pglxxaqptfs44.gif)

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