Codenstuff.com: Convert RGB to Hex and Visa Versa

Convert RGB to Hex and Visa Versa

3 posts Page 1 of 1

Post Reply

Contributors

mikethedj4
VIP - Site Partner

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am

Convert RGB to Hex and Visa Versa
mikethedj4
Mon Dec 23, 2013 8:53 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>