How to get the background color code of an element in hex

Question

How do I get the background color code of an element    x000D   x000D  console log     div   css  background-color     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div class  div  style  background-color   f5b405  gt  lt  div gt  x000D   x000D   x000D    What I want   f5b405

User · Answer

There s a bit of a hack for this  since the HTML5 canvas is required to parse color values when certain properties like strokeStyle and fillStyle are set   var ctx   document createElement  canvas   getContext  2d    ctx strokeStyle    rgb 64  128  192    var hexColor   ctx strokeStyle

User · Answer

function getBackgroundColor  dom        var bgColor           while   dom 0  tagName toLowerCase       html           bgColor    dom css  background-color          if  bgColor     rgba 0  0  0  0    amp  amp  bgColor     transparent             break                 dom    dom parent              return bgColor        working properly under Chrome and Firefox

User · Answer

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

User · Answer

Adding on  Newred solution  If your style has more than just the background-color you can use this     this  attr  style   split      filter item   gt  item startsWith  background-color    0  split      1

User · Answer

This Solution utilizes part of what  Newred and  Radu Di a said   But will work in less standard cases      this  attr  style   split      filter item   gt  item startsWith  background-color    0  split      1  replace   s g         The issue both of them have is that neither check for a space between background-color   and the color    All of these will match with the above code    background-color   ffffff  background-color        fffff   background-color  fffff

User · Answer

You have the color you just need to convert it into the format you want   Here s a script that should do the trick  http   www phpied com rgb-color-parser-in-javascript

User · Answer

Check example link below and click on the div to get the color value in hex     x000D   x000D  var color       x000D     div   click function     x000D    var x     this  css  backgroundColor    x000D    hexc x   x000D    console log color   x000D     x000D   x000D  function hexc colorval    x000D    var parts   colorval match   rgb    d    s   d    s   d         x000D    delete parts 0    x000D    for  var i   1  i  lt   3    i    x000D      parts i    parseInt parts i   toString 16   x000D      if  parts i  length    1  parts i     0    parts i   x000D      x000D    color         parts join      x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div class  div  style  background-color   f5b405  gt Click me  lt  div gt  x000D   x000D   x000D    Check working example at http   jsfiddle net DCaQb

User · Answer

In fact  if there is no definition of background-color under some element  Chrome will output its background-color as rgba 0  0  0  0   while Firefox outputs is transparent

[javascript] How to get the background color code of an element in hex?

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to hex

Examples related to background-color