JavaScript Color Converter Functions
JavaScript Color Converter Script, Hex color converter RGB color converter HSL color converter, HEXT to RGB HEXT to HSL RGB to HEX
Hex to RGB
Hex to HSL
Hex to RGBA
RBG to Hex
R B G to Hex
RBG to HSL
R B G to HSL
RBGA to HSLA
R B G A to HSLA
H S L to Hex
HSL to Hex
HSL to RGB
HSL(A) to RGBA
Click on the Plus button to view the code
Hex Converter
function HEXtoRGB(hex) {
hex = hex.replace(/#/g, '');
if (hex.length === 3) {
hex = hex.split('').map(function (hex) {
return hex + hex;
}).join('');
}
// validate hex format
var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex);
if (result) {
var red = parseInt(result[1], 16);
var green = parseInt(result[2], 16);
var blue = parseInt(result[3], 16);
return [red, green, blue];
} else {
// invalid color
return null;
}
}<h1 id="preview-color"></h1>
<input type="text" id="hex-color" value="#076591">
<button id="convert-hex-to-rgb">Convert</button>
<script>
// support hex format (#f00, #ff0000, f00, ff0000)
document.getElementById("convert-hex-to-rgb").onclick = function(){
let hex_color = document.getElementById("hex-color").value;
var preview_color = document.getElementById("preview-color");
let result = HEXtoRGB(hex_color );
if(!result){
preview_color.innerHTML= 'invalid color';
preview_color.style.backgroundColor = '';
preview_color.style.color = 'red';
return;
}
/*
var red = result[0];
var green = result[1];
var blue = result[2];
let rgb = 'rgb('+red+','+green+','+blue+')';
*/
// shorthand result
let rgb = 'rgb('+result.join(', ')+')';
preview_color.innerHTML= rgb;
preview_color.style.backgroundColor = rgb;
};
</script>function HEXtoHSL(hex) {
hex = hex.replace(/#/g, '');
if (hex.length === 3) {
hex = hex.split('').map(function (hex) {
return hex + hex;
}).join('');
}
var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex);
if (!result) {
return null;
}
var r = parseInt(result[1], 16);
var g = parseInt(result[2], 16);
var b = parseInt(result[3], 16);
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;
} 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;
}
s = s * 100;
s = Math.round(s);
l = l * 100;
l = Math.round(l);
h = Math.round(360 * h);
return {
h: h,
s: s,
l: l
};
}<h1 id="preview-color"></h1>
<input type="text" id="hex-color" value="#076591">
<button id="convert-hex-to-hsl">Convert</button>
<script>
// support hex format (#f00, #ff0000, f00, ff0000)
document.getElementById("convert-hex-to-hsl").onclick = function(){
let hex_color = document.getElementById("hex-color").value;
var preview_color = document.getElementById("preview-color");
let result = HEXtoHSL(hex_color );
if(!result){
preview_color.innerHTML= 'invalid color';
preview_color.style.backgroundColor = '';
preview_color.style.color = 'red';
return;
}
let hsl = 'hsl('+result.h+', '+result.s+'%, '+result.l+'%)';
preview_color.innerHTML= hsl;
preview_color.style.backgroundColor = hsl;
};
</script>function HEXtoRGBA(hex, opacity) {
hex = hex.replace(/#/g, '');
if (hex.length === 3) {
hex = hex.split('').map(function (hex) {
return hex + hex;
}).join('');
}
opacity = opacity == void 0 ? 1 : opacity;
var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex);
if (!result) {
return null;
}
var red = parseInt(result[1], 16);
var green = parseInt(result[2], 16);
var blue = parseInt(result[3], 16);
return [red, green, blue, opacity];
}<div id="preview-color"></div>
<input type="text" id="hex-color" value="#076591">
opacity <input type="number" id="opacity" value="0.5" min="0" max="1" step="0.01">
<button id="convert-hex-to-rgba">Convert</button>
<script>
document.getElementById("convert-hex-to-rgba").onclick = function(){
let hex_color = document.getElementById("hex-color").value;
let opacity = document.getElementById("opacity").value;
var preview_color = document.getElementById("preview-color");
//opacity 0.01 - 1;
let result = HEXtoRGBA(hex_color, opacity);
if(!result){
preview_color.innerHTML= 'invalid color';
preview_color.style.backgroundColor = '';
preview_color.style.color = 'red';
return;
}
/*
var red = result[0];
var green = result[1];
var blue = result[2];
var opacity = result[2];
let rgba = 'rgba('+red+','+green+','+blue+', '+opacity+')';
*/
let rgba = 'rgba('+result.join(', ')+')';
preview_color.innerHTML= rgba;
preview_color.style.backgroundColor = rgba;
};
</script>RGB Converter
function RGBtoHEX(rgb) {
rgb = rgb.match(/^rgba?\(\s?(\d+),?\s?(\d+),?\s?(\d+),?\s?\/?\s?(\d?\.?\d+|\d+)%?\)$/i);
let hex = '';
if(rgb) {
var red = rgb[1] < 0 ? 0 : rgb[1] > 255 ? 255: rgb[1];
var green = rgb[2] < 0 ? 0 : rgb[2] > 255 ? 255: rgb[2];
var blue = rgb[3] < 0 ? 0 : rgb[3] > 255 ? 255: rgb[3];
hex = "#" +
("0" + parseInt(red, 10).toString(16)).slice(-2) +
("0" + parseInt(green, 10).toString(16)).slice(-2) +
("0" + parseInt(blue, 10).toString(16)).slice(-2)
}
return hex;
}<h1 id="preview-color"></h1>
<input type="text" id="rgb-color" value="rgb(7, 101, 145)">
<button id="convert-rgb-to-hex">Convert</button>
<script>
//rbg support format
// rgb(7, 101, 145)
// rgb(7 101 145)
// rgba(7, 101, 145, 0.5)
// rgb(7 101 145 / 69%)
document.getElementById("convert-rgb-to-hex").onclick = function(){
var preview_color = document.getElementById("preview-color");
let rgb_color = document.getElementById("rgb-color").value;
let result = RGBtoHEX(rgb_color);
if(!result){
preview_color.innerHTML= 'invalid color';
preview_color.style.backgroundColor = '';
preview_color.style.color = 'red';
return;
}
preview_color.innerHTML= result;
preview_color.style.backgroundColor = result;
};
</script>function R_G_BtoHEX(red, green, blue) {
red = red < 0 ? 0 : red > 255 ? 255: red;
green = green < 0 ? 0 : green > 255 ? 255: green;
blue = blue < 0 ? 0 : blue > 255 ? 255: blue;
return "#" +
("0" + parseInt(red, 10).toString(16)).slice(-2) +
("0" + parseInt(green, 10).toString(16)).slice(-2) +
("0" + parseInt(blue, 10).toString(16)).slice(-2);
}<h1 id="preview-color"></h1>
Red:<input type="number" id="red" value="7" max="255" min="0">
Green:<input type="number" id="green" value="101" max="255" min="0">
Blue:<input type="number" id="blue" value="145" max="255" min="0">
<button id="convert-rgb-to-hex">Convert</button>
<script>
document.getElementById("convert-rgb-to-hex").onclick = function(){
var preview_color = document.getElementById("preview-color");
let red = document.getElementById("red").value;
let green = document.getElementById("green").value;
let blue = document.getElementById("blue").value;
let result = R_G_BtoHEX(red, green, blue);
preview_color.innerHTML= result;
preview_color.style.backgroundColor = result;
};
</script>function rgbToHsl(rgb) {
rgb = rgb.match(/^rgba?\(\s?(\d+),?\s?(\d+),?\s?(\d+),?\s?\/?\s?(\d?\.?\d+|\d+)%?\)$/i);
if (!rgb) {
return null;
}
var red = rgb[1] < 0 ? 0 : rgb[1] > 255 ? 255 : rgb[1];
var green = rgb[2] < 0 ? 0 : rgb[2] > 255 ? 255 : rgb[2];
var blue = rgb[3] < 0 ? 0 : rgb[3] > 255 ? 255 : rgb[3];
var r = red / 255,
g = green / 255,
b = blue / 255,
min = Math.min(r, g, b),
max = Math.max(r, g, b),
delta = max - min,
h, s, l;
if (max == min) {
h = 0;
} else if (r == max) {
h = (g - b) / delta;
} else if (g == max) {
h = 2 + (b - r) / delta;
} else if (b == max) {
h = 4 + (r - g) / delta;
}
h = Math.min(h * 60, 360);
if (h < 0) h += 360;
l = (min + max) / 2;
if (max == min) s = 0;
else if (l <= 0.5) s = delta / (max + min);
else s = delta / (2 - max - min);
return {
h: Math.round(h),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}<h1 id="preview-color"></h1>
<input type="text" id="rgb-color" value="rgb(7, 101, 145)">
<button id="convert-rgb-to-hsl">Convert</button>
<script>
document.getElementById("convert-rgb-to-hsl").onclick = function(){
var preview_color = document.getElementById("preview-color");
let rgb = document.getElementById("rgb-color").value;
let result = rgbToHsl(rgb);
if(!result){
preview_color.innerHTML= 'invalid color';
preview_color.style.backgroundColor = '';
preview_color.style.color = 'red';
return;
}
let hsl = "hsl(" + result.h + ", " + result.s + "%, " + result.l + "%)";
preview_color.innerHTML= hsl;
preview_color.style.backgroundColor = hsl;
};
</script>function R_G_BtoHSL(red, green, blue) {
red = red < 0 ? 0 : red > 255 ? 255 : red;
green = green < 0 ? 0 : green > 255 ? 255 : green;
blue = blue < 0 ? 0 : blue > 255 ? 255 : blue;
var r = red / 255,
g = green / 255,
b = blue / 255,
min = Math.min(r, g, b),
max = Math.max(r, g, b),
delta = max - min,
h, s, l;
if (max == min) {
h = 0;
} else if (r == max) {
h = (g - b) / delta;
} else if (g == max) {
h = 2 + (b - r) / delta;
} else if (b == max) {
h = 4 + (r - g) / delta;
}
h = Math.min(h * 60, 360);
if (h < 0) h += 360;
l = (min + max) / 2;
if (max == min) s = 0;
else if (l <= 0.5) s = delta / (max + min);
else s = delta / (2 - max - min);
return {
h: Math.round(h),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}<h1 id="preview-color"></h1>
Red:<input type="number" id="red" value="7" max="255" min="0">
Green:<input type="number" id="green" value="101" max="255" min="0">
Blue:<input type="number" id="blue" value="145" max="255" min="0">
<button id="convert-r-g-b-to-hsl">Convert</button>
<script>
document.getElementById("convert-r-g-b-to-hsl").onclick = function(){
var preview_color = document.getElementById("preview-color");
let red = document.getElementById("red").value;
let green = document.getElementById("green").value;
let blue = document.getElementById("blue").value;
let result = R_G_BtoHSL(red, green, blue);
let hsl = "hsl(" + result.h + ", " + result.s + "%, " + result.l + "%)";
preview_color.innerHTML= hsl;
preview_color.style.backgroundColor = hsl;
};
</script>function RGBAtoHSLA(rgba) {
rgba = rgba.match(/^rgba?\(\s?(\d+),?\s?(\d+),?\s?(\d+),?\s?\/?\s?(\d?\.?\d+|\d+)%?\)$/i);
if (!rgba) {
return null;
}
var red = rgba[1] < 0 ? 0 : rgba[1] > 255 ? 255 : rgba[1];
var green = rgba[2] < 0 ? 0 : rgba[2] > 255 ? 255 : rgba[2];
var blue = rgba[3] < 0 ? 0 : rgba[3] > 255 ? 255 : rgba[3];
var opacity = rgba[4] < 0 ? 0.1 : rgba[4] > 2 ? (rgba[4] / 100) : rgba[4];
var r = red / 255,
g = green / 255,
b = blue / 255,
min = Math.min(r, g, b),
max = Math.max(r, g, b),
delta = max - min,
h, s, l;
if (max == min) {
h = 0;
} else if (r == max) {
h = (g - b) / delta;
} else if (g == max) {
h = 2 + (b - r) / delta;
} else if (b == max) {
h = 4 + (r - g) / delta;
}
h = Math.min(h * 60, 360);
if (h < 0) h += 360;
l = (min + max) / 2;
if (max == min) s = 0;
else if (l <= 0.5) s = delta / (max + min);
else s = delta / (2 - max - min);
return {
h: Math.round(h),
s: Math.round(s * 100),
l: Math.round(l * 100),
a: opacity
};
}<h1 id="preview-color"></h1>
<input type="text" id="rgba-color" value="rgba(7, 101, 145, 0.5)">
<button id="convert-rgba-to-hsla">Convert</button>
<script>
document.getElementById("convert-rgba-to-hsla").onclick = function(){
var preview_color = document.getElementById("preview-color");
let rgba_color = document.getElementById("rgba-color").value;
let result = RGBAtoHSLA(rgba_color);
if(!result){
preview_color.innerHTML= 'invalid color';
preview_color.style.backgroundColor = '';
preview_color.style.color = 'red';
return;
}
let hsla = "hsla("+result.h+", "+result.s+"%, "+result.l+"%, "+result.a+")";
preview_color.innerHTML= hsla;
preview_color.style.backgroundColor = hsla;
};
</script>function R_G_BtoHSLA(red, green, blue, opacity) {
red = red < 0 ? 0 : red > 255 ? 255 : red;
green = green < 0 ? 0 : green > 255 ? 255 : green;
blue = blue < 0 ? 0 : blue > 255 ? 255 : blue;
opacity = opacity < 0 ? 0.1 : opacity > 1 ? 1 : opacity;
var r = red / 255,
g = green / 255,
b = blue / 255,
min = Math.min(r, g, b),
max = Math.max(r, g, b),
delta = max - min,
h, s, l;
if (max == min) {
h = 0;
} else if (r == max) {
h = (g - b) / delta;
} else if (g == max) {
h = 2 + (b - r) / delta;
} else if (b == max) {
h = 4 + (r - g) / delta;
}
h = Math.min(h * 60, 360);
if (h < 0) h += 360;
l = (min + max) / 2;
if (max == min) s = 0;
else if (l <= 0.5) s = delta / (max + min);
else s = delta / (2 - max - min);
return {
h: Math.round(h),
s: Math.round(s * 100),
l: Math.round(l * 100),
a: opacity
};
}<h1 id="preview-color"></h1>
Red:<input type="number" id="red" value="7" max="255" min="0">
Green:<input type="number" id="green" value="101" max="255" min="0">
Blue:<input type="number" id="blue" value="145" max="255" min="0">
opacity:<input type="number" id="opacity" value="0.5" max="1" min="0" step="0.01">
<button id="convert-r-g-b-a-to-hsla">Convert</button>
<script>
document.getElementById("convert-r-g-b-a-to-hsla").onclick = function(){
var preview_color = document.getElementById("preview-color");
let red = document.getElementById("red").value;
let green = document.getElementById("green").value;
let blue = document.getElementById("blue").value;
// opacity 0.01 - 1
let opacity = document.getElementById("opacity").value;
let result = R_G_BtoHSLA(red, green, blue, opacity);
let hsl = "hsla("+result.h+", "+result.s+"%, "+result.l+"%, "+result.a+")";
preview_color.innerHTML= hsl;
preview_color.style.backgroundColor = hsl;
};
</script>HSL Converter
function h_s_lToHex(h, s, l) {
h /= 360;
s /= 100;
l /= 100;
var r, g, b;
if (s === 0) {
r = g = b = l;
} else {
const hue2rgb = function(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;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
const toHex = function(x) {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#'+toHex(r)+toHex(g)+toHex(b);
}<h1 id="preview-color"></h1>
hue: <input type="number" id="hue" value="139" max="360" min="0">
saturation: <input type="number" id="saturation" value="80" max="100" min="0">
lightness: <input type="number" id="lightness" value="46" max="100" min="0">
<button id="convert-hsl-to-hex">Convert</button>
<script>
document.getElementById("convert-hsl-to-hex").onclick = function(){
var preview_color = document.getElementById("preview-color");
let hue = document.getElementById("hue").value;
let saturation = document.getElementById("saturation").value;
let lightness = document.getElementById("lightness").value;
let result = h_s_lToHex(hue, saturation, lightness);
preview_color.innerHTML= result;
preview_color.style.backgroundColor = result;
};
</script>function hslToHex(hsl) {
hsl = hsl.match(/^hsla?\(\s?(\d+)(?:deg)?,?\s(\d+)%,?\s(\d+)%,?\s?(?:\/\s?\d+%|\s+[\d+]?\.?\d+)?\)$/i);
if(!hsl){
return null;
}
let h = hsl[1];
let s = hsl[2];
let l = hsl[3];
h /= 360;
s /= 100;
l /= 100;
let r, g, b;
if (s === 0) {
r = g = b = l;
} else {
const hue2rgb = function(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;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
const toHex = function(x) {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#'+toHex(r)+toHex(g)+toHex(b);
}<h1 id="preview-color"></h1>
<input type="text" id="hsl" value="hsl(199, 91%, 30%)">
<button id="convert-hsl-to-hex">Convert</button>
<script>
/* support HSL color format
hsl(188deg 100% 48%)
hsl(120, 60%, 70%)
hsla(0, 100%, 50%, 0.5)
hsl(120deg 60% 70% / 81%)
*/
document.getElementById("convert-hsl-to-hex").onclick = function(){
var preview_color = document.getElementById("preview-color");
let hsl = document.getElementById("hsl").value;
let result = hslToHex(hsl);
if(!result){
preview_color.innerHTML= 'invalid color';
preview_color.style.backgroundColor = '';
preview_color.style.color = 'red';
return;
}
preview_color.innerHTML= result;
preview_color.style.backgroundColor = result;
};
</script>function hslToRgb(hsl) {
hsl = hsl.match(/^hsla?\(\s?(\d+)(?:deg)?,?\s(\d+)%,?\s(\d+)%,?\s?(?:\/\s?\d+%|\s+[\d+]?\.?\d+)?\)$/i);
if (!hsl) {
return null;
}
var h = hsl[1];
var s = hsl[2];
var l = hsl[3];
s /= 100;
l /= 100;
C = (1 - Math.abs(2 * l - 1)) * s;
var hue = h / 60;
X = C * (1 - Math.abs(hue % 2 - 1));
r = g = b = 0;
if (hue >= 0 && hue < 1) {
r = C;
g = X;
} else if (hue >= 1 && hue < 2) {
r = X;
g = C;
} else if (hue >= 2 && hue < 3) {
g = C;
b = X;
} else if(hue >= 3 && hue < 4) {
g = X;
b = C;
} else if (hue >= 4 && hue < 5) {
r = X;
b = C;
} else {
r = C;
b = X;
}
m = l - C / 2;
r += m;
g += m;
b += m;
r *= 255.0;
g *= 255.0;
b *= 255.0;
return [Math.round(r), Math.round(g), Math.round(b)];
}<h1 id="preview-color"></h1>
<input type="text" id="hsl" value="hsl(199, 91%, 30%)">
<button id="convert-hsl-to-rgb">Convert</button>
<script>
document.getElementById("convert-hsl-to-rgb").onclick = function(){
var preview_color = document.getElementById("preview-color");
let hsl = document.getElementById("hsl").value;
let result = hslToRgb(hsl);
if(!result){
preview_color.innerHTML= 'invalid color';
preview_color.style.backgroundColor = '';
preview_color.style.color = 'red';
return;
}
//let rgb = 'rgb('+result[0]+','+result[1]+','+result[2]+')';
let rgb = 'rgb('+result.join(',')+')';
preview_color.innerHTML= rgb;
preview_color.style.backgroundColor = rgb;
};
</script>function hslaToRgba(hsla) {
hsla = hsla.match(/^hsla?\(\s?(\d+)(?:deg)?,?\s(\d+)%,?\s(\d+)%,?\s?\/?\s?(\d?\.?\d+|\d+)%?\)$/i);
if (!hsla) {
return null;
}
var h = hsla[1];
var s = hsla[2];
var l = hsla[3];
var a = hsla[4];
if(a == undefined){
a = 1;
}else{
a = (a > 2 ? a / 100 : a);
}
s /= 100;
l /= 100;
C = (1 - Math.abs(2 * l - 1)) * s;
var hue = h / 60;
X = C * (1 - Math.abs(hue % 2 - 1));
r = g = b = 0;
if (hue >= 0 && hue < 1) {
r = C;
g = X;
} else if (hue >= 1 && hue < 2) {
r = X;
g = C;
} else if (hue >= 2 && hue < 3) {
g = C;
b = X;
} else if(hue >= 3 && hue < 4) {
g = X;
b = C;
} else if (hue >= 4 && hue < 5) {
r = X;
b = C;
} else {
r = C;
b = X;
}
m = l - C / 2;
r += m;
g += m;
b += m;
r *= 255.0;
g *= 255.0;
b *= 255.0;
return [Math.round(r), Math.round(g), Math.round(b), a];
}<h1 id="preview-color"></h1>
<input type="text" id="hsla" value="hsla(120, 60%, 70%, 0.3)">
<button id="convert-hsla-to-rgba">Convert</button>
<script>
document.getElementById("convert-hsla-to-rgba").onclick = function(){
var preview_color = document.getElementById("preview-color");
let hsla = document.getElementById("hsla").value;
let result = hslaToRgba(hsla);
if(!result){
preview_color.innerHTML= 'invalid color';
preview_color.style.backgroundColor = '';
preview_color.style.color = 'red';
return;
}
//let rgba = 'rgba('+result[0]+', '+result[1]+', '+result[2]+', '+result[3]+')';
let rgba = 'rgba('+result.join(', ')+')';
preview_color.innerHTML= rgba;
preview_color.style.backgroundColor = rgba;
};
</script>