Skip to content

Instantly share code, notes, and snippets.

@tdbe

tdbe/proper-js-color-conversion-algorithms.html

Forked from mjackson/color-conversion-algorithms.js
Last active May 11, 2021 00:41
Show Gist options
  • Save tdbe/0f30d588bed2d4b54bd8001e03acef06 to your computer and use it in GitHub Desktop.
Save tdbe/0f30d588bed2d4b54bd8001e03acef06 to your computer and use it in GitHub Desktop.
Download ZIP
rgbToHex, hexToRgb, hslToRgb, rgbToHsl, hslToRgb, rgbToHsv, hsvToRgb, hslToHex, hsvToHex, hexToHsv --- that's right you've finally found complete and proper color conversion algorithms in native JavaScript. Actually works as expected: in: 3 vals in browser format, out: array of 3 vals in browser format. Think of all the druggery I saved you :)
Raw
proper-js-color-conversion-algorithms.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Color Picker</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/style.css?v=1.0">
</head>
<body>
<H1>Color Picker</H1>
<H3>Using native javascript color conversion from any to any</H3>
<input type="color" class="form-control" id="html5colorpicker" onchange="clickColor(this)" value="#ff0000">
<!--div id="colorPreview"></div-->
<br/>
<br/>
<span>Color (rgb) = <span id="colorPickerResult"></<span></span>
<br/>
<br/>
<br/>
<div class="slidecontainer">
<p>Hue: <span id="hueDemoValue"></span></p>
<input type="range" min="0" max="359" value="50" class="slider" id="hueRange"/>
<br/>
<p>Sat: <span id="satDemoValue"></span></p>
<input type="range" min="0" max="100" value="50" class="slider" id="satRange"/>
<br/>
<p>Lum: <span id="valDemoValue"></span></p>
<input type="range" min="0" max="100" value="50" class="slider" id="valRange"/>
</div>
<script>
var m_colorPicker = document.getElementById("html5colorpicker");
var m_sliderHue = document.getElementById("hueRange");
var m_sliderSat = document.getElementById("satRange");
var m_sliderVal = document.getElementById("valRange");
var m_outputHue = document.getElementById("hueDemoValue");
var m_outputSat = document.getElementById("satDemoValue");
var m_outputVal = document.getElementById("valDemoValue");
m_outputHue.innerHTML = m_sliderHue.value;
m_outputSat.innerHTML = m_sliderSat.value;
m_outputVal.innerHTML = m_sliderVal.value;
var m_storedColorPickerValue = m_colorPicker.value = "#4d995a";
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
function cutHex(h){
return (h.charAt(0)=="#") ? h.substring(1,7):h
}
function hexToRgb(h){
var r = parseInt((cutHex(h)).substring(0,2),16);
var g = parseInt((cutHex(h)).substring(2,4), 16);
var b = parseInt((cutHex(h)).substring(4,6),16);
return[r,g,b];
}
function hslToRgb(h, s, l){
var r, g, b;
if(s == 0){
r = g = b = l; // achromatic
}else{
var hue2rgb = 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 [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
//https://gist.github.com/demonixis/4202528/5f0ce3c2622fba580e78189cfe3ff0f9dd8aefcc
function lerp (value1, value2, amount) {
amount = amount < 0 ? 0 : amount;
amount = amount > 1 ? 1 : amount;
return value1 + (value2 - value1) * amount;
}
/*
* 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 the same way as your browser DevTools color picker.
*
* @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;
}
h = Math.round(lerp(0,359,h));
s = Math.round(s*100);
l = Math.round(l*100);
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 the same format as in your browser DevTools color picker
* 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) {
h/=359;
s/=100;
l/=100;
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 [ Math.round(r * 255), Math.round(g * 255), Math.round(b * 255) ];
}
/**
* Converts an RGB color value to HSV. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSV_color_space.
* Assumes r, g, and b are contained in the set [0, 255] and
* returns h, s, and v the same way as your browser DevTools color picker
*
* @param Number r The red color value
* @param Number g The green color value
* @param Number b The blue color value
* @return Array The HSV representation
*/
function rgbToHsv(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, v = max;
var d = max - min;
s = max == 0 ? 0 : d / max;
if (max == min) {
h = 0; // achromatic
} else {
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.round(lerp(0,359,h));
s = Math.round(s*100);
v = Math.round(v*100);
return [ h, s, v ];
}
/**
* Converts an HSV color value to RGB. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSV_color_space.
* Assumes h, s, and v are the same format as your browser DevTools color picker
* returns r, g, and b in the set [0, 255].
*
* @param Number h The hue
* @param Number s The saturation
* @param Number v The value
* @return Array The RGB representation
*/
function hsvToRgb(h, s, v) {
h/=359;
s/=100;
v/=100;
var r, g, b;
var i = Math.floor(h * 6);
var f = h * 6 - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var 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 [ Math.round(r * 255), Math.round(g * 255), Math.round(b * 255) ];
}
function hslToHex(h, s, l){
var rgb = hslToRgb(h, s, l);
return rgbToHex(rgb[0],rgb[1],rgb[2]);
}
function hsvToHex(h, s, l){
var rgb = hsvToRgb(h, s, l);
return rgbToHex(rgb[0],rgb[1],rgb[2]);
}
function hexToHsv(hex) {
var rgb = hexToRgb(hex);
var hsv = rgbToHsv(rgb[0],rgb[1],rgb[2]);
return hsv;
}
function clickColor(colorInput){
console.log("clickColor: colorInput: "+colorInput);
var rgb = hexToRgb(colorInput.value == null? colorInput : colorInput.value);
document.getElementById("colorPickerResult").innerHTML = rgb[0]+", "+rgb[1]+", "+rgb[2];
}
m_sliderHue.oninput = function(refreshOthers = true) {
m_outputHue.innerHTML = this.value;
UpdateColorPickerHue(this.value, refreshOthers);
}
m_sliderSat.oninput = function(refreshOthers = true) {
m_outputSat.innerHTML = this.value;
UpdateColorPickerSat(this.value, refreshOthers);
}
m_sliderVal.oninput = function(refreshOthers = true) {
m_outputVal.innerHTML = this.value;
UpdateColorPickerVal(this.value, refreshOthers);
}
function UpdateColorPickerHue(hue, refreshOthers = true){
console.log("UpdateColorPicker hue: "+hue);
var pickerHex = m_storedColorPickerValue;
console.log("pickerHex: "+pickerHex);
var pkHSV = hexToHsv(pickerHex);
console.log("pkHSV b4: "+pkHSV[0]+"; "+pkHSV[1]+"; "+pkHSV[2]);
pkHSV[0] = hue;
var backToHex = hsvToHex((pkHSV[0]), (pkHSV[1]), (pkHSV[2]));
console.log("pkHSV: "+(pkHSV[0])+"; "+(pkHSV[1])+"; "+(pkHSV[2]));
console.log("backToHex: "+backToHex);
m_storedColorPickerValue = backToHex;
//m_colorPicker.style.backgroundColor = backToHex;
m_colorPicker.value = backToHex;
clickColor(backToHex);
if(refreshOthers){
//m_sliderHue.oninput(false);
m_sliderSat.oninput(false);
m_sliderVal.oninput(false);
}
}
function UpdateColorPickerSat(sat, refreshOthers = true){
console.log("UpdateColorPicker sat: "+sat);
var pickerHex = m_storedColorPickerValue;
console.log("pickerHex: "+pickerHex);
var pkHSV = hexToHsv(pickerHex);
console.log("pkHSV b4: "+pkHSV[0]+"; "+pkHSV[1]+"; "+pkHSV[2]);
pkHSV[1] = sat;
var backToHex = hsvToHex((pkHSV[0]), (pkHSV[1]), (pkHSV[2]));
console.log("pkHSV: "+(pkHSV[0])+"; "+(pkHSV[1])+"; "+(pkHSV[2]));
console.log("backToHex: "+backToHex);
m_storedColorPickerValue = backToHex;
//m_colorPicker.style.backgroundColor = backToHex;
m_colorPicker.value = backToHex;
clickColor(backToHex);
if(refreshOthers){
m_sliderHue.oninput(false);
//m_sliderSat.oninput(false);
m_sliderVal.oninput(false);
}
}
function UpdateColorPickerVal(val, refreshOthers = true){
console.log("UpdateColorPicker val: "+val);
var pickerHex = m_storedColorPickerValue;
console.log("pickerHex: "+pickerHex);
var pkHSV = hexToHsv(pickerHex);
console.log("pkHSV b4: "+pkHSV[0]+"; "+pkHSV[1]+"; "+pkHSV[2]);
pkHSV[2] = val;
var backToHex = hsvToHex((pkHSV[0]), (pkHSV[1]), (pkHSV[2]));
console.log("pkHSV: "+(pkHSV[0])+"; "+(pkHSV[1])+"; "+(pkHSV[2]));
console.log("backToHex: "+backToHex);
m_storedColorPickerValue = backToHex;
//m_colorPicker.style.backgroundColor = backToHex;
m_colorPicker.value = backToHex;
clickColor(backToHex);
if(refreshOthers){
m_sliderHue.oninput(false);
m_sliderSat.oninput(false);
//m_sliderVal.oninput(false);
}
}
window.onload = (clickColor(m_colorPicker));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment