colorize.design

Generate color palettes from any website.

Visit Website
March 11, 2025 Just launched on Product Hunt

I just launched colorize.design on Product Hunt 🎉 (check it out here)!

Colorize is a tool that extracts color palettes from any URL in seconds. Whether you're a designer, developer, or just looking for inspiration, you can grab the key colors from websites, images, or screenshots with ease.

Why I Built It:

I wanted a simple, no-fuss way to analyze and extract colors from websites. I noticed existing tools were either too complex or lacked API access so I built one that’s fast, clean, and also offers an API for automation.

What You Can Do with Colorize:

  • Instantly generate color palettes from websites 🌈

  • Download palettes for your projects 🎨

  • Use the API to integrate with your workflow 💻

Would love your feedback

Launching solo is exciting but tough any feedback or suggestions are super welcome! Would love to hear what you think.

Comment

March 5, 2025 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!

1 Comment

  1. 1

    Awesome tool, well done! Has saved me so much time!

About

Colorize.design 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.