How I Built a Tool to Extract Color Palettes from any Website Automatically

Hey Indie Hackers! I wanted to share a project I've been working on called colorize.design that helps designers and developers extract color palettes from websites automatically.

The Problem I Wanted to Solve

This project was born out of my own frustration. Whenever I came across a beautifully designed website, I wanted an easy way to grab its color palette without manually inspecting elements or using browser extensions.

Extract and Organize Color Palettes from Any Website

Colorize.design is a tool that automatically extracts and organizes color palettes from any website. Just enter a URL, and it pulls colors from multiple sources:

• Screenshot Colors: Analyzes the visual appearance of the page

• Logo Colors: Extracts colors from the website's favicon

• Code Colors: Parses CSS, HTML, and JavaScript to find color declarations

The tool intelligently groups these colors, names them, and lets you export them in various formats like CSS variables, SASS/SCSS variables, and design tool palettes.

The Technical Implementation

The core functionality of colorize.design is built around:

• Puppeteer/Headless Chrome: To load websites and take screenshots

• ColorThief: For color extraction from images

• Custom regex patterns: To find color declarations in code

• Color grouping using nearest color algorithms: To organize colors by similar hues and tones

The most challenging aspect was building robust error handling and resource management. Web scraping is inherently messy - sites can have infinite redirects, huge CSS files, or connection timeouts. I spent a lot of time building fallbacks and ensuring the system could recover gracefully from failures. Processing large websites with many assets requires careful memory management and I had to also work around cookie banners, popups, and dynamic content loading.

The Frontend Experience

I wanted to create more than just a color extraction tool - I wanted a complete workflow solution:

• Interactive Color Editor: Users can refine extracted colors to ensure the final palette matches their exact preferences

• Sharable Palettes: Each palette gets a unique URL that can be shared with clients or team members

• One-Click Downloads: Export in multiple formats including CSS, SCSS, SVG, and design tool formats

• API Access: For Pro users who want to integrate color and URL extraction into their own tools

What's Next

I'm currently working on:

• A Chrome extension for one-click extraction

• Enhanced API capabilities for pro users

Would Love Your Feedback!

If you're a designer or developer who works with colors, I'd love to hear your thoughts! What formats do you need? What parts of color extraction are most important to you?

Check out colorize.design and let me know what you think!