https://github.com/notwoods/color-breakdown

Extract prominent colors from an image with this PWA tool.
https://github.com/notwoods/color-breakdown

color-picker extract-prominent-colors offline palette-api pwa web-workers

Last synced: 4 months ago
JSON representation

Extract prominent colors from an image with this PWA tool.

• Host: GitHub
• URL: https://github.com/notwoods/color-breakdown
• Owner: NotWoods
• License: mit
• Created: 2018-04-11T03:39:05.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T01:37:42.000Z (about 2 years ago)
• Last Synced: 2024-10-06T14:55:21.877Z (4 months ago)
• Topics: color-picker, extract-prominent-colors, offline, palette-api, pwa, web-workers
• Language: TypeScript
• Homepage: https://notwoods.github.io/color-breakdown
• Size: 4.93 MB
• Stars: 11
• Watchers: 2
• Forks: 5
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# 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](https://notwoods.github.io/color-breakdown) is [node-vibrant](https://github.com/akfish/node-vibrant)'s missing GUI, aiming to expose the configuration options of node-vibrant. node-vibrant ports the [Android Palette class](https://developer.android.com/training/material/palette-colors.html) 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](https://jakearchibald.github.io/svgomg/)!

## Feature requests

[Check out the issues](https://github.com/NotWoods/color-breakdown/issues) to see what's planned, or suggest ideas of your own!

## Developing

### Built with

- [node-vibrant 3.0.0](https://github.com/akfish/node-vibrant)

- [idb 2.1.3](https://github.com/jakearchibald/idb)

- Web Workers

- Service Workers

### Setting up Dev

Install dependencies:

```shell

npm install

```

Run dev server:

```shell

npm run build

npm start

```

## Licensing

This project is available under the MIT License.