It's actually only adding rebeccapurple (#663399)

After scaling between two colors and calling .css(), the RGB values aren't rounded, and the decimal values can't be used.

e.g.

var scale = chroma.scale("YlGnBu");
console.log(scale(0.3).css())

will give:

rgb(170.20000000000002,221.8,182.8)

which is unusable (at least in Chrome v39). I think it'd be best to just round the number – not sure what a decimal value in RGB would represent, anyways 😄

I can submit a pull request in a couple of days after I find some time if you think this is a legitimate concern – would love to help out!

I made a quick mokey patch to work with color delta.

// delta and add functions (still only by hcl space)
chroma.delta = function (a, b) { 
    a_ = a.hcl(); 
    b_ = b.hcl(); 
    return [a_[0] - b_[0], a_[1] - b_[1], a_[2] - b_[2]];
};

chroma.add = function (color, delta) { 
    var c_ = color.hcl(); 
    return chroma.hcl(c_[0] - delta[0], c_[1] - delta[1], c_[2] - delta[2]); 
};

c = chroma.hex('#3ebd7c');
c1 = chroma.hex('#cc7e35');

d = chroma.delta(c, c1)

chroma.add(c, d).hex() == c;
chroma.add(c1, d).hex();

It still lack to work with other color spaces, would it be useful to delta other than HCL and CIELab?

What do you think about including it in the lib?

see #33

Browsers that do not support accessing strings by index (namely IE <= 7) will always return a black color when constructing with a 3-char hex. Use charAt instead for backward-compatibility.

  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }

Minimum:

• Read colors from [c,m,y,k] values
• Convert colors to CMYK values

Optional:

• Simplify CMYK colors (vary color slightly to reduce number of color channels)

For example

var colors = [[ 0, 0, 0, 1 ], [ 255, 255, 255, 1 ]];
 var scale = new chroma.scale(colors)
      .domain([0, 10]).mode('rgb');

console.log(scale(0)); // [0, 0, 0, 1]
console.log(scale(1)); // {_rgb: [25.5,25.5,25.5,1]}

Why doesn't scale(0) return {_rgb: [0,0,0,1]}? It's inconsistent and breaks when doing scale(0).hex()

Here's a plunkr demonstrating the problem.

The brighten function still calls darker instead of the darken function.

(color.coffee - line 184)

To calculate histograms, should I expect the following value ranges?

• H: [0, 360]
• C: ?
• L: [0, 100]

What's the value range/domain for Chroma?

I don't see it being used anywhere

https://github.com/gka/chroma.js/blob/master/chroma.js#L1759

