css-palette-logo

Transform your website's stylesheet into a beautiful CSS grid color picker/palette

Why did I create CSS Palette?

Did you ever get lost in your project's theme.css to find that exact shade of green? OR Did you ever wonder what are the colors your favourite brands use? OR Spent hours trying to figure that one shade you saw on a website and wished to use it in your next painting?

I, definitely did!

I'm sure you did too. As developers and designers, we deal with colors everyday, so shouldn’t reusing colors from our favourite projects or stylesheets be easier than inspecting the DOM every single time?

To fix this problem, I built CSS Palette, an app which lets you transform your website's stylesheet or URLs into beautiful, copy paste ready color palettes. Now, I am able to save any color from any website or painting in my palette and reuse them whenever I want.

How does CSS Palette work internally?

When you enter an URL, our crawlers scrape your website's source to find out all the stylesheets it has linked to and then after compressing them, send to our css parser (the same parser we send your code to when you type in your stylesheet).

Inside our parser, we sanitise and process your stylesheet with PostCSS to extract out the colors from your code. Once we have extracted the colors, the colors are sorted with HSV based sorting to make it visually appealing and then the color palette is generated for you.

Sorting colors is an incredibly challenging task. I found this great article on Color Sorting by @AlanZucconi which is a recommended read if you want to try out color sorting ever.

Do you want to discuss ideas?

Hey I’m Siwalik 👋!

l love building tools like CSS Palette for the internet 🔥. I'm super excited for your reviews, tweet me @siwalikm

Prefer discreet over loud? Send me an email here. 🎉

Happy Coloring 🎨