Giter Club home page Giter Club logo

color-classifier's Introduction

color-classifier.js

Build Status npm version David License

Classify the color along the reference color. using algorithm the CIEDE2000, RGB, HSV.

Playground

Playground Screenshot

Playground

INSTALL

$ npm install color-classifier --save

or

Download the color-classifier.min.js.

USAGE

The following is the basic usage.

import ColorClassifier from "color-classifier"

const palette = ["#fff", "#000"];
const colorClassifier = new ColorClassifier(palette);
const color = colorClassifier.classify("#fefefe");

console.log(color); // {r: 255, g: 255, b: 255}

The type of pallet and algorithms have been some available.

import ColorClassifier, { Palette, AlgorithmTypes } from "color-classifier"

const colorClassifier = new ColorClassifier(Palette.W3C, AlgorithmTypes.HSV);
const color = colorClassifier.classify("#fefefe");

console.log(color); // {r: 255, g: 255, b: 255}

The available values are as follows.

Palette

The following is the palette list of preset.

hex color
#000000
#808080
#c0c0c0
#ffffff
#800000
#ff0000
#008000
#00ff00
#808000
#ffff00
#008080
#00ffff
#000080
#0000ff
#800080
#ff00ff
hex color
#000000
#808080
#ffffff
#ff0000
#ffa500
#ffff00
#008000
#00ffff
#0000ff
#800080

AlgorithmTypes

The difference algorithm of color is possible some selection.
Please try in Playground for the difference of each algorithm.

value description
AlgorithmTypes.CIEDE2000 Using the CIE Delta E 2000 Color-Difference algorithm (CIEDE2000).
The CIEDE2000 color-difference formula,
Color difference - Wikipedia, the free encyclopedia
AlgorithmTypes.HSV Using the HSV color space.
HSL and HSV - Wikipedia, the free encyclopedia
AlgorithmTypes.RGB Using the RGB color space.
RGB color model - Wikipedia, the free encyclopedia

API

new ColorClassifier(palette = Palette.W3C, algorithmType = AlgorithmTypes.CIEDE2000)

palette: {Array}
algorithmType: {String}

Palette is specify array in RGB object or HEX string.

HEX String:

const palette = ["#fff", "#000"];
const colorClassifier = new ColorClassifier(palette);

RGB Object:

const palette = [
  {r: 255, g: 255, b: 255},
  {r: 0,   g: 0,   b: 0}
];
const colorClassifier = new ColorClassifier(palette);

classify(color, format = "rgb")

color: {Object || String}
format: {String} ("rgb", "hex", "hsv")

Classifies the specified color along the palette.

const color1 = {r: 255, g: 255, b: 255};

console.log(colorClassifier.classify(color1, "rgb")); //{r: 255, g: 255, b: 255}
console.log(colorClassifier.classify(color1, "hex")); //#ffffff
console.log(colorClassifier.classify(color1, "hsv")); //{h: 0, s: 0, v: 100}


const color2 = "#fff";

console.log(colorClassifier.classify(color2, "rgb")); //{r: 255, g: 255, b: 255}
console.log(colorClassifier.classify(color2, "hex")); //#ffffff
console.log(colorClassifier.classify(color2, "hsv")); //{h: 0, s: 0, v: 100}

classifyFromArray(colors, format = "rgb")

colors: {Array}
format: {String} ("rgb, "hex", "hsv")

Classifies the specified array of colors along the palette.

const colors = ["#fefefe", "#fafafa", "#010101", "#020202"];
const results = colorClassifier.classifyFromArray(colors, "hex");

console.log(results);
// [
//   {
//     palette: "#ffffff",
//     colors: [
//       "#fefefe",
//       "#fafafa"
//     ]
//   },
//   {
//     palette: "#000000",
//     colors: [
//       "#010101",
//       "#020202"
//     ]
//   }
// ]

More APIs

  • setPalette(palette)
  • getPalette()
  • setAlgorithmType(algorithmType)
  • getAlgorithmType()

LICENCE

Released under the MIT Licence

AUTHOR

tsuyoshiwada

DEVELOPMENT

Initialization of the project.

$ cd /your/project/dir
$ git clone https://github.com/tsuyoshiwada/color-classifier.git

Install some dependencies.

$ npm install

Start the development. You can access to the http://localhost:3000/.

$ npm start

Run lint and testing.

$ npm test

Generates build file.

$ npm run build

Bugs, feature requests and comments are more than welcome in the issues

color-classifier's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.