How to get hex color value rather than RGB value

Question

Using the following jQuery will get the RGB value of an element s background color       selector   css  backgroundColor      Is there a way to get the hex value rather than the RGB

User · Answer

Here is the cleaner solution I wrote based on @Matt suggestion:

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

Some browsers already returns colors as hexadecimal (as of Internet Explorer 8 and below). If you need to deal with those cases, just append a condition inside the function, like @gfrobenius suggested:

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

If you're using jQuery and want a more complete approach, you can use CSS Hooks available since jQuery 1.4.3, as I showed when answering this question: Can I force jQuery.css("backgroundColor") returns on hexadecimal format?

User · Answer

Here is my solution  also does touppercase by the use of an argument and checks for other possible white-spaces and capitalisation in the supplied string   var a    rgb 10  128  255    var b    rgb  10  128  255    var c    rgb 10  128  255     var d    rgb   10  128  255     var e    RGB   10  128  255     var f    rgb 10 128 255    var g    rgb 10  128      var rgbToHex    function          var rx     rgb s    s   d   s   s   d   s   s   d   s     i       function pad num            if  num length     1                num    0    num                     return num             return function  rgb  uppercase            var rxArray   rgb match rx               hex           if  rxArray     null                hex   pad parseInt rxArray 1   10  toString 16     pad parseInt rxArray 2   10  toString 16     pad parseInt rxArray 3   10  toString 16                 if  uppercase     true                    hex   hex toUpperCase                               return hex                     return                console log rgbToHex a    console log rgbToHex b  true    console log rgbToHex c    console log rgbToHex d    console log rgbToHex e    console log rgbToHex f    console log rgbToHex g      On jsfiddle  Speed comparison on jsperf  A further improvement could be to trim   the rgb string  var rxArray   rgb trim   match rx

User · Answer

Readable  amp  amp  Reg-exp free  no Reg-exp  I ve created a function that uses readable basic functions and no reg-exps  The function accepts color in hex  rgb or rgba CSS format and returns hex representation  EDIT  there was a bug with parsing out rgba   format  fixed    function getHexColor  color          if color is already in hex  just return it        if  color indexOf         -1   return color             leave only  quot R G B quot        color   color                  replace  quot rgba quot    quot  quot     must go BEFORE rgb replace                  replace  quot rgb quot    quot  quot                    replace  quot   quot    quot  quot                    replace  quot   quot    quot  quot        color   color split  quot   quot       get Array  quot R quot   quot G quot   quot B quot               0  add leading          1  add leading zero  so we get 0XY or 0X        2  append leading zero with parsed out int value of R G B           converted to HEX string representation        3  slice out 2 last chars  get last 2 chars    gt               gt  we get XY from 0XY and 0X stays the same     return   quot   quot                   0    parseInt color 0   10  toString 16    slice -2                   0    parseInt color 1   10  toString 16    slice -2                   0    parseInt color 2   10  toString 16    slice -2

User · Answer

Updated  ErickPetru for rgba compatibility   function rgb2hex rgb        rgb   rgb match   rgba     d    s   d    s   d       s   d               function hex x            return   0    parseInt x  toString 16   slice -2             return       hex rgb 1     hex rgb 2     hex rgb 3        I updated the regex to match the alpha value if defined  but not use it

User · Answer

Steven Pribilinskiy s answer drops leading zeroes  for example  ff0000 becomes  ff00   A solution is to append a leading 0 and substring off the last 2 digits   var rgb       selector   css  backgroundColor   match   d  g   var hex        String  0    Number rgb 0   toString 16   slice -2    String  0    Number rgb 1   toString 16   slice -2    String  0    Number rgb 2   toString 16   slice -2

User · Answer

Here s an ES6 one liner that doesn t use jQuery   var rgb   document querySelector   selector   style  background-color    return       rgb substr 4  rgb indexOf      - 4  split      map  color    gt  parseInt color  toString 16   join

User · Answer

Here is a version that also checks for transparent  I needed this since my object was to insert the result into a style attribute  where the transparent version of a hex color is actually the word  transparent     function rgb2hex rgb         if    rgb search  rgb      -1               return rgb              else if   rgb     rgba 0  0  0  0                return  transparent               else             rgb   rgb match   rgba     d    s   d    s   d       s   d                     function hex x                   return   0    parseInt x  toString 16   slice -2                         return       hex rgb 1     hex rgb 2     hex rgb 3

User · Answer

