Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Color Breakdown

Extract prominent colors from an image to create more visually engaging designs and apps.

Good visual design is essential for a successful app or site, and color schemes are a primary component of designs. Color Breakdown breaks down an image into the most prominent colors so you can use them in your designs. For example, you can create color-coordinated title cards for a song based on its album cover or adjust an app's toolbar color when its background image changes. Six main color profiles from the bitmap are extracted to help inform your design choices.

When you're ready to build your design, quickly copy colors by just clicking on the palettes for each image. Save a list of previously processed images so you can refer to other color swatches easily.

Color Breakdown is node-vibrant's missing GUI, aiming to expose the configuration options of node-vibrant. node-vibrant ports the Android Palette class to JavaScript, allowing you to extract prominent colors from images. Use these colors in your own designs to create more visually engaging designs and apps.

Inspired by SVGOMG!

Feature requests

Check out the issues to see what's planned, or suggest ideas of your own!


Built with

Setting up Dev

Install dependencies:

npm install

Run dev server:

npm run build
npm start


This project is available under the MIT License.