Giter Club home page Giter Club logo

iwanthue's Introduction

iWantHue

Colors for data scientists. Generate and refine palettes of optimally distinct colors.

iWantHue allows you to generate palettes of colors. It is about mastering the properties of a palette by setting a range of Hue, Chroma (unbiased saturation) and Lightness. You can generate palettes of any size or just get the generator for a javascript project. The algorithm optimizes the perceptive distance in the color subspace, ensuring an optimal readability.

How it works

  1. K-means or force vector repulsion algorithms ensure an even distribution of colors
  2. The CIE Lab color space is used for computation, since it fits human perception
  3. The Hue/Chroma/Lightness color space is used to set constraints, since it is user-friendly

Examples and a tutorial

Idea

The idea behind iWantHue is to distribute colors evenly, in a perceptively coherent space, constrained by user-friendly settings, to generate high quality custom palettes.

Explanations and an experiment on color theory

How to use it in your own code

You can install iwanthue for node.js and the browser using npm:

npm install iwanthue

Usage

var iwanthue = require('iwanthue');

// Generate a simple palette with 5 colors
var palette = iwanthue(5);

// With some options
var palette = iwanthue(5, {
  clustering: 'force-vector',
  seed: 'cool-palette',
  quality: 100
});

Arguments

  • count number: number of colors in the generated palette.
  • settings ?object: Settings:
    • attempts ?number [1]: Number of times should the function try to generate a palette in order to only keep the one maximizing the minimum distance between two of the palette colors. Will only make a single attempt by default.
    • colorSpace ?string|object|array [default]: Color space preset. Check this file for the full list of preset names, or go to the website to try them. Alternatively you can pass the colorSpace either as a [hmin, hmax, cmin, cmax, lmin, lmax] array or a {hmin, hmax, cmin, cmax, lmin, lmax} object where keys can be omitted.
    • colorFilter ?function: Function used to filter suitable colors. Takes a [r, g, b] color and the same [l, a, b] color as arguments.
    • clustering ?string [k-means]: Clustering method to use. Can either be k-means or force-vector.
    • quality ?number [50]: Quality of the clustering: iterations factor for force-vector, colorspace sampling for k-means.
    • ultraPrecision ?boolean [false]: Ultra precision for k-means colorspace sampling?
    • distance ?string [euclidean]: Distance function to use. Can be euclidean, cmc, compromise (colorblind), protanope, deuteranope or tritanope.
    • seed ?string|number: Random number generator seed. Useful to produce the same palette every time based on some data attribute.

Palette

A helper class representing a categorical color palette over a set of given values.

// To build your palette from a unique list of values
var Palette = require('iwanthue/palette');

var palette = Palette.generateFromValues(
  'cities',
  ['one', 'two', 'three'],
  {defaultColor: '#000'}
);

palette.get('one');
>>> '#19d3a2'

palette.get('unknown');
>>> '#000'

// From entries
var palette = Palette.fromEntries(
  'cities',
  [['one', 'red'], ['two', 'blue']],
  '#000'
);

// From mapping
var palette = Palette.fromMapping(
  'cities',
  {one: 'red', two: 'blue'},
  'red'
);

