View Project
colorize.design 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!
Built with
