• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2025 Replies
  • 331 Replies
    1928 Replies

Convert RGB to Hex and Visa Versa

User avatar
mikethedj4
VIP - Site Partner
Posts: 2577

Convert RGB to Hex and Visa Versa

Mon Dec 23, 2013 9: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>
Image
Image

User avatar
noypikami
VIP - Donator
Posts: 151

Re: Convert RGB to Hex and Visa Versa

Mon Dec 23, 2013 4:50 pm

this is great. thank you for sharing.! :)
keep posting.

User avatar
smashapps
Coding Guru
Posts: 960

Re: Convert RGB to Hex and Visa Versa

Mon Dec 23, 2013 11:51 pm

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!

Post Reply

Return to “Tutorials”