The wiki is currently outdated (e.g. issue #42).

ssdfsdf

for getColor in line 1045 to 1046 (https://github.com/gka/chroma.js/blob/master/chroma.js)
t = f0 = (val - _min) / (_max - _min)
t = Math.min(1, Math.max(0, t))

this fails sometimes when min and max of the domain is the same. For example, I have domain [1, 1], this return an undefined color when I do getColor(1). I am wondering is the domain supposed to be inclusive, or is it a bug?

This module would not load in node.js.

Changing main path in package.json from:

"main": "dist/chroma.js"

to

"main": "chroma.js"

fixes the problem

Grapefruit now lives on github: https://github.com/xav/Grapefruit

here's something may be worth adding that piggybacks on the H and S of HSL, but changes the L (luminance) to P perceived brightness. The turns out to be quite a visually intuitive way to adjust color brightness.

http://alienryderflex.com/hsp.html

In addition to the current CommonJS style.

Something like this: https://github.com/knockout/knockout/blob/master/build/fragments/amd-pre.js

Hi,

Do you plan to support the alpha channel? I must use https://github.com/harthur/color for alpha work.

It'd be very handy if you could directly set a luminance for a color instead of having to nudge it that direction with brighten/darken.

rgbString -> "rgb(123, 123, 123)"
rgbaString
ditto hsv, hsl

I'm suggesting that the alpha and non-alpha versions be separate to be consistent with the existing rgb and rgba. Probably add hexString as an alias for hex too.

I am attempting to include your package via bower but it complains with the following messages below:

--> bower install --save chroma-js
bower cloning git://github.com/gka/chroma.js.git
bower cached git://github.com/gka/chroma.js.git
bower fetching chroma-js
bower checking out chroma-js#v0.5.5
bower copying C:\Users\Jon\AppData\Roaming\bower\cache\chroma-js\a33d1917b94c9b4
ec57cb1e81103362f
mismatch The version specified in the bower.json of package chroma-js mismatches
 the tag (0.5.5 vs 0.5.3)
mismatch You should report this problem to the package author

There were errors, here's a summary of them:
-  not found

However it does seem to have installed Chroma-js as shown by:

• The bower.js contains the line: "chroma-js": "~0.5.5"
• I also have a directory with version 0.5.5.

Jon Smith - Selective Analytics

Rather than make a scale and specify the point, it would be nice to do c1.mix(c2, [value: 0.5]).

Examples at http://colorblendy.com/#!/dodge/aabbcc/333333

https://github.com/gka/chroma.js/wiki/Color-Scales

Does this feature still work? When I type chroma.ColorScale, I get undefined

Chroma

"Because it's not exactly the same as hue in HSV, it's named c (for chroma)."

As best as I can tell, this is actually misuse of the word "chroma"; usually it's used to denote something close to saturation of a color. Here are some references:

http://www.huevaluechroma.com/082.php
http://en.wikipedia.org/wiki/Munsell_color_system

CSL is effectively a variation on the Munsell color system, which uses as its dimensions hue (your "chroma"), value (your "lightness"), and chroma (your "saturation").

I recommend changing the name/dimensions of CSL to HVC (or HLC, HCV, or HCL), to conform to existing use of that term; it's not too ambiguous since traditional HVC is referred to as "Munsell" and uses completely different units.

Saturation

Parenthetically, using "saturation" in this context is a bit off, as well. Saturation usually indicates the degree between pure grey and the peak colorfulness of a color; whereas chroma is a measure of human perception. Fully-saturated blue has a much higher chroma than fully-saturated cyan. You can see this in your CSL toy, where the "S" (chroma) of cyan has a much smaller range than the "S" of blue.

Which is why I recommend still including the word "chroma" in the name of the color space, but to represent a different dimension.

Lightness

"Lightness" and "value" are about as correct as each other. I recommend "value" to conform to Munsell, but "lightness" to conform to CIE Lab* makes as much sense.

Thanks

The reason I bring this up is because I was playing with your excellent color toys, and I kept being confused by the definition of "chroma" which differed from the traditional one.

Thank you so much for making these things, regardless of whether you indulge my silly little request! I'm learning color theory/science/math, and playing with your sliders is a huge help.

chroma.interpolate fails with a white color (FFFFFF) in Hsv mode.

Is there a way to set/retrieve channel value, as it is done in harthur/color? Or are there any plans on that?
E. g.

var Color = requie('chroma');
var c = new Color('gray');
c.red(); //128

Hi there.

chroma.rgb(0,255,255).lch()gives me [91.11321981275862, 50.1208616761689, -163.62384436734908] which I find unexpected, as hue should be normalized to >= 0 and < 360.
A modulo on the value would fix this.

Cheers,
Christoph

i want to know that how can i make it to use in unity for live webcam like the given plugin.
http://apps.virtualwaregroup.com/ChromaKeySystem/

UglifyJS has support for this. Add a flag to the invocation, and add @license to each licence comment (croma.js and ColorBrewer).

Also a mention of being BSD licence in the licence comment would probably make sense.

I'm planning on writing some functions to do this, based on these resources:

integer-only convert to YCbCr
http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394035(v=vs.92).aspx

Currently I'm not sure whether I can use http://msdn.microsoft.com/en-us/library/ms893078.aspx to convert YCbCr -> RGB using integer-only math. Mostly because I think YUV != YCbCr in some cases.

I trust http://msdn.microsoft.com/en-us/library/ff635643.aspx aka http://stackoverflow.com/a/7086872 more, but want to use integer math.

asdasdasd

As title.

About cubehelix:
https://www.mrao.cam.ac.uk/~dag/CUBEHELIX/

Great library and loving the updates. Had a quick suggestion though.

Since we already have a quick way to set the mode of a scale, how about providing a shorthand for grabbing colors like:

chroma.scale('RdYlGn').colors(5)
chroma.scale('RdYlGn').mode('hex').colors(5)

Instead of the current approach:

chroma.scale('RdYlGn').domain([0,1], 5).colors()

While perhaps a little esoteric, it would be super useful if chroma.js could generate the colors associated with black body radiation colors (mostly for doing white balancing). Being able to pull up the temperature colors like on https://en.wikipedia.org/w/index.php?title=Color_temperature#Categorizing_different_lighting would be pretty sweet

Am I missing something? The readme claims that chroma.js is 8.5kB, but it appears to be nearly four times that:

$ du -sh chroma.min.js
32K /Users/qrohlf/Desktop/chroma.min.js

e.g.

chroma('black').hsl()
--> (NaN, 0, 0)

For setting background/foreground colors, it'd be nice if I could do something like:

bgColor = "pink"
textColor = chroma(bgColor).contrast(0.5, "darken").hex()

I want to use this awesome library via npm / in node.js.

Not a bug in the slightest, just thought you might like to know about how people use chroma-js... I'm currently playing with it to come up with "nearest colours" for fountain pen ink matching purposes, with rather sweet visual results. I did a quick blog post about it over on http://pomax.github.io/#gh-weblog-1423203721895 if you're interested =)

There is a typo in readme.md:

Lab/Lch interpolation looks better than than RGB

Checking the JavaScript (not used to coffee script but will check)

color = chroma.gl(0.2, 0.6, 1);
console.log(color.rgb())

prints

[255, 255, 255]

Looking at the code in chroma.js at line 62

chroma.gl = function(r, g, b, a) {
  return new Color(r * 255, g * 255, b * 255, a, 'gl');
};

Those lines multiply r, g, and b by 255 but then they create a color passing in 'gl' so again at line 214 they get multiplied again

  } else if (m === 'gl') {
    me._rgb = [x * 255, y * 255, z * 255, a];

It looks like the same is happening for many other of the named color creation functions

Hi,

First, thanks for the great tool!

I'd like to know if there is a way to ask chroma to work on color interpolation and return back generated colors into an array :

I'm quite surprise not seeing that on chroma, I probably missed it.

To illustrate my need, I'll try to use chroma's words.

new chroma.ColorScale({
    colors: ['#F7E1C5', '#6A000B'];
    class: 5;
}).out('array');

this would return :

 ['#F7E1C5', '#hexa1', '#hex2', '#hexa3', '#6A000B']

Perhaps a .random() method? :-)

Perhaps it was just an accident but previously I was writing code like chroma('#eee', 'lab') which would convert the internal color mode to lab.

This broke sometime after 0.7.2.

What is the recommended way to create a chroma object then convert between internal color modes?

I looked, but couldn't see any tests that check things like chroma('red').lab() give the correct result. At the very least, we should check these colours: http://en.wikipedia.org/wiki/List_of_monochrome_and_RGB_palettes#4-bit_RGBI

Hi, get the following error when I try:
chroma('red').num() --> "Uncaught TypeError: chroma.num is not a function"