Converting between color models

Converting between color models - javascript

I'm trying to make buttons for converting between color models (hex, rgb, hsl).
I've created a button that generates a random color when clicked on.
And I've created a class that generates the random color in rgb and has methods to convert it to hex or hsl.
I tried creating a "click" event listener on each of the color model buttons but I'm not able to access the newly generated color object that I made through the class (block scope).
Should I have just used normal functions to convert instead of a class constructor?
const colorName = document.querySelector(".colorName");
const genColorBtn = document.querySelector("#genColorBtn");
const hexBtn = document.querySelector("#hexBtn");
const rgbBtn = document.querySelector("#rgbBtn");
const hslBtn = document.querySelector("#hslBtn");
// Generate Random Color
const genRandomColor = () => {
const r = Math.floor(Math.random() * 255 + 1);
const g = Math.floor(Math.random() * 255 + 1);
const b = Math.floor(Math.random() * 255 + 1);
return new Color(r, g, b);
};
genColorBtn.addEventListener("click", function () {
const newColor = genRandomColor();
document.body.style.backgroundColor = newColor.rgb();
colorName.innerText = newColor.rgb();
});
// Color Model Conversions
class Color {
constructor(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
this.calcHSL();
}
// Add methods to the prototype.
hex() {
const { r, g, b } = this;
return (
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
);
}
rgb() {
const { r, g, b } = this;
return `rgb(${r}, ${g}, ${b})`;
}
hsl() {
const { h, s, l } = this;
return `hsl(${h}, ${s}%, ${l}%)`;
}
// For hsl
calcHSL() {
let { r, g, b } = this;
// Make r, g, and b fractions of 1
r /= 255;
g /= 255;
b /= 255;
// Find greatest and smallest channel values
let cmin = Math.min(r, g, b),
cmax = Math.max(r, g, b),
delta = cmax - cmin,
h = 0,
s = 0,
l = 0;
if (delta == 0) h = 0;
else if (cmax == r)
// Red is max
h = ((g - b) / delta) % 6;
else if (cmax == g)
// Green is max
h = (b - r) / delta + 2;
// Blue is max
else h = (r - g) / delta + 4;
h = Math.round(h * 60);
// Make negative hues positive behind 360°
if (h < 0) h += 360;
// Calculate lightness
l = (cmax + cmin) / 2;
// Calculate saturation
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
// Multiply l and s by 100
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);
// Assign h, s, l to the object instance so that we can reuse it.
this.h = h;
this.s = s;
this.l = l;
}
}
<body>
<main>
<h1>Random Color Flipper</h1>
<h2>Color: <span class="colorName">rgb(255, 255, 255)</span></h2>
<div class="colorModes">
<button id="hexBtn">hex</button>
<button id="rgbBtn">rgb</button>
<button id="hslBtn">hsl</button>
</div>
<button id="genColorBtn">Generate Color</button>
</main>
<script src="app.js"></script>
</body>

Your code seems fine, but your hex, rgb and hsl buttons were not wired up. I added a variable curRGB to store the current RGB values (though there is probably a more elegant getter/setter for your Class that could be written). I did take a stab at the hexBtn listener:
hexBtn.addEventListener("click", function () {
colorName.innerText = new Color(...curRGB).hex();
});
const colorName = document.querySelector(".colorName");
const genColorBtn = document.querySelector("#genColorBtn");
const hexBtn = document.querySelector("#hexBtn");
const rgbBtn = document.querySelector("#rgbBtn");
const hslBtn = document.querySelector("#hslBtn");
let curRGB
// Generate Random Color
const genRandomColor = () => {
const r = Math.floor(Math.random() * 255 + 1);
const g = Math.floor(Math.random() * 255 + 1);
const b = Math.floor(Math.random() * 255 + 1);
curRGB = [r, g, b]
return new Color(r, g, b);
};
genColorBtn.addEventListener("click", function () {
const newColor = genRandomColor();
document.body.style.backgroundColor = newColor.rgb();
colorName.innerText = newColor.rgb();
});
hexBtn.addEventListener("click", function () {
colorName.innerText = new Color(...curRGB).hex();
});
// Color Model Conversions
class Color {
constructor(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
this.calcHSL();
}
// Add methods to the prototype.
hex() {
const { r, g, b } = this;
return (
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
);
}
rgb() {
const { r, g, b } = this;
return `rgb(${r}, ${g}, ${b})`;
}
hsl() {
const { h, s, l } = this;
return `hsl(${h}, ${s}%, ${l}%)`;
}
// For hsl
calcHSL() {
let { r, g, b } = this;
// Make r, g, and b fractions of 1
r /= 255;
g /= 255;
b /= 255;
// Find greatest and smallest channel values
let cmin = Math.min(r, g, b),
cmax = Math.max(r, g, b),
delta = cmax - cmin,
h = 0,
s = 0,
l = 0;
if (delta == 0) h = 0;
else if (cmax == r)
// Red is max
h = ((g - b) / delta) % 6;
else if (cmax == g)
// Green is max
h = (b - r) / delta + 2;
// Blue is max
else h = (r - g) / delta + 4;
h = Math.round(h * 60);
// Make negative hues positive behind 360°
if (h < 0) h += 360;
// Calculate lightness
l = (cmax + cmin) / 2;
// Calculate saturation
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
// Multiply l and s by 100
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);
// Assign h, s, l to the object instance so that we can reuse it.
this.h = h;
this.s = s;
this.l = l;
}
}
<main>
<h1>Random Color Flipper</h1>
<h2>Color: <span class="colorName">rgb(255, 255, 255)</span></h2>
<div class="colorModes">
<button id="hexBtn">hex</button>
<button id="rgbBtn">rgb</button>
<button id="hslBtn">hsl</button>
</div>
<button id="genColorBtn">Generate Color</button>
</main>

