notwoods / color-breakdown

Extract prominent colors from an image with this PWA tool.

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!

Developing

Built with

• node-vibrant 3.0.0
• idb 2.1.3
• Web Workers
• Service Workers

Setting up Dev

Install dependencies:

npm install

Run dev server:

npm run build
npm start

Licensing

This project is available under the MIT License.

color-breakdown's Issues

Support File Share Target API

Sharing images is coming soon to the File Share Target API. Add code to the service worker to handle a POST request and call the add image code.

Support node-vibrant options

Options:

• colorCount - amount of colors in initial palette from which the swatches will be generated
• quality - Scale down factor used in downsampling stage
• maxDimension -The max size of the image's longer side used in downsampling stage

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

You can mention @dependabot in the comments below to contact the Dependabot team.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

You can mention @dependabot in the comments below to contact the Dependabot team.

Split out list and palette view code

To help improve load times, it's better to have seperate code for the list (left side) and palette (right side). This way the larger node-vibrant library can be loaded later on with the palette.

Restricting number of swatches?

Hello! I'd love to know if it is possible to restrict the palette to a certain number of colours.

Thank you

Expose other swatch values

• hsl
• rgb
• hex
• title text color
• body text color

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

You can mention @dependabot in the comments below to contact the Dependabot team.

History

Save previous images and palettes, and allow them to be reloaded. Need to use idb to store the history and canvas to convert to an image blob.

Image from URL

Allow the user to input an image URL instead of uploading an image. Requires a server to load the photo.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

You can mention @dependabot in the comments below to contact the Dependabot team.