Convert RGB to Hex and Visa Versa

3 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

See it in action! - http://jsbin.com/IWirumIg/1/

This one works very simple, you put the rgb code down and it shows you the hex code, or you can put the hex code down, and it'll show you the rgb code as both are generated automatically via keyup.

So enjoy!

Full Code:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>RGB/Hex Converter</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type='text/css'>
.container {
    position: absolute;
    top: 0px; left:0; right:0; bottom:0;
	font-family: sans-serif; font-size: 14px;
	padding: 1em; color: #222;
	background: #444;
    color: #ccc;
}

.head { width:0; height:0; overflow:hidden; visibility:hidden; }

input[type=text] { margin:0; padding:0; border:0; outline:0; width: 60px; height: 30px; text-align: center; background:#202020; color: #fff; }
</style>
<script type="text/javascript" language="JavaScript">
$(function() {
	function rgb2hex() {
		function RGBtoHex(R,G,B) { return toHex(R) + toHex(G) + toHex(B) }

		function toHex(N) {
			if (N==null) return "00";
			N=parseInt(N);
			if (N==0 || isNaN(N)) return "00";
			
			N=Math.max(0,N);
			N=Math.min(N,255);
			N=Math.round(N);
			return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
		}
		
		$('.head h2').on('click', function() {
			$('input[name=hex]').val(RGBtoHex(this.form.r.value,this.form.g.value,this.form.b.value));
			$('input[name=hexcolor]').css('background-color', '#' + $('input[name=hex]').val());
		});
		
		$('input[name=r], input[name=g], input[name=b]').on('keyup change', function() {
			$('input[name=hex]').val(RGBtoHex(this.form.r.value,this.form.g.value,this.form.b.value));
			$('input[name=hexcolor]').css('background-color', '#' + $('input[name=hex]').val());
		});
		
		// Sets the hex color to the preview's background color.
		$('input[name=hexcolor]').css('background-color', '#' + $('input[name=hex]').val());
	}
	
	function hex2rgb() {
		R = HexToR('#fff');
		G = HexToG('#fff');
		B = HexToB('#fff');
		
		function HexToR(h) { return parseInt((cutHex(h)).substring(0,2),16) }
		function HexToG(h) { return parseInt((cutHex(h)).substring(2,4),16) }
		function HexToB(h) { return parseInt((cutHex(h)).substring(4,6),16) }
		function cutHex(h) { return (h.charAt(0)=='#') ? h.substring(1,7) : h }
		
		$('.head h2').on('click', function() {
			$('input[name=r]').val(HexToR(this.form.hex.value));
			$('input[name=g]').val(HexToG(this.form.hex.value));
			$('input[name=b]').val(HexToB(this.form.hex.value));
			$('input[name=hexcolor]').css('background-color', '#' + $('input[name=hex]').val());
		});
		
		$('input[name=hex]').on('keyup change', function() {
			$("input[name=r]").val(HexToR(this.form.hex.value));
			$("input[name=g]").val(HexToG(this.form.hex.value));
			$("input[name=b]").val(HexToB(this.form.hex.value));
			$('input[name=hexcolor]').css('background-color', '#' + $(this).val());
		});
		
		// Sets the hex color to the preview's background color.
		$('input[name=hexcolor]').css('background-color', '#' + $('input[name=hex]').val());
	}
	
	// Call the Hex to RGB Converted onLoad
	$(window).on('load', function() {
		$('.head h2').trigger('click');
	});
	
	// Toggles between hex2rgb converter & rgb2hex converter
	$('.head h2').click(function() {
		hex2rgb(); rgb2hex();
	});
});
</script>
</head>
<body>
	<!-- Heading Text -->
	<div class='head'> <h2>Placeholder</h2> </div>

	<!-- Inputs for Converter -->
	<div class='container'>
		<center>
			<form>
				<input name='hexcolor' type='text' readonly>
				|
				<input type='text' name='hex' value='ff0000'>
				&nbsp;&nbsp;&nbsp;
				R: <input type='text' value='255' name='r'>
				G: <input type='text' value='0' name='g'>
				B: <input type='text' value='0' name='b'>
			</form>
		</center>
		
		<!-- Textbox/Notepad if users need it -->
		<textarea style='position:absolute; top:55px; left:5px; right:5px; bottom:5px; resize:none; outline:0; border: 1px solid black; background: #202020; color: #fff;' placeholder="Here's a textbox if you need it..."></textarea>
	</div>
</body>
</html>
User avatar
noypikami
VIP - Donator
VIP - Donator
Posts: 151
Joined: Sat Dec 22, 2012 1:49 am

this is great. thank you for sharing.! :)
keep posting.
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

I always wondered how this was done, thanks Mike
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
3 posts Page 1 of 1
Return to “Tutorials”