Related

Convert a 0-1 value to a hex colour?

I'm creating an app that visualises stars using a NASA API. The colour of a star comes back as a 0 to 1 value, with 0 being pure blue, and 1 being pure red. Essentially I need to set up a way to convert 0-1 values in javascript to a sliding HEX (or rgb) scale, progressing like this:
0: blue (9aafff)
.165: blue white (cad8ff)
.33: white (f7f7ff)
.495: yellow white (fcffd4)
.66: yellow (fff3a1)
.825: orange (ffa350)
1: red (fb6252)
Is this possible? I don't have any idea how to even begin to approach this. Cheers!

The best would be to work in another color space than the RGB one. For example HSL.
Example:
var stones = [ // Your Data
{v:0, hex:'#9aafff'},
{v:.165, hex:'#cad8ff'},
{v:.33, hex:'#f7f7ff'},
{v:.495, hex:'#fcffd4'},
{v:.66, hex:'#fff3a1'},
{v:.825, hex:'#ffa350'},
{v:1, hex:'#fb6252'},
]
stones.forEach(function(s){
s.rgb = hexToRgb(s.hex);
s.hsl = rgbToHsl.apply(0, s.rgb);
});
function valueToRgbColor(val){
for (var i=1; i<stones.length; i++) {
if (val<=stones[i].v) {
var k = (val-stones[i-1].v)/(stones[i].v-stones[i-1].v),
hsl = interpolArrays(stones[i-1].hsl, stones[i].hsl, k);
return 'rgb('+hslToRgb.apply(0,hsl).map(function(v){ return v|0})+')';
}
}
throw "bad value";
}
/**
* Converts an RGB color value to HSL. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
* Assumes r, g, and b are contained in the set [0, 255] and
* returns h, s, and l in the set [0, 1].
*
* #param Number r The red color value
* #param Number g The green color value
* #param Number b The blue color value
* #return Array The HSL representation
*/
function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}
/**
* Converts an HSL color value to RGB. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
* Assumes h, s, and l are contained in the set [0, 1] and
* returns r, g, and b in the set [0, 255].
*
* #param Number h The hue
* #param Number s The saturation
* #param Number l The lightness
* #return Array The RGB representation
*/
function hslToRgb(h, s, l){
var r, g, b;
if(s == 0){
r = g = b = l; // achromatic
}else{
function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return [r * 255, g * 255, b * 255];
}
function hexToRgb(hex) {
return /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
.slice(1).map(function(v){ return parseInt(v,16) });
}
function interpolArrays(a,b,k){
var c = a.slice();
for (var i=0;i<a.length;i++) c[i]+=(b[i]-a[i])*k;
return c;
}
var stones = [ // Your Data
{v:0, hex:'#9aafff'},
{v:.165, hex:'#cad8ff'},
{v:.33, hex:'#f7f7ff'},
{v:.495, hex:'#fcffd4'},
{v:.66, hex:'#fff3a1'},
{v:.825, hex:'#ffa350'},
{v:1, hex:'#fb6252'},
]
stones.forEach(function(s){
s.rgb = hexToRgb(s.hex);
s.hsl = rgbToHsl.apply(0, s.rgb);
});
function valueToRgbColor(val){
for (var i=1; i<stones.length; i++) {
if (val<=stones[i].v) {
var k = (val-stones[i-1].v)/(stones[i].v-stones[i-1].v),
hsl = interpolArrays(stones[i-1].hsl, stones[i].hsl, k);
return 'rgb('+hslToRgb.apply(0,hsl).map(function(v){ return v|0})+')';
}
}
throw "bad value";
}
for (var i=0; i<=1; i+=.03) {
var color = valueToRgbColor(i);
$('<div>').css({background:color}).text(i.toFixed(2)+" -> "+color).appendTo('body');
}
body {
background: #222;
}
div {
width:200px;
margin:auto;
color: #333;
padding: 2px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
For this example, I took the color space conversion functions here but there are easy to find once you know what to look for.
Note that modern browsers understand HSL colors (exemple: background: hsl(120,100%, 50%);) so, if you're just building HTML, you don't have to embed all this code in your page, just precompute the color stops and interpolate on the HSL values directly.

Here is one the solution in pure Javascript I just did. It process a linear interpolation between two colors.
/*
NASA color to RGB function
by Alexis Paques
It process a linear interpolation between two colors, here is the scheme:
0: blue
.165: blue white
.33: white
.495: yellow white
.66: yellow
.825: orange
1: red
*/
var blue = [0,0,255];
var bluewhite = [127,127,255];
var white = [255,255,255];
var yellowwhite = [255,255,127];
var yellow = [255,255,0];
var orange = [255,127,0];
var red = [255,0,0];
function color01toRGB(color01){
var RGB = [0,0,0];
var fromRGB = [0,0,0];
var toRGB = [0,0,0];
if(!color01)
return '#000000';
if(color01 > 1 || color01 < 0)
return '#000000';
if(color01 >= 0 && color01 <= 0.165 ){
fromRGB = blue;
toRGB = bluewhite;
}
else if(color01 > 0.165 && color01 <= 0.33 ){
fromRGB = bluewhite;
toRGB = white;
}
else if(color01 > 0.33 && color01 <= 0.495 ){
fromRGB = white;
toRGB = yellowwhite;
}
else if(color01 > 0.495 && color01 <= 0.66 ){
fromRGB = yellowwhite;
toRGB = yellow;
}
else if(color01 > 0.66 && color01 <= 0.825 ){
fromRGB = yellow;
toRGB = orange;
}
else if(color01 > 0.825 && color01 <= 1 ){
fromRGB = orange;
toRGB = red;
}
// 0.165
for (var i = RGB.length - 1; i >= 0; i--) {
RGB[i] = Math.round(fromRGB[i]*color01/0.165 + toRGB[i]*(1-color01/0.165)).toString(16);
};
return '#' + RGB.join('');
}

Since you have a list of values, all pretty well-saturated and bright, you can probably interpolate in the current (RGB) space for this. It won't be quite as pretty as if you convert to HSL, but will work fine for the colors you have.
Since you don't have any weighting or curves in the data, going with a simple linear interpolation should work just fine. Something like:
var stops = [
[0, 154, 175, 255],
[0.165, 202, 216, 255],
[0.33, 247, 247, 255],
[0.495, 252, 255, 212],
[0.66, 255, 243, 161],
[0.825, 255, 163, 80],
[1, 251, 98, 82]
];
function convertColor(color) {
var c = Math.min(Math.max(color, 0), 1); // Clamp between 0 and 1
// Find the first stop below c
var startIndex = 0;
for (; stops[startIndex][0] < c && startIndex < stops.length; ++startIndex) {
// nop
}
var start = stops[startIndex];
console.log('using stop', startIndex, 'as start');
// Find the next stop (above c)
var stopIndex = startIndex + 1;
if (stopIndex >= stops.length) {
stopIndex = stops.length - 1;
}
var stop = stops[stopIndex];
console.log('using stop', stopIndex, 'as stop');
// Find the distance from start to c and start to stop
var range = stop[0] - start[0];
var diff = c - start[0];
// Convert diff into a ratio from start to stop
if (range > 0) {
diff /= range;
}
console.log('interpolating', c, 'between', stop[0], 'and', start[0], 'by', diff);
// Convert from RGB to HSL
var a = rgbToHsl(start[1], start[2], start[3]);
var b = rgbToHsl(stop[1], stop[2], stop[3]);
console.log('hsl stops', a, b);
// Interpolate between the two colors (start * diff + (stop * (1 - diff)))
var out = [0, 0, 0];
out[0] = a[0] * diff + (b[0] * (1 - diff));
out[1] = a[1] * diff + (b[1] * (1 - diff));
out[2] = a[2] * diff + (b[2] * (1 - diff));
console.log('interpolated', out);
// Convert back from HSL to RGB
var r = hslToRgb(out[0], out[1], out[2]);
r = r.map(function(rv) {
// Round each component of the output
return Math.round(rv);
});
return r;
}
// Set the divs
var divs = document.querySelectorAll('.star');
Array.prototype.forEach.call(divs, function(star) {
var color = convertColor(star.dataset.color);
var colorStr = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')';
console.log('setting', star, 'to', colorStr);
star.style.backgroundColor = colorStr;
});
// HSL to RGB conversion from http://stackoverflow.com/a/30758827/129032
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return [h, s, l];
}
function hslToRgb(h, s, l) {
var r, g, b;
if (s == 0) {
r = g = b = l; // achromatic
} else {
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return [r * 255, g * 255, b * 255];
}
.star {
width: 24px;
height: 24px;
display: inline-block;
box-shadow: 0px 0px 16px -2px rgba(0, 0, 0, 0.66);
}
<div class="star" data-color="0.0"></div>
<div class="star" data-color="0.05"></div>
<div class="star" data-color="0.1"></div>
<div class="star" data-color="0.15"></div>
<div class="star" data-color="0.2"></div>
<div class="star" data-color="0.25"></div>
<div class="star" data-color="0.3"></div>
<div class="star" data-color="0.35"></div>
<div class="star" data-color="0.4"></div>
<div class="star" data-color="0.45"></div>
<div class="star" data-color="0.5"></div>
<div class="star" data-color="0.55"></div>
<div class="star" data-color="0.6"></div>
<div class="star" data-color="0.65"></div>
<div class="star" data-color="0.7"></div>
<div class="star" data-color="0.75"></div>
<div class="star" data-color="0.8"></div>
<div class="star" data-color="0.85"></div>
<div class="star" data-color="0.9"></div>
<div class="star" data-color="0.95"></div>
<div class="star" data-color="1.0"></div>

Colorize or replace the color of a textured image by a specified color using javascript and HTML5 canvas.Like color blend mode in PS

I have a textured image with color. What i want is to change the color of the image but retaining its texture. i already know how to get the data of an image,pixel by pixel(the rgb values).
here's the sample image:
i want it to be colored into these:

Here's an interactive solution. Run it from localhost and specify a valid image.
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
window.addEventListener('load', mInit, false);
function mInit()
{
var srcImg = byId('srcImg');
byId('hueSlider').style.width = srcImg.width + "px";
var destImg = byId('dstImg');
destImg.width = srcImg.width;
destImg.height = srcImg.height;
}
function colorize()
{
var curHue = byId('hueSlider').value;
var curSat = byId('satSlider').value;// / 100.0;
var curLum = byId('lumSlider').value / 100.0;
byId('hueVal').innerHTML = curHue;
byId('satVal').innerHTML = curSat;
byId('lumVal').innerHTML = curLum;
var dst = byId('dstImg');
var dstCtx = dst.getContext('2d');
var img = byId('srcImg');
dstCtx.drawImage(img, 0, 0);
var dstImgData = dstCtx.getImageData(0,0,dst.width,dst.height);
var i, j, r,g,b,hsl,rgb, index;
if (byId('colCheckBox').checked)
{
console.log('colourizing');
for (j=0; j<dst.height; j++)
{
for (i=0; i<dst.width; i++)
{
index = (i + j*dst.width) * 4; // 4 bytes/pixel, set index to point to r component of x,y in dst image
r = dstImgData.data[index+0];
g = dstImgData.data[index+1];
b = dstImgData.data[index+2];
hsl = rgb2hsl (r, g, b);
hsl.h = curHue;
//if (hsl.h > 359)
// hsl.h -= 360;
hsl.s = curSat;
hsl.l *= curLum;
rgb = hsl2rgb(hsl.h, hsl.s, hsl.l);
dstImgData.data[index+0] = rgb.r;
dstImgData.data[index+1] = rgb.g;
dstImgData.data[index+2] = rgb.b;
}
}
dstCtx.putImageData(dstImgData,0,0);
}
}
// code taken from nichabi.com
function hsl2rgb (h, s, l) {
var r, g, b, m, c, x
if (!isFinite(h)) h = 0
if (!isFinite(s)) s = 0
if (!isFinite(l)) l = 0
h /= 60
if (h < 0) h = 6 - (-h % 6)
h %= 6
s = Math.max(0, Math.min(1, s / 100))
l = Math.max(0, Math.min(1, l / 100))
c = (1 - Math.abs((2 * l) - 1)) * s
x = c * (1 - Math.abs((h % 2) - 1))
if (h < 1) {
r = c
g = x
b = 0
} else if (h < 2) {
r = x
g = c
b = 0
} else if (h < 3) {
r = 0
g = c
b = x
} else if (h < 4) {
r = 0
g = x
b = c
} else if (h < 5) {
r = x
g = 0
b = c
} else {
r = c
g = 0
b = x
}
m = l - c / 2
r = Math.round((r + m) * 255)
g = Math.round((g + m) * 255)
b = Math.round((b + m) * 255)
return { r: r, g: g, b: b }
}
// code taken from nichabi.com
function rgb2hsl (r, g, b)
{
var max, min, h, s, l, d
r /= 255
g /= 255
b /= 255
max = Math.max(r, g, b)
min = Math.min(r, g, b)
l = (max + min) / 2
if (max == min) {
h = s = 0
} else {
d = max - min
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0)
break
case g:
h = (b - r) / d + 2
break
case b:
h = (r - g) / d + 4
break
}
h /= 6
}
h = Math.floor(h * 360)
s = Math.floor(s * 100)
l = Math.floor(l * 100)
return { h: h, s: s, l: l }
}
</script>
<style>
body
{
background: #888;
}
#hueVal, #satVal, #lumVal
{
font-size: 0.8em;
font-weight: bold;
display: inline;
}
</style>
</head>
<body>
<img id='srcImg' src='handlebars.png'/><canvas id='dstImg'></canvas>
<br>
<label><input type='checkbox' id='colCheckBox' onchange='colorize()' />Colourize</label>
<br>
Hue<input id='hueSlider' onchange='colorize()' type='range' min='0' max='359'/><div id='hueVal'></div><br>
Saturation<input id='satSlider' onchange='colorize()' type='range' value='50' min='0' max='100'/><div id='satVal'></div><br>
Luminance<input id='lumSlider' onchange='colorize()' type='range' min='0' max='200'/><div id='lumVal'></div>
</body>
</html>