This one looks a bit nicer   var rgb       selector   css  backgroundColor   match   d  g   var r     parseInt rgb 0   10   var g     parseInt rgb 1   10   var b     parseInt rgb 2   10   var hex        r toString 16    g toString 16    b toString 16     a more succinct one-liner   var rgb       selector   css  backgroundColor   match   d  g   var hex        Number rgb 0   toString 16    Number rgb 1   toString 16    Number rgb 2   toString 16     forcing jQuery to always return hex     cssHooks backgroundColor         get  function elem            if  elem currentStyle              var bg   elem currentStyle  backgroundColor            else if  window getComputedStyle                var bg   document defaultView getComputedStyle elem                  null  getPropertyValue  background-color                      if  bg search  rgb      -1                return bg            else               bg   bg match   d  g               function hex x                    return   0    parseInt x  toString 16   slice -2                             return       hex bg 0     hex bg 1     hex bg 2

User · Answer

Function that returns background color of an element in hex   function getBgColorHex elem       var color   elem css  background-color       var hex      if color indexOf      gt -1             for IE         hex   color        else           var rgb   color match   d  g           hex          0    parseInt rgb 0   10  toString 16   slice -2      0    parseInt rgb 1   10  toString 16   slice -2      0    parseInt rgb 2   10  toString 16   slice -2             return hex      usage example       div1   click function       alert getBgColorHex   this        jsfiddle

User · Answer

Since the question was using JQuery  here   s a JQuery plugin based on Daniel Elliott   s code     fn cssAsHex   function colorProp         var hexDigits    0123456789abcdef        function hex x            return isNaN x     00    hexDigits  x - x   16    16    hexDigits x   16                  Convert RGB color to Hex format     function rgb2hex rgb            var rgbRegex   rgb match   rgb    d    s   d    s   d                 return       hex rgbRegex 1     hex rgbRegex 2     hex rgbRegex 3                return rgb2hex this css colorProp         Use it like   var hexBackgroundColor       myElement   cssAsHex  background-color

User · Answer

Most browsers seem to return the RGB value when using        selector   css  backgroundColor      Only I E  only 6 tested so far  returns the Hex value   To avoid error messages in I E  you could wrap the function in an if statement   function rgb2hex rgb         if    rgb search  rgb      -1               return rgb         else             rgb   rgb match   rgba     d    s   d    s   d       s   d                     function hex x                   return   0    parseInt x  toString 16   slice -2                         return       hex rgb 1     hex rgb 2     hex rgb 3

User · Answer

Just to add to  Justin s answer above     it should be   var rgb   document querySelector   selector   style  background-color    return       rgb substr 4  rgb indexOf      - 4  split      map  color    gt  String  0    parseInt color  toString 16   slice -2   join        As the above parse int functions truncates leading zeroes  thus produces incorrect color codes of 5 or 4 letters may be    i e  for rgb 216  160  10  it produces  d8a0a while it should be  d8a00a   Thanks

User · Answer

To all the Functional Programming lovers  here is a somewhat functional approach    const getHexColor    rgbValue    gt    rgbValue replace  quot rgb  quot    quot  quot   replace  quot   quot    quot  quot   split  quot   quot        map colorValue   gt   colorValue  gt  15    quot 0 quot     quot  quot     colorValue toString 16        reduce  acc  hexValue    gt  acc   hexValue   quot   quot    then use it like  const testRGB    quot rgb 13 23 12  quot  getHexColor testRGB

User · Answer

Same  answer like  Jim F answer  but ES6 syntax   so   less instructions     const rgb2hex    rgb    gt      if  rgb search  rgb       -1  return rgb    rgb   rgb match   rgba     d    s   d    s   d       s   d             const hex    x    gt    0    parseInt x  toString 16   slice -2     return       hex rgb 1     hex rgb 2     hex rgb 3

User · Answer

full cases  rgb  rgba  transparent   etc  solution  coffeeScript   rgb2hex   rgb  transparentDefault null - gt      return null unless rgb     return rgb if rgb indexOf         -1     return transparentDefault     transparent  if rgb     rgba 0  0  0  0       rgb   rgb match   rgba     d    s   d    s   d       s   d               hex    x - gt          quot 0 quot    parseInt x  toString 16   slice -2             hex rgb 1     hex rgb 2     hex rgb 3

User · Answer

Here s a solution I found that does not throw scripting errors in IE  http   haacked com archive 2009 12 29 convert-rgb-to-hex aspx

User · Answer

my compact version  x000D   x000D    Function to convert rgb color to hex format function rgb2hex rgb        if      test rgb  return rgb    if returns colors as hexadecimal     let re     d  g      let hex   x   gt   x  gt  gt  4  toString 16   x  amp  0xf  toString 16       return     hex re exec rgb   hex re exec rgb   hex re exec rgb      x000D   x000D   x000D

User · Answer

color class taken from bootstrap color picker     Color object var Color   function val        this value             h  1          s  1          b  1          a  1            this setColor val       Color prototype         constructor  Color         parse a string to HSB     setColor  function val           val   val toLowerCase            var that   this            each  CPGlobal stringParsers  function  i  parser                 var match   parser re exec  val                values   match  amp  amp  parser parse  match                space   parser space   rgba               if   values                     if  space      hsla                         that value   CPGlobal RGBtoHSB apply null  CPGlobal HSLtoRGB apply null  values                      else                       that value   CPGlobal RGBtoHSB apply null  values                                     return false                                        setHue  function h            this value h   1- h              setSaturation  function s            this value s   s              setLightness  function b            this value b   1- b              setAlpha  function a            this value a   parseInt  1 - a  100  10  100                 HSBtoRGB from RaphaelJS        https   github com DmitryBaranovskiy raphael      toRGB  function h  s  b  a            if   h                h   this value h              s   this value s              b   this value b                    h    360          var R  G  B  X  C          h    h   360    60          C   b   s          X   C    1 - Math abs h   2 - 1            R   G   B   b - C           h     h          R     C  X  0  0  X  C  h           G     X  C  C  X  0  0  h           B     0  0  X  C  C  X  h           return               r  Math round R 255               g  Math round G 255               b  Math round B 255               a  a  this value a                        toHex  function h  s  b  a           var rgb   this toRGB h  s  b  a           return       1  lt  lt  24     parseInt rgb r   lt  lt  16     parseInt rgb g   lt  lt  8    parseInt rgb b   toString 16  substr 1               toHSL  function h  s  b  a           if   h                h   this value h              s   this value s              b   this value b                    var H   h          L    2 - s    b          S   s   b          if  L  gt  0  amp  amp  L  lt   1                S    L            else               S    2 - L                    L    2          if  S  gt  1                S   1                    return               h  H              s  S              l  L              a  a  this value a                       how to use   var color   new Color  RGB 0 5 5     color toHex

User · Answer

var hexDigits   new Array           0   1   2   3   4   5   6   7   8   9   a   b   c   d   e   f        Function to convert rgb color to hex format function rgb2hex rgb     rgb   rgb match   rgb    d    s   d    s   d          return       hex rgb 1     hex rgb 2     hex rgb 3       function hex x      return isNaN x     00    hexDigits  x - x   16    16    hexDigits x   16         Source

User · Answer

Improved function  quot hex quot  function hex x       return isNaN x     quot 00 quot    hexDigits x  gt  gt  4    hexDigits x  amp  0xf          or option without hexDigits array     return  x  gt  gt  4  toString 16   x  amp  0xf  toString 16

User · Answer

Try     c - color str e g  rgb 12 233 43    result color hex e g    0ce92b  let rgb2hex  c  gt      c match   d  g  map x  gt   x  toString 16  padStart 2 0   join      x000D   x000D     rgb - color str e g  rgb 12 233 43    result color hex e g    0ce92b  x000D  let rgb2hex  c  gt      c match   d  g  map x  gt   x  toString 16  padStart 2 0   join   x000D   x000D  console log rgb2hex  rgb 12 233 43     x000D   x000D   x000D

User · Answer

My beautiful non-standard solution  HTML   lt div id  selector  style  background-color  f5b405  gt  lt  div gt    jQuery      selector   attr  style   replace  background-color           Result   f5b405

User · Answer

Convert RGB to Hex I am using Jasmine protractor and I was getting errors like - Expected    rgba 255  255  255  1     to contain   fff   Below function worked fine for me  function RGBAToHexA test string    let sep   test toString   indexOf  quot   quot    gt  -1    quot   quot     quot   quot   const rgba   test toString   substring 5  split  quot   quot   0  split sep   console log rgba  let r     rgba 0   toString 16     g     rgba 1   toString 16     b     rgba 2   toString 16     a   Math round  rgba 3    255  toString 16        if  r length    1          r    quot 0 quot    r      if  g length    1          g    quot 0 quot    g      if  b length    1          b    quot 0 quot    b      if  a length    1          a    quot 0 quot    a   return  quot   quot    r   g   b   a     describe  Check CSS   function       it  should check css of login page   async function            browser waitForAngularEnabled true           browser actions   mouseMove element by css   btn-auth   btn-auth hover     perform       mouse hover on button         csspage Loc auth btn getCssValue  color   then function color               console log RGBAToHexA color               expect  RGBAToHexA color   toContain cssData hoverauth color

[javascript] How to get hex color value rather than RGB value?

Examples related to javascript

Examples related to jquery

Examples related to colors

Examples related to hex

Examples related to rgb