Hex to RGB to HSL Converter

Tip: Typing into any of these boxes will automatically update the others.

Code

This tool uses javascript to convert hex into rgb & hsl and vice versa(s). Some regex is used to clean the inputs but essentially it's these functions that do all the work:

function hex_to_rgb(hex) {
	var bigint = parseInt(hex, 16);
	var r = (bigint >> 16) & 255;
	var g = (bigint >> 8) & 255;
	var b = bigint & 255;
	return [r, g, b].join(",");
}

alert(hex_to_rgb('ffffff'));

function rgb_to_hex(r, g, b) {
	return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

alert(rgb_to_hex(255, 255, 255));

function rgb_to_hsl(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;
	}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 [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

alert(rgb_to_hsl(255, 255, 255));

function hsl_to_rgb(h, s, l){
	var r, g, b;

	if(s == 0){
		r = g = b = l;
	}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)];
}

alert(hsl_to_rgb(0, 0, 100));

Comments

Be the first to comment.


Anonymous

A preview of the comment you're writing will go here. Please wait a few seconds after typing.