Smoothly fade image RGB by setting SRC data Javascript

I am working on emulating the behavior of the server box on https://mcprohosting.com/ but without sending multiple images (currently there are 3 images that rotate using javascripts .fadeout() calls and such.
My best attempt at doing this right now consists of parsing over the image pixels using HTML 5.
That being said there are a few problems:
I can't figure out how to smoothly transition between 3 preset colors.
The entire RGB spectrum is getting affected, whereas only the green colored section should be affected.
The logo is also being affected, how would I go about excluding this from the changed section? I presume I would have to manually specific the bounds of this element, but how would I do that specifically?
EDITED
I now convert RGB to HSL and vice-versa in order to do this change, the problem still lies in that the 'lightness' appears to be off. The dark parts of the server are too dark and lose detail
Here is the code:
<script type="text/javascript">
var mug = document.getElementById("server_green");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var originalPixels = null;
var currentPixels = null;
function getPixels(img) {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
originalPixels = ctx.getImageData(0, 0, img.width, img.height);
currentPixels = ctx.getImageData(0, 0, img.width, img.height);
img.onload = null;
}
var t = 0;
function changeColor() {
//Checks if the image was loaded
if(!originalPixels) {
return;
}
//var blue = changeHue(rgbToHex(originalPixels.data[i], originalPixels.data[i + 1], originalPixels.data[i + 2]), t);
//var green = changeHue(rgbToHex(originalPixels.data[i], originalPixels.data[i + 1], originalPixels.data[i + 2]), t);
for(var i = 0, L = originalPixels.data.length; i < L; i += 4) {
var red = changeHue(originalPixels.data[i], originalPixels.data[i + 1], originalPixels.data[i + 2], t);
// If it's not a transparent pixel
if(currentPixels.data[i + 3] > 0 && originalPixels.data[i + 1] <= 255) {
currentPixels.data[i] = originalPixels.data[i] / 255 * red[0];
currentPixels.data[i + 1] = originalPixels.data[i + 1] / 255 * red[1];
currentPixels.data[i + 2] = originalPixels.data[i + 2] / 255 * red[2];
}
}
ctx.putImageData(currentPixels, 0, 0);
var data = canvas.toDataURL("image/png");
mug.src = data;
t += 10;
console.log("Running: " + t);
}
$(document).ready(function() {
setInterval(function() {
changeColor();
}, 10);
});
function changeHue(r, g, b, degree) {
var hsl = rgbToHSL(r, g, b);
hsl.h += degree;
if (hsl.h > 360) {
hsl.h -= 360;
} else if (hsl.h < 0) {
hsl.h += 360;
}
return hslToRGB(hsl);
}
function rgbToHSL(r, g, b) {
r = r / 255;
g = g / 255;
b = b / 255;
var cMax = Math.max(r, g, b),
cMin = Math.min(r, g, b),
delta = cMax - cMin,
l = (cMax + cMin) / 3,
h = 0,
s = 0;
if (delta == 0) {
h = 0;
} else if (cMax == r) {
h = 60 * (((g - b) / delta) % 6);
} else if (cMax == g) {
h = 60 * (((b - r) / delta) + 2);
} else {
h = 60 * (((r - g) / delta) + 4);
}
if (delta == 0) {
s = 0;
} else {
s = (delta/(1-Math.abs(2*l - 1)))
}
return {
h: h,
s: s,
l: l
}
}
function hslToRGB(hsl) {
var h = hsl.h,
s = hsl.s,
l = hsl.l,
//Chroma
c = (1 - Math.abs(2 * l - 1)) * s,
x = c * ( 1 - Math.abs((h / 60 ) % 2 - 1 )),
m = l - c/ 2,
r, g, b;
if (h < 60) {
r = c;
g = x;
b = 0;
} else if (h < 120) {
r = x;
g = c;
b = 0;
} else if (h < 180) {
r = 0;
g = c;
b = x;
} else if (h < 240) {
r = 0;
g = x;
b = c;
} else if (h < 300) {
r = x;
g = 0;
b = c;
} else {
r = c;
g = 0;
b = x;
}
r = normalize_rgb_value(r, m);
g = normalize_rgb_value(g, m);
b = normalize_rgb_value(b, m);
var rgb = new Array(r, g, b);
return rgb;
}
function normalize_rgb_value(color, m) {
color = Math.floor((color + m) * 255);
if (color < 0) {
color = 0;
}
return color;
}
</script>
And the resulting image (too dark) http://puu.sh/614dn/bf85b336ca.jpg