Palette.generateFromValues arguments

  • name string: palette or category name used as seed for iwanthue.
  • values iter: unique values for the represented category.
  • settings ?object:
    • defaultColor ?string [#ccc]: default color to return in case desired value is not known.
    • ... any setting that can be passed to iwanthue.

Palette.fromEntries arguments

  • name string: palette or category name used as seed for iwanthue.
  • entries iter: key, value entries mapping values to colors.
  • defaultColor ?string [#ccc]: default color to return in case desired value is not known.

Palette.fromMapping arguments

  • name string: palette or category name used as seed for iwanthue.
  • mapping object|Map: mapping from values to colors.
  • defaultColor ?string [#ccc]: default color to return in case desired value is not known.

Palette.fromJSON arguments

  • data object: serialized palette data ({name, defaultColor, entries}).

Palette members

  • name string: name of the palette.
  • size number: number of colors.
  • defaultColor string: default color.
  • map Map: map from values to colors.

Palette methods

  • get: return the color for the given value or the default color if value is unkown.
  • has: return whether the value is known to the palette.
  • forEach: callback iteration over (color, value).
  • colors: return the palette's colors as an array.
  • toJSON: return the palette in a serialized format fit for JSON.

Precomputed palettes

If you don't want to load iwanthue's whole code into your client app or if you just want to prototype things quickly, the npm module also packs some precomputed palettes that you can import.

All of the presets export palettes ranging from 2 to 15 colors.

Here is how to load them:

// Default palettes
var palettes = require('iwanthue/precomputed');

// Need a palette for 6 colors:
var sixColorsPalette = palettes[6];

// K-means palettes
var palettes = require('iwanthue/precomputed/k-means');

// Force vector palettes
var palettes = require('iwanthue/precomputed/force-vector');

// Colorblind alternatives
var palettes = require('iwanthue/precomputed/k-means-colorblind');
var palettes = require('iwanthue/precomputed/force-vector-colorblind');

Here is the full list of precomputed palettes:

iwanthue/precomputed/force-vector
iwanthue/precomputed/index
iwanthue/precomputed/k-means
iwanthue/precomputed/ultra-k-means
iwanthue/precomputed/force-vector-colorblind
iwanthue/precomputed/k-means-colorblind
iwanthue/precomputed/k-means-all
iwanthue/precomputed/force-vector-all
iwanthue/precomputed/k-means-fancy-light
iwanthue/precomputed/force-vector-fancy-light
iwanthue/precomputed/k-means-fancy-dark
iwanthue/precomputed/force-vector-fancy-dark
iwanthue/precomputed/k-means-shades
iwanthue/precomputed/force-vector-shades
iwanthue/precomputed/k-means-tarnish
iwanthue/precomputed/force-vector-tarnish
iwanthue/precomputed/k-means-pastel
iwanthue/precomputed/force-vector-pastel
iwanthue/precomputed/k-means-pimp
iwanthue/precomputed/force-vector-pimp
iwanthue/precomputed/k-means-intense
iwanthue/precomputed/force-vector-intense
iwanthue/precomputed/k-means-fluo
iwanthue/precomputed/force-vector-fluo
iwanthue/precomputed/k-means-red-roses
iwanthue/precomputed/force-vector-red-roses
iwanthue/precomputed/k-means-ochre-sand
iwanthue/precomputed/force-vector-ochre-sand
iwanthue/precomputed/k-means-yellow-lime
iwanthue/precomputed/force-vector-yellow-lime
iwanthue/precomputed/k-means-green-mint
iwanthue/precomputed/force-vector-green-mint
iwanthue/precomputed/k-means-ice-cube
iwanthue/precomputed/force-vector-ice-cube
iwanthue/precomputed/k-means-blue-ocean
iwanthue/precomputed/force-vector-blue-ocean
iwanthue/precomputed/k-means-indigo-night
iwanthue/precomputed/force-vector-indigo-night
iwanthue/precomputed/k-means-purple-wine
iwanthue/precomputed/force-vector-purple-wine

More info

iwanthue's People

Contributors

bengry avatar boogheta avatar jacomyma avatar paulgirard avatar roryokane avatar saraedum avatar yomguithereal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

iwanthue's Issues

Offer chroma.palette-gen.js in something other than GPL

Hey,

I am working on a research project and would love to integrate your palette generator into my system. Everything will eventually be open source, but even then GPL can be very messy in an interpreted browser environment. According to some interpretations of GPL, it may even be unlawful to run GPL scripts in non-free browsers. Is there any chance you could offer chroma.palette-gen.js as something other than GPL? I see that the larger project is LGPL which would be better, but the GPL-specific heading in chroma.palette-gen.js overrides that, I think.

Cheers,

Isaac

Example

You've made some great examples of how the tool works, but I can't see a minimal example of javascript/css/html usage. Have I missed something?

build palette around pre-selected colours?

Is it possible with iWantHue to pre-select 2 (or 1 or 3 or more) pastel colours and have a palette built around these? Thanks.

Do you have a Python module available? I'm very happy to write it, if it doesn't exist. Cheers.

"I Want Hue" online tool "diff" mode bug

The ns.diffSort function has a bug. The indicated code should be inside the loop above it. Otherwise, the loop above simply recomputes "d" several times and the only iteration has any subsequent effect.

ns.diffSort = function(colorsToSort, distanceType){
	// Sort
	var diffColors = [colorsToSort.shift()];
	while(colorsToSort.length>0){
		var index = -1;
		var maxDistance = -1;
		for(candidate_index=0; candidate_index<colorsToSort.length; candidate_index++){
			var d = Infinity;
			for(i=0; i<diffColors.length; i++){
				var colorA = colorsToSort[candidate_index].lab();
				var colorB = diffColors[i].lab();
				var d = ns.getColorDistance(colorA, colorB, distanceType);
				/* *** Code below belongs here *** */
			}
                            // **** BEGIN
			if(d > maxDistance){
				maxDistance = d;
				index = candidate_index;
			}
                            //**** END
		}
		var color = colorsToSort[index];
		diffColors.push(color);
		colorsToSort = colorsToSort.filter(function(c,i){return i!=index;});
	}
	return diffColors;
}

API

Any chance this could be made available via an API? I'd love to write a R package so palettes can be programmatically generated.

NaN bug in Protanope distance calculations for RGB color 9549d0

Love the tool. It's an incredibly useful resource. I just came across a small bug in distance calculations with one particular color. It appears that #9549d0 is in some way an edge case in the Protanope calculations, because this RGB palette:

["#43d357",
"#9549d0",
"#bb4800",
"#1dcdff",
"#c20055"]

gives this output:

image

(note that all the Protanope distances involving #9549d0 result in NaNs, and all distances not involving that color return numbers as expected)

(the other distance sections have no NaNs in them)

Looking forward to the new version!

Locks position not changed after changing sorting

Hey, I noticed that once I choose subset of colors by lock, then when I change sorting different colors are locked, i.e. lock position not followed sort - they stayed in the same wells.
This app is great though!

Update chroma.js

Newer versions of chroma.js changes HCL representation (called LCH somewhy), same as in D3.js.
Updating the library will make colors with C=0 true grayscale instead of yellowish.

Any version of chroma.js >=0.4.8 will do.
Check the commit with mentioned changes at chroma.js repo: gka/chroma.js@42dd32a

RGB as percentage

A lot of the scientists who I work with use MATLAB to plot data, I was wondering if it was worthwhile to include an output of the colours for MATLAB?

MATLAB colours are RGB and range from 0-1, you can easily convert from the RGB json values by dividing each by 255.

To make a cell array from this for MATLAB you would write something like:
{ [1,1,0] , [0,0.5,0.5], [0.5,0.75,0.1] }

Since there is space available on the webpage, it seems like an easy output to generate to reach a wider audience?

iWantHue's "distance" metric is a poor match for perceptual difference.

Consider the following color pairs and their distances:

cf5440 -- #c69141: 39.6

72893f -- #7b7eca: 85.4

The first pair appears (to me at least, and I think I have pretty normal vision) more different than the second pair, and yet the second pair has a much greater distance. What difference metric is used? Is it something like one of these algorithms, or is it something simpler?

Any chance of an API?

This is such a useful tool I find myself using it regularly. Is there any chance of an API so we could automate the process for non-javascript applications, or perhaps a R / Python version? I suspect most real data science happens off-browser..

Can we add the sequential list as in color brewer please ?

I love this ... the only thing i miss is when i generate a new palette i want to see all the colors that are part of one color. Right now i can see the list of them as a blobs and if i hover over a color i see the color tool tip but i cant get access to the individual colors.

It would be nice to access all the colors that are part of a group as a list on their own. Hopefully we can see the sequential list as an array or one col multiple rows format as they do in colorbrewer.

Does it make sense ?

Are we still maintained

Hi there. Is this project still being maintained, or shall we add a clarification to the repo main page?

Direct URL

Having found a great colour palette I want to share it with colleagues. I can cut-and-paste the values but it would be even better to sent them a URL that takes them to the palette inside the iWantHue site.

Simple bug

If I try to "Make a pallete" when the range for "Chroma" is zero, the site stops responding.
I expected it to only generate the colors of that specific "Chroma".

The same happens with "Lightness".

I am using Windows 7 / Google Chrome.

Getting many visually distinct colors with the same saturation and lightness is hard

I am trying to get many (24) visually distinct colors with the same saturation and lightness.
This is probably borderline possible depending on the display.

In my case I don't even want a display but intend to use it for RGB LEDs, so the larger gamut might help.
I'd be willing to write a patch to have it support other display gamuts than what I assume is SRGB.

Any tips on where to start?

Color space: boundaries for C

Hi, I really love iWantHue and the HCL color space. Thank you for this wonderful website.

I wanted to point out that the boundaries for C should be: MIN 0 to MAX 134.

I found out using the following code where I convert all possible RGB values to their HCL counterpart in order to calculate min max values for H,C and L:

min H := max double
min C := max double
min L := max double

max H := min double
max C := min double
max L := min double

for R := 0 to 255 do
for G := 0 to 255 do
for B := 0 to 255 do
  begin
      convert (R,G,B) to (H,C,L)

      min H := MIN( min H, H);
      min C := MIN( min C, C);
      min L := MIN( min L, L);

      max H := MAX( max H, H);
      max C := MAX( max C, C);
      max L := MAX( max L, L);
  end;

The current GUI lets you think that 100 is a maximum for C.

And when you select color space All colors it sets the C range to 0 - 100 whereas it should set it to 0 - 134.

Edit manipulates wrong colour after ordering them

After ordering colours by hue, chroma, etc., clicking to edit a colour will not allow to edit the selected colour. Instead it will allow to edit the colour that would be in that position if it were ordered by diff.

Sort by multiple keys

This may be a bit of a weird request, but I have a specific need to mostly-sort by hue, then by diff (actual sorting wouldn't work since all hue/chroma/lightness are likely to be unique).

I guess it could be implemented by limiting the significant digits being compared (maybe even allowing for control of that), then using diff as a secondary key.

I'm going to look into the source code myself to see if I can come up with a functional snippet that does what I want, to give a better example :)

Accompanying paper

Is there any paper accompanying the project? I want to cite the website in a paper

Suggestion: Add "Steps" and "Ultra Precision" to GUI

When invoking paletteGenerator.generate in the JS console, you can adjust the "quality" and "ultra_precision" parameters, however these can't be adjusted when using the web GUI. Can this be added, perhaps under an "advanced options" collapsible?

Palette correction error

When trying to use the palette correction tool (I realize there's a more modern interface, but this one better suits my purpose of trying to clean up a set of colors created by our graphic designer) I get the following error:

TypeError: lab is undefined
corrector.php (line 547, col 34)

Add HSL values to each color.

Each color has below the Hexa and RBV values. It would be nice if the HSL values where present too. I know one can get those in the HCL json block, but I think having them paired with each color would help picking up those that, f.i., have more similar luminosity.

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.