You use the Color class by just instantiating it with new and passing a color value. Like var col = new Color(rgb(255,0,0)); Then you can just do col.r or col.brightness or col.isCloseToGreyscale. col.val will spit the foobar color back out (pull the latest version of color.js from github because I just changed this 5 minutes ago).
Here's my color picker code which shows this in action:
function getThemeColor(image, maxColorsToPull, maxColors) {
var selectedColor;
var minFrequency = 0.015;
var colorsWeighted = [];
try {
colorsWeighted = JSON.parse(image.GetColourSchemeJson(maxColorsToPull));
colorsWeighted.forEach(function (c, i) {
colorsWeighted[i].col = new Color(c.col);
});
console.log('idx color bright freq weight');
maxWeight = 0;
selectedColor = colorsWeighted[0].col; // choose first color in case no color selected below
colorsWeighted.forEach(function (c, i) {
var col = c.col;
var midBrightness = 127 - Math.abs(127 - col.brightness); // favors colors with a brightness around 127
c.weight = c.freq * midBrightness * 10; // multiply by 10 so numbers are easier to compare
if (c.freq >= minFrequency && !col.isCloseToGreyscale && col.brightness < 212) {
console.log(leftPad(i, 2), col.getRGB(true,true), leftPad(col.brightness, 4), ' ', leftPad(parseFloat(c.freq*100).toFixed(2),5) + '%', leftPad(parseFloat(c.weight).toFixed(2), 7));
if (c.weight > maxWeight) {
maxWeight = c.weight;
selectedColor = col;
}
} else if (col.isCloseToGreyscale) {
console.log(' -', col.getRGB(true,true), leftPad(col.brightness, 4), ' ', leftPad(parseFloat(c.freq*100).toFixed(2),5) + '%', ' grey');
} else {
console.log(' -', col.getRGB(true,true), leftPad(col.brightness, 4), ' ', leftPad(parseFloat(c.freq*100).toFixed(2),5) + '%', leftPad(parseFloat(c.weight).toFixed(2), 7));
}
});
if (selectedColor.brightness < 39) {
console.log(selectedColor.getRGB(true), 'brightness:', selectedColor.brightness, 'too dark -- searching for highlight color');
brightest = selectedColor;
maxWeight = 0;
colorsWeighted.forEach(function (c, i) {
if (c.col.brightness > selectedColor.brightness &&
c.col.brightness < 200 &&
!c.col.isCloseToGreyscale &&
c.weight > maxWeight &&
c.freq > .01) {
maxWeight = c.weight;
brightest = c.col;
}
});
selectedColor = brightest;
}
console.log('Selected Color:', selectedColor.getRGB(true));
return selectedColor.val;
} catch (e) {
return undefined;
}
}
Here's the explanation. My theme requires that the theme color (which I use for some backgrounds) has white text and white logos on it. So I want to choose a color that looks good but isn't too bright. I also try and avoid colors that are greyscale or close to it (GetColourSchemeJson will often return colors like rgb(100,101,97) which are essentially greyscale) because those are pretty boring. On my first pass I only want to choose a color that appears at least 1.5% of the time. I also weight colors more with a brightness around 127 (this portion of the weighting is linear but I'd like it to be more of a gaussian weight but it works well enough).
If after the first pass I didn't find a suitable color, I do a second pass looking for basically the brightest non-greyscale color which appears at least 1% of the time. If that still doesn't find anything suitable I just return the very first color because the image is obviously completely greyscale or very close to it.
When running this I have a lot of logging to the console to see what's going on. Change your font to Consolas if you want it to be readable