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
const 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>const 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>const 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
const 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>const 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>const 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>const 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>const 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>const 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
const 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>const 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>const 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>const 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>
