color-catcher

Color catcher is npm package for browser which extracts the colors that occur most number of times in an image. As input paramters it accepts:

imageURL - path to the loaded image
n - number representing first n most frequent colors from the image
blurFactor - how much you want to blur the image. The more image is blurred the less precise function is. (optional)

Additionaly it provides functions to get different color palettes based on provided color:

• getComplementaryPalette
• getMonochormaticPalette
• getTriadicPalette
• getTetradicPalette

Install

npm install color-catcher

Usage

import { getMostFrequentColors } from "color-catcher";
const imageSrc = require('./assets');

 const colors = await getMostFrequentColors({
      imageURL: url,
      n: 1,
      blurFactor: 0,
    })

Output

Array of colors with the followed properties:

[
 {
     rgb: { r:number, g:number, b:number };
     hex: string;
     count: number;
     precentage: string;
 }
]

getComplementaryPalette

- returns palette that contains complementary color for provided color.

const { palette } = getComplementaryPalette({ r:12, g:15, b:255})

getMonochormaticPalette

- returns palettte that contains monochormatic colors for provided color.

const { palette } = getMonochormaticPalette({ r:12, g:15, b:255})

getTriadicPalette

- returns palettte that contains triadic colors for provided color.

const { palette } = getTriadicPalette({ r:12, g:15, b:255})

getTetradicPalette

- returns palettte that contains tetradic colors for provided color.

const { palette } = getTetradicPalette({ r:12, g:15, b:255})

Output

Color palette , which is an array with the followed properties:

 [
      {
        rgb: { r:number, g:number, b:number };
        hex: string;
    }
 ]