alternate solution (still using one image):
use a transparent png and + a coloring layer (beneath the png)
change the coloring layer's color with css transitions or javascript

The problem you are facing is caused by the color model, for instance white is made from red, green and blue. by adjusting the blue, you also affect the white.
you could use a solid chroma key to achieve the desired result, test the pixel for the key color and adjust if it's a match.
Here is a tutorial.

Change the Hue of a RGB Color in javascript

Similar to this (how to increase brightness) I want to change the Hue of a RGB (Hex) Color.
Say changeHue("#FF0000", 40) returns "#FFAA00"

Here is the solution I found. I hope its usable and might help in the future. Any improvements or further solutions are very welcome.
Change Hue
// Changes the RGB/HEX temporarily to a HSL-Value, modifies that value
// and changes it back to RGB/HEX.
function changeHue(rgb, degree) {
var hsl = rgbToHSL(rgb);
hsl.h += degree;
if (hsl.h > 360) {
hsl.h -= 360;
}
else if (hsl.h < 0) {
hsl.h += 360;
}
return hslToRGB(hsl);
}
// exepcts a string and returns an object
function rgbToHSL(rgb) {
// strip the leading # if it's there
rgb = rgb.replace(/^\s*#|\s*$/g, '');
// convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF`
if(rgb.length == 3){
rgb = rgb.replace(/(.)/g, '$1$1');
}
var r = parseInt(rgb.substr(0, 2), 16) / 255,
g = parseInt(rgb.substr(2, 2), 16) / 255,
b = parseInt(rgb.substr(4, 2), 16) / 255,
cMax = Math.max(r, g, b),
cMin = Math.min(r, g, b),
delta = cMax - cMin,
l = (cMax + cMin) / 2,
h = 0,
s = 0;
if (delta == 0) {
h = 0;
}
else if (cMax == r) {
h = 60 * (((g - b) / delta) % 6);
}
else if (cMax == g) {
h = 60 * (((b - r) / delta) + 2);
}
else {
h = 60 * (((r - g) / delta) + 4);
}
if (delta == 0) {
s = 0;
}
else {
s = (delta/(1-Math.abs(2*l - 1)))
}
return {
h: h,
s: s,
l: l
}
}
// expects an object and returns a string
function hslToRGB(hsl) {
var h = hsl.h,
s = hsl.s,
l = hsl.l,
c = (1 - Math.abs(2*l - 1)) * s,
x = c * ( 1 - Math.abs((h / 60 ) % 2 - 1 )),
m = l - c/ 2,
r, g, b;
if (h < 60) {
r = c;
g = x;
b = 0;
}
else if (h < 120) {
r = x;
g = c;
b = 0;
}
else if (h < 180) {
r = 0;
g = c;
b = x;
}
else if (h < 240) {
r = 0;
g = x;
b = c;
}
else if (h < 300) {
r = x;
g = 0;
b = c;
}
else {
r = c;
g = 0;
b = x;
}
r = normalize_rgb_value(r, m);
g = normalize_rgb_value(g, m);
b = normalize_rgb_value(b, m);
return rgbToHex(r,g,b);
}
function normalize_rgb_value(color, m) {
color = Math.floor((color + m) * 255);
if (color < 0) {
color = 0;
}
return color;
}
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
Usage
changeHue("#FF0000", 40) --> returns #ffaa00
changeHue("#D61E1E", 180) --> returns #1ed6d6
changeHue("#2244BB", -80) --> returns #21bb66
References
RGB to HSL
HSL to RGB
Inital Hex to RGB Conversion

If you're not afraid of libraries and a few kb won't ruin your project, you could try sc-color rather than reimplementing the wheel...
Here's a jsfiddle using sc-color. The crux of the code is here:
var c = sc_color("#FF0000").hue(40).hex6();
$("#test").css("background-color", c);
Disclosure: I'm the author of sc-color

Javascript convert HSB/HSV color to RGB accurately

I need to accurately convert HSB to RGB but I am not sure how to get around the problem of turning decimals into whole numbers without rounding. This is the current function I have out of a colorpicker library:
HSBToRGB = function (hsb) {
var rgb = { };
var h = Math.round(hsb.h);
var s = Math.round(hsb.s * 255 / 100);
var v = Math.round(hsb.b * 255 / 100);
if (s == 0) {
rgb.r = rgb.g = rgb.b = v;
} else {
var t1 = v;
var t2 = (255 - s) * v / 255;
var t3 = (t1 - t2) * (h % 60) / 60;
if (h == 360) h = 0;
if (h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3 }
else if (h < 120) { rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3 }
else if (h < 180) { rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3 }
else if (h < 240) { rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3 }
else if (h < 300) { rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3 }
else if (h < 360) { rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3 }
else { rgb.r = 0; rgb.g = 0; rgb.b = 0 }
}
return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
As you can see the inaccuracy in this function comes from the Math.round

From Parthik Gosar's link in this comment with slight modification to let you enter each value independently or all at once as an object
/* accepts parameters
* h Object = {h:x, s:y, v:z}
* OR
* h, s, v
*/
function HSVtoRGB(h, s, v) {
var r, g, b, i, f, p, q, t;
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255)
};
}
This code expects 0 <= h, s, v <= 1, if you're using degrees or radians, remember to divide them out.
The returned 0 <= r, g, b <= 255 are rounded to the nearest Integer. If you don't want this behaviour remove the Math.rounds from the returned object.
And the reverse (with less division)
/* accepts parameters
* r Object = {r:x, g:y, b:z}
* OR
* r, g, b
*/
function RGBtoHSV(r, g, b) {
if (arguments.length === 1) {
g = r.g, b = r.b, r = r.r;
}
var max = Math.max(r, g, b), min = Math.min(r, g, b),
d = max - min,
h,
s = (max === 0 ? 0 : d / max),
v = max / 255;
switch (max) {
case min: h = 0; break;
case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
case g: h = (b - r) + d * 2; h /= 6 * d; break;
case b: h = (r - g) + d * 4; h /= 6 * d; break;
}
return {
h: h,
s: s,
v: v
};
}
This code will output 0 <= h, s, v <= 1, but this time takes any 0 <= r, g, b <= 255 (does not need to be an integer)
For completeness,
function HSVtoHSL(h, s, v) {
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
var _h = h,
_s = s * v,
_l = (2 - s) * v;
_s /= (_l <= 1) ? _l : 2 - _l;
_l /= 2;
return {
h: _h,
s: _s,
l: _l
};
}
function HSLtoHSV(h, s, l) {
if (arguments.length === 1) {
s = h.s, l = h.l, h = h.h;
}
var _h = h,
_s,
_v;
l *= 2;
s *= (l <= 1) ? l : 2 - l;
_v = (l + s) / 2;
_s = (2 * s) / (l + s);
return {
h: _h,
s: _s,
v: _v
};
}
All of these values should be in the range 0 to 1. For HSL<->RGB go via HSV.

