Convert RGB to Hexadecimal using JavaScript




In one of my previous article, I showed you how to Generate Random RGB Colors using JavaScript. However not all old browsers support the RGB mode. For old browsers, you are safe using Hex values instead of RGB. If you have a RGB value and want to convert it into Hexadecimal mode, here’s how to do it using JavaScript.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Convert RGBtoHEX using JavaScript by DevCurry.com</title>
<script type="text/javascript">
   1:  
   2:         function Rgb() {
   3:             var red = returnHex(200);
   4:             var green = returnHex(255);
   5:             var blue = returnHex(155);
   6:             var hex = "#" + red + green + blue;
   7:                         
   8:             alert(hex);            
   9:         }
  10:  
  11:         // Convert to Hex
  12:         function returnHex(num) {
  13:             // Hex can store 16 different values in 1 character
  14:             if (num == null) return "00";
  15:             num = num.length < 2 ? "0" + num : num
  16:             return num.toString(16);
  17:         }       
  18:     
</script>
</head>
<body onload="randomRgb()">
<div>Demo from DevCurry.com</div>
</body>
</html>

Using the returnHex(num) function, we first check to see if the num is not null, else return 0. We are then using a ternary condition to check if the length of num is less than 2. If it is, prefix ‘0’ to the results, else use the original number. Finally we use toString(16) on the number, to convert it into hexadecimal mode. Remember Hex can store 16 different values in 1 character.

In the Rgb function(), I am passing a sample RBG value and then displaying the converted hex value using alert(). I have not done too many validation checks, in order to keep the example simple and to the point.

On passing 200,255,155 you get #c8ff9b

image



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

4 Responses to "Convert RGB to Hexadecimal using JavaScript"
  1. Anonymous said...
    August 27, 2010 at 2:31 PM

    If you pass 200,14,0 you'll get #c8e00
    You need to handle it being a one digit number AFTER converting to base 16, not before.

  2. JavaScript Timer Countdown said...
    September 11, 2010 at 7:47 PM

    very cool & good tip, thank you very much for sharing.

  3. RGB to Hex said...
    January 3, 2011 at 8:39 PM

    I'm curious as to what the benefit would be of generating random RGB or Hex values? Is there a practical application for this or is this just an exercise of possibilities?

  4. Anonymous said...
    January 3, 2011 at 11:04 PM

    Possibly to apply a new background color randomnly or change a theme. Possibilities could be endless

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions