Background-color hex to JavaScript variable

by

try this out:

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.

var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]

delete (parts[0]);
for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
} 
var hexString ='#'+parts.join('').toUpperCase(); // "#0070FF"

In response to the question in the comments below:

I’m trying to modify the regex to handle both rgb and rgba depending which one I get. Any hints? Thanks.

I’m not exactly sure if it makes sense in the context of this question (since you can’t represent an rgba color in hex), but I guess there could be other uses. Anyway, you could change the regex to be like this:

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/

Example output:

var d = document.createElement('div');
d.style.backgroundColor="rgba( 255,  60, 50, 0)";

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0\.\d+))?\)$/.exec(d.style.backgroundColor);

// ["rgba(255, 60, 50, 0.33)", "255", "60", "50", "0.33"]

More Related Contents:

  1. How to get hex color value rather than RGB value?
  2. How to get the background color code of an element in hex?
  3. RGB to hex and hex to RGB
  4. Can I force jQuery.css(“backgroundColor”) returns on hexadecimal format?
  5. Passing variable to function in javascript and jQuery
  6. Reloading a single div in an html page [closed]
  7. fixing slider on my website [closed]
  8. jQuery function to get all unique elements from an array?
  9. Uncaught TypeError: Cannot use ‘in’ operator to search for ‘length’ in
  10. How to show progress bar while loading, using ajax
  11. Resetting a setTimeout
  12. How to move an iFrame in the DOM without losing its state?
  13. Prevent form submission with enter key
  14. focus doesn’t work in IE
  15. jQuery or Javascript check if image loaded
  16. Calculate working days between two dates in Javascript excepts holidays
  17. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  18. Is jquery a javascript library or framework? [closed]
  19. Find property by name in a deep object
  20. How do I keep the current tab active with twitter bootstrap after a page reload?
  21. Add names of the states to a map in d3.js
  22. How can I prevent a click on a ‘#’ link from jumping to top of page?
  23. jquery/javascript: function(e){…. what is e? why is it needed? what does it actually do/accomplish?
  24. Compare two date formats in javascript/jquery
  25. “Permission denied” with Internet Explorer and jQuery
  26. How can I dynamically highlight strings on a web page?
  27. Jquery delay execution of script
  28. Datatables TypeError: c is undefined
  29. How to highlight a part part of an Input text field in HTML using Javascript or JQuery
  30. How to check null objects in jQuery

Leave a Comment