gka / chroma.js Goto Github PK
View Code? Open in Web Editor NEWJavaScript library for all kinds of color manipulations
Home Page: https://gka.github.io/chroma.js/
License: Other
JavaScript library for all kinds of color manipulations
Home Page: https://gka.github.io/chroma.js/
License: Other
e.g.
chroma('black').hsl()
--> (NaN, 0, 0)
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
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!
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.
Perhaps a .random()
method? :-)
chroma(255,255,255,1).hsv() // result: [NaN, 0, 1]
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?
The wiki is currently outdated (e.g. issue #42).
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
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.
asdasdasd
"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.
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" 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.
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.
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:
Optional:
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/
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
Grapefruit now lives on github: https://github.com/xav/Grapefruit
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()
ssdfsdf
Here's a plunkr demonstrating the problem.
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?
The brighten
function still calls darker
instead of the darken
function.
(color.coffee - line 184)
I want to use this awesome library via npm / in node.js.
To calculate histograms, should I expect the following value ranges?
[0, 360]
[0, 100]
What's the value range/domain for Chroma?
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
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,
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']
chroma.interpolate fails with a white color (FFFFFF) in Hsv mode.
https://github.com/gka/chroma.js/wiki/Color-Scales
Does this feature still work? When I type chroma.ColorScale, I get undefined
Hi,
Do you plan to support the alpha channel? I must use https://github.com/harthur/color for alpha work.
It's actually only adding rebeccapurple (#663399)
In addition to the current CommonJS style.
Something like this: https://github.com/knockout/knockout/blob/master/build/fragments/amd-pre.js
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:
Jon Smith - Selective Analytics
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.
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
Hi, get the following error when I try:
chroma('red').num() --> "Uncaught TypeError: chroma.num is not a function"
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.
As title.
Examples at http://colorblendy.com/#!/dodge/aabbcc/333333
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?
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()
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 =)
I don't see it being used anywhere
https://github.com/gka/chroma.js/blob/master/chroma.js#L1759
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.
Rather than make a scale and specify the point, it would be nice to do c1.mix(c2, [value: 0.5])
.
see #33
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
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()
There is a typo in readme.md:
Lab/Lch interpolation looks better than than RGB
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.