Hey dev.to!

I’m Nestoras, and I wanted to share a project I’ve been working on called colorize.design. It’s a tool that helps designers and developers extract color palettes from any website in an easy and automated way.

The Problem I Wanted to Solve

As a designer, I often find myself stumbling upon beautifully designed websites and wishing there was an easier way to grab their color palettes. I didn’t want to manually inspect elements or use browser extensions. So, I decided to create a tool that would automate this process and allow me (and others) to quickly extract color palettes from any website.

How Colorize.design Works

It’s simple: just enter a website URL, and colorize.design will generate a color palette based on the site’s design. It pulls colors from several sources:

  • Screenshot Colors: Analyzes the visual appearance of the website to find the dominant colors in the screenshot.
  • Logo Colors: Extracts colors directly from the website’s favicon.
  • Code Colors: Parses the CSS, HTML, and JS files to extract color declarations (including background colors, text, etc.).
  • 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 Tech Behind Colorize.design

The core functionality of the tool is built around a few key technologies:

  • Puppeteer/Headless Chrome: To load the website and capture screenshots.
  • ColorThief: A library for extracting the dominant color from images.
  • Custom Regex Patterns: To parse and find color declarations directly from the website’s CSS, HTML, and JavaScript files.
  • Color Grouping: I use nearest color algorithms to organize the colors by similar hues and tones, so you don’t end up with redundant or similar colors in the palette.
  • A big challenge was handling errors and managing resources. Web scraping can be messy with infinite redirects, huge CSS files, and dynamic content loading. So, I spent a lot of time building fallback mechanisms to gracefully handle these issues.

Frontend Experience

In addition to the core functionality, I wanted to ensure the frontend experience was smooth for designers and developers:

  • Interactive Color Editor: After extracting the palette, users can tweak and refine colors to match their preferences.
  • Sharable Palettes: Each palette is given a unique URL that you can easily share with clients or team members.
  • One-Click Downloads: You can export palettes in various formats including CSS, SCSS, SVG, and design tool formats like Sketch, Figma, and Adobe XD.
  • API Access: For Pro users, there’s an API to integrate the color and URL extraction into their own workflow.

What’s Next

Right now, I’m working on some exciting new features:

  • A Chrome extension for one-click extraction directly from your browser.
  • Enhanced API capabilities for Pro users, including more customization options.

Would Love Your Feedback!

If you’re a designer, developer, or anyone who works with color, I’d love to hear what you think about the tool! What formats do you need? What’s the most important feature for you in a color extraction tool?

Check out colorize.design and let me know your thoughts! 🚀