Short but precise
Try this (more: rgb2hsv, hsl2rgb, rgb2hsl and sl22sv)
// input: h in [0,360] and s,v in [0,1] - output: r,g,b in [0,1]
function hsv2rgb(h,s,v)
{
let f= (n,k=(n+h/60)%6) => v - v*s*Math.max( Math.min(k,4-k,1), 0);
return [f(5),f(3),f(1)];
}
// oneliner version
let hsv2rgb=(h,s,v,f=(n,k=(n+h/60)%6)=>v-v*s*Math.max(Math.min(k,4-k,1),0))=>[f(5),f(3),f(1)];
console.log(`hsv: (340,0.3,0.9) -> rgb: (${hsv2rgb(340,0.3,0.9)})`)
// ---------------
// UX
// ---------------
rgb= [0,0,0];
hs= [0,0,0];
function rgb2hsv(r,g,b) {
let v=Math.max(r,g,b), n=v-Math.min(r,g,b);
let h= n && ((v==r) ? (g-b)/n : ((v==g) ? 2+(b-r)/n : 4+(r-g)/n));
return [60*(h<0?h+6:h), v&&n/v, v];
}
function changeRGB(i,e) {
rgb[i]=e.target.value/255;
hs = rgb2hsv(...rgb);
refresh();
}
function changeHS(i,e) {
hs[i]=e.target.value/(i?255:1);
rgb= hsv2rgb(...hs);
refresh();
}
function refresh() {
rr = rgb.map(x=>x*255|0).join(', ')
tr = `RGB: ${rr}`
th = `HSV: ${hs.map((x,i)=>i? (x*100).toFixed(2)+'%':x|0).join(', ')}`
box.style.backgroundColor=`rgb(${rr})`;
infoRGB.innerHTML=`${tr}`;
infoHS.innerHTML =`${th}`;
r.value=rgb[0]*255;
g.value=rgb[1]*255;
b.value=rgb[2]*255;
h.value=hs[0];
s.value=hs[1]*255;
v.value=hs[2]*255;
}
refresh();
body { display: flex; }
.box { width: 50px; height: 50px; margin: 20px; }
<div>
<input id="r" type="range" min="0" max="255" oninput="changeRGB(0,event)">R<br>
<input id="g" type="range" min="0" max="255" oninput="changeRGB(1,event)">G<br>
<input id="b" type="range" min="0" max="255" oninput="changeRGB(2,event)">B<br>
<pre id="infoRGB"></pre>
</div>
<div id="box" class="box hsl"></div>
<div>
<input id="h" type="range" min="0" max="360" oninput="changeHS(0,event)">H<br>
<input id="s" type="range" min="0" max="255" oninput="changeHS(1,event)">S<br>
<input id="v" type="range" min="0" max="255" oninput="changeHS(2,event)">V<br>
<pre id="infoHS"></pre><br>
</div>
Here are formulas which I discover and precisely describe in wiki + error analysis

Given the rising popularity of npm I think it is worth to mention a package containing all this functions through a simple API:
npm install colorsys
var colorsys = require('colorsys')
colorsys.rgb_to_hsv({ r: 255, g: 255, b: 255 })
// { h: 0 , s: 0 , v: 100 }
For the browser:
<script src="http://netbeast.github.io/colorsys/browser.js"></script>
colorsys.rgb_to_hex(h, s, v)
// #hexcolor

I once wrote this function:
function mix(a, b, v)
{
return (1-v)*a + v*b;
}
function HSVtoRGB(H, S, V)
{
var V2 = V * (1 - S);
var r = ((H>=0 && H<=60) || (H>=300 && H<=360)) ? V : ((H>=120 && H<=240) ? V2 : ((H>=60 && H<=120) ? mix(V,V2,(H-60)/60) : ((H>=240 && H<=300) ? mix(V2,V,(H-240)/60) : 0)));
var g = (H>=60 && H<=180) ? V : ((H>=240 && H<=360) ? V2 : ((H>=0 && H<=60) ? mix(V2,V,H/60) : ((H>=180 && H<=240) ? mix(V,V2,(H-180)/60) : 0)));
var b = (H>=0 && H<=120) ? V2 : ((H>=180 && H<=300) ? V : ((H>=120 && H<=180) ? mix(V2,V,(H-120)/60) : ((H>=300 && H<=360) ? mix(V,V2,(H-300)/60) : 0)));
return {
r : Math.round(r * 255),
g : Math.round(g * 255),
b : Math.round(b * 255)
};
}
It expects 0<=H<=360, 0<=S<=1 and 0<=V<=1 and returns an object that contains R, G and B (integer values between 0 and 255). I used this image to create the code.

There's a bug in Paul S's HSVtoHSL function: when the v input is 0 we get a divide-by-zero problem and the s output becomes NaN. Here's a fix:
function HSVtoHSL(h, s, v) {
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
var _h = h,
_s = s * v,
_l = (2 - s) * v;
_s /= (_l <= 1) ? (_l === 0 ? 1 : _l) : 2 - _l;
_l /= 2;
return {
h: _h,
s: _s,
l: _l;
};
}
P.S. I would have added this as a comment on Paul S.'s post, but I'm new and the system told me I don't have enough rep.

Here is the algorithm in unityscript, you'll have to rewrite the float, mathf.floor functions and the output is a vector3 of 3 floats.
EDIT This was the first answer on this page and it seemed worthwile to provide this much help when there weren't any other answers, with the small reservation that you have to convert it to a nearly identical version in JS.
function HSVToRGB(h : float, s : float, v : float) {
h=h%1;
s=s%1;
v=v%1;
var r : float;
var g : float;
var b : float;
var i : float;
var f : float;
var p : float;
var q : float;
var t : float;
i = Mathf.Floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v; g = t; b = p; break;
case 1: r = q; g = v; b = p; break;
case 2: r = p; g = v; b = t; break;
case 3: r = p; g = q; b = v; break;
case 4: r = t; g = p; b = v; break;
case 5: r = v; g = p; b = q; break;
}
return Color(r,g,b);
}

Develop Reference

JavaScript is the programming language of the Web.

Converting between color models - javascript

Related

Convert a 0-1 value to a hex colour?

Colorize or replace the color of a textured image by a specified color using javascript and HTML5 canvas.Like color blend mode in PS

Smoothly fade image RGB by setting SRC data Javascript

Change the Hue of a RGB Color in javascript

Javascript convert HSB/HSV color to RGB accurately

Categories

Resources