RGB to hex and hex to RGB

Question

How to convert colors in RGB format to hex format and vice versa  For example  convert   0080C0  to  0  128  192

User · Answer

One-line functional HEX to RGBA Supports both short  fff and long  ffffff forms  Supports alpha channel  opacity   Does not care if hash specified or not  works in both cases  function hexToRGBA hex  opacity        return  rgba      hex   hex replace           match new RegExp         hex length 3          g    map function l    return parseInt hex length 2   l l   l  16     concat isFinite opacity    opacity   1  join                examples  hexToRGBA   fff          - gt   rgba 255 255 255 1    hexToRGBA   ffffff       - gt   rgba 255 255 255 1    hexToRGBA   fff    2     - gt   rgba 255 255 255 0 2    hexToRGBA   ffffff    2  - gt   rgba 255 255 255 0 2    hexToRGBA  fff    2      - gt   rgba 255 255 255 0 2    hexToRGBA  ffffff    2   - gt   rgba 255 255 255 0 2   hexToRGBA   ffffff   0   - gt   rgba 255 255 255 0  hexToRGBA   ffffff    5  - gt   rgba 255 255 255 0 5  hexToRGBA   ffffff   1   - gt   rgba 255 255 255 1

User · Answer

May you be after something like this   function RGB2HTML red  green  blue        return       red toString 16               green toString 16               blue toString 16      alert RGB2HTML 150  135  200      displays  9687c8

User · Answer

Fairly straightforward one liner  Splits the rgb by commas  ignores non numerics  converts to hex  pads a 0  and finishes off with a hashbang    x000D   x000D  var yellow    rgb 255  255  0    x000D  var rgb2hex   str   gt      str split      map s   gt   s replace   D g     0  toString 16   map s   gt  s length  lt  2    0  s   s  join      x000D   x000D  console log rgb2hex yellow    x000D   x000D   x000D

User · Answer

Tim  to add to your answer  its a little awkward fitting this into a comment    As written  I found the rgbToHex function returns a string with elements after the point and it requires that the r  g  b values fall within the range 0-255   I m sure this may seem obvious to most  but it took two hours for me to figure out and by then the original method had ballooned to 7 lines before I realised my problem was elsewhere  So in the interests of saving others time  amp  hassle  here s my slightly amended code that checks the pre-requisites and trims off the extraneous bits of the string   function rgbToHex r  g  b        if r  lt  0    r  gt  255  alert  r is out of bounds    r       if g  lt  0    g  gt  255  alert  g is out of bounds    g       if b  lt  0    b  gt  255  alert  b is out of bounds    b       return         1  lt  lt  24     r  lt  lt  16     g  lt  lt  8    b  toString 16  slice 1 7

User · Answer

2017  SIMPLE ES6 composable arrow functions I can t resist sharing this for those who may be writing some modern functional compositional js using ES6  Here are some slick one-liners I am using in a color module that does color interpolation for data visualization  Note that this does not handle the alpha channel at all  const arrayToRGBString   rgb   gt   rgb   rgb join          const hexToRGBArray   hex   gt  hex match   A-Za-z0-9  2  g  map v   gt  parseInt v  16    const rgbArrayToHex   rgb   gt      rgb map v   gt  v toString 16  padStart 2   0    join        const rgbStringToArray   rgb   gt  rgb match   rgb    d    s   d    s   d        splice 1  3     map v   gt  Number v    const rgbStringToHex   rgb   gt  rgbArrayToHex rgbStringToArray rgb     BTW  If you like this style syntax  I wrote a full color module  modern-color  you can grab from npm  I made it so I could use prop getters for conversion and parse virtually anything  Color parse anything    Worth a look if you deal with color a lot like I do

User · Answer

Here is the Javascript code to change HEX Color value to the Red  Green  Blue individually   R   hexToR   FFFFFF    G   hexToG   FFFFFF    B   hexToB   FFFFFF     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

User · Answer

Looks like you re looking for something like this   function hexstr number        var chars   new Array  0    1    2    3    4    5    6    7    8    9    a    b    c    d    e    f        var low   number  amp  0xf      var high    number  gt  gt  4   amp  0xf      return      chars high    chars low      function rgb2hex r  g  b        return       hexstr r    hexstr g    hexstr b

User · Answer

R   HexToR   FFFFFF    G   HexToG   FFFFFF    B   HexToB   FFFFFF     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    Use these Function to achive the result without any issue

User · Answer

This snippet converts hex to rgb and rgb to hex   View demo  function hexToRgb str         if        0-9a-f  3   0-9a-f  6    ig test str               var hex   str substr 1           hex   hex length    3   hex replace      g    1 1     hex          var rgb   parseInt hex  16                          return  rgb       rgb  gt  gt  16   amp  255   rgb  gt  gt  8   amp  255  rgb  amp  255  join                         return false      function rgbToHex red  green  blue        var out             for  var i   0  i  lt  3    i            var n   typeof arguments i      number    arguments i    parseInt arguments i             if  isNaN n     n  lt  0    n  gt  255                return false                     out     n  lt  16    0          n toString 16             return out

User · Answer

When you re working in 3D environment  webGL  ThreeJS  you sometimes need to create 3 values for the different faces of meshes  the basic one  main color   a lighter one and a darker one     material color set  0x660000  0xff0000  0xff6666       red cube   We can create these 3 values from the main RBG color   255 0 0  function rgbToHex rgb       var hex   Number rgb  toString 16     if  hex length  lt  2           hex    0    hex        return hex      function convertToHex r g b          var fact   100      contrast      var code    0x           main color     var r hexa   rgbToHex r       var g hexa   rgbToHex g       var b hexa   rgbToHex b           lighter     var r light   rgbToHex Math floor r   1- r 255   fact         var g light   rgbToHex Math floor g   1- g 255   fact         var b light   rgbToHex Math floor b   1- b 255   fact             darker     var r dark   rgbToHex Math floor r-  r 255   fact 1 5         increase contrast     var g dark   rgbToHex Math floor g-  g 255   fact 1 5          var b dark   rgbToHex Math floor b-  b 255   fact 1 5           var hexa   code r hexa g hexa b hexa      var light   code r light g light b light      var dark   code r dark g dark b dark       console log  HEXs - gt    dark       hexa       light       var colors    dark  hexa  light        return colors       In your ThreeJS code simply write   var material   new THREE MeshLambertMaterial    var c   convertToHex 255 0 0      red cube needed material color set  Number c 0    Number c 1    Number c 2        Results                                      dark      normal     light convertToHex 255 255 255  HEXs - gt  0x696969   0xffffff   0xffffff convertToHex 255 0 0  HEXs - gt  0x690000   0xff0000   0xff6464 convertToHex 255 127 0  HEXs - gt  0x690000   0xff0000   0xff6464 convertToHex 100 100 100  HEXs - gt  0x292929   0x646464   0xa0a0a0 convertToHex 10 10 10  HEXs - gt  0x040404   0x0a0a0a   0x6a6a6a

User · Answer

For 3 digits hexToRgb function of Tim Down can be improved as below   var hex2Rgb   function hex     var result         a-f d  2    a-f d  2    a-f d  2     a-f d  1    a-f d  1    a-f d  1    i exec hex     return result                 r  parseInt hex length  lt   4   result 4  result 4    result 1   16       g  parseInt hex length  lt   4   result 5  result 5    result 2   16       b  parseInt hex length  lt   4   result 6  result 6    result 3   16       toString  function           var arr             arr push this r         arr push this g         arr push this b         return  rgb     arr join                         null

User · Answer

In case this helps anyone  my API has functions for those conversions    lt script src  http   api xlww net xQuery xQuery js  gt  lt  script gt   lt script gt    x init      var rgb new x rgb 37 255 83     alert rgb hex     var hex new x hex   ffa500      alert     hex rgb 0      hex rgb 1      hex rgb 2         lt  script gt

User · Answer

Ignoring hsl notation  color values are commonly expressed as names  rgb  rgba or hex-     Hex can be 3 values or 6      Rgb can be percentages as well as integer values      Best to account for all of these formats  at least   String prototype padZero  function len  c       var s  this  c  c     0   len  len    2      while s length  lt  len  s  c   s      return s    var colors       colornames           aqua    00ffff   black    000000   blue    0000ff   fuchsia    ff00ff           gray    808080   green    008000   lime    00ff00   maroon    800000           navy    000080   olive    808000   purple    800080   red    ff0000           silver    c0c0c0   teal    008080   white    ffffff   yellow    ffff00             toRgb  function c           c   0x  colors toHex c  substring 1           c    c gt  gt  16  amp 255   c gt  gt  8  amp 255  c amp 255           return  rgb   c join                      toHex  function c           var tem  i  0  c  c  c toString   toLowerCase                if     a-f0-9  3 6    test c                if c length lt  7                   var A  c split                      c  A 0  A 1  A 1  A 2  A 2  A 3  A 3                             return c                    if    a-z     test c                return colors colornames c                           c  c match   d     d      g                 if c length lt 3  return             c  c slice 0  3           while i lt  3               tem  c i               if tem indexOf        -1                   tem  Math round parseFloat tem  2 55                             else tem  parseInt tem               if tem lt  0    tem gt  255  c length  0              else c i     tem toString 16  padZero 2                     if c length   3  return     c join     toLowerCase            return               var c   dc149c     var c  rgb 100  25  0       var c   red   alert colors toRgb c    n  colors toHex c

User · Answer

Bitwise solution normally is weird  But in this case I guess that is more elegant   function hexToRGB hexColor     return       red   hexColor  gt  gt  16   amp  0xFF      green   hexColor  gt  gt  8   amp  0xFF        blue  hexColor  amp  0xFF          Usage   const  red  green  blue     hexToRGB 0xFF00FF   console log red     255 console log green     0 console log blue     255

User · Answer

I found this    http   jsfiddle net Mottie xcqpF 1 light   function rgb2hex rgb       rgb   rgb match   rgba   s       s     d    s      s     d    s      s     d    s    i       return  rgb  amp  amp  rgb length     4                    0    parseInt rgb 1  10  toString 16   slice -2              0    parseInt rgb 2  10  toString 16   slice -2              0    parseInt rgb 3  10  toString 16   slice -2

User · Answer

I m assuming you mean HTML-style hexadecimal notation  i e   rrggbb  Your code is almost correct  except you ve got the order reversed  It should be   var decColor   red   65536   green   256   blue    Also  using bit-shifts might make it a bit easier to read   var decColor    red  lt  lt  16     green  lt  lt  8    blue

User · Answer

While this answer is unlikely to fit the question perfectly it may be very useful none the less    Create any random element   var toRgb   document createElement  div      Set any valid style to the color you want to convert   toRg style color    hsl 120  60   70       Call the style property again    gt  toRgb style color    lt   rgb 133  225  133   Your color has been converted to Rgb  Works for  Hsl  Hex  Does not work for  Named colors

User · Answer

Short arrow functions For those who value short arrow function  Hex2rgb A arrow function version of David s Answer const hex2rgb   h   gt    x parseInt h 16    gt  gt  16  amp  255 x  gt  gt  8  amp  255  x  amp  255    A more flexible solution that supports shortand hex or the hash   const hex2rgb   h   gt        if h 0           h   h slice 1        if h length  lt   3   h   h 0  h 0  h 1  h 1  h 2  h 2        h   parseInt h 16       return  h  gt  gt  16  amp  255 h  gt  gt  8  amp  255  h  amp  255       Rgb2hex const rgb2hex    r g b    gt    1 lt  lt 24   r lt  lt 16   g lt  lt 8  b  toString 16  slice 1

User · Answer

Using combining anonymous functions and Array map for a cleaner  more streamlined look    x000D   x000D  var write function str  document body innerHTML JSON stringify str null            x000D   x000D  function hexToRgb hex  asObj    x000D    return  function res    x000D      return res    null   null    function parts    x000D        return  asObj   parts     r   parts 0   g   parts 1   b   parts 2    x000D        res slice 1 4  map function val    return parseInt val  16         x000D            a-f d  2    a-f d  2    a-f d  2    i exec hex     x000D    x000D   x000D  function rgbToHex r  g  b    x000D    return  function values    x000D      return       values map function intVal    x000D        return  function hexVal    x000D          return hexVal length    1    0    hexVal   hexVal  x000D          intVal toString 16     x000D         join      x000D      arguments length     1   Array isArray r    r    r r  r g  r b     r  g  b    x000D    x000D   x000D     Prints    r  255  g  127  b  92   x000D  write hexToRgb rgbToHex hexToRgb rgbToHex 255  127  92   true    true    x000D  body font-family monospace white-space pre  x000D   x000D   x000D

User · Answer

The top rated answer by Tim Down provides the best solution I can see for conversion to RGB  I like this solution for Hex conversion better though because it provides the most succinct bounds checking and zero padding for conversion to Hex    function RGBtoHex  red  green  blue      red   Math max 0  Math min   this red  255      green   Math max 0  Math min   this green  255      blue   Math max 0  Math min   this blue  255       return         00000     red  lt  lt  16   green  lt  lt  8   blue  toString 16   slice -6        The use of left shift   lt  lt   and or     operators make this a fun solution too

User · Answer

Note  both  versions of rgbToHex expect integer values for r  g and b  so you ll need to do your own rounding if you have non-integer values  The following will do to the RGB to hex conversion and add any required zero padding   x000D   x000D  function componentToHex c      var hex   c toString 16     return hex length    1    0    hex   hex     function rgbToHex r  g  b      return       componentToHex r    componentToHex g    componentToHex b      alert rgbToHex 0  51  255        0033ff x000D   x000D   x000D   Converting the other way   x000D   x000D  function hexToRgb hex      var result         a-f d  2    a-f d  2    a-f d  2    i exec hex     return result         r  parseInt result 1   16       g  parseInt result 2   16       b  parseInt result 3   16        null     alert hexToRgb   0033ff   g       51   x000D   x000D   x000D   Finally  an alternative version of rgbToHex    as discussed in  casablanca s answer and suggested in the comments by  cwolves   x000D   x000D  function rgbToHex r  g  b      return         1  lt  lt  24     r  lt  lt  16     g  lt  lt  8    b  toString 16  slice 1      alert rgbToHex 0  51  255        0033ff x000D   x000D   x000D   Update 3 December 2012 Here s a version of hexToRgb   that also parses a shorthand hex triplet such as  quot  03F quot    x000D   x000D  function hexToRgb hex         Expand shorthand form  e g   03F   to full form  e g   0033FF     var shorthandRegex         a-f d    a-f d    a-f d    i    hex   hex replace shorthandRegex  function m  r  g  b        return r   r   g   g   b   b           var result         a-f d  2    a-f d  2    a-f d  2    i exec hex     return result         r  parseInt result 1   16       g  parseInt result 2   16       b  parseInt result 3   16        null     alert hexToRgb   0033ff   g       51   alert hexToRgb   03f   g       51   x000D   x000D   x000D

User · Answer

If you need compare two color values  given as RGB  name color or hex value  or convert to HEX  use HTML5 canvas object   var canvas   document createElement  canvas    var ctx   this canvas getContext  2d     ctx fillStyle    rgb pass some value    var temp    ctx fillStyle  ctx fillStyle    someColor    alert ctx fillStyle    temp

User · Answer

Instead of copy n pasting snippets found here and there  I d recommend to use a well tested and maintained library  Colors js  available for node js and browser   It s just 7 KB  minified  gzipped even less

User · Answer

A total different approach to convert hex color code to RGB without regex  It handles both  FFF and  FFFFFF format on the base of length of string  It removes   from beginning of string and divides each character of string and converts it to base10 and add it to respective index on the base of it s position    x000D   x000D    Algorithm of hex to rgb conversion in ES5 x000D  function hex2rgbSimple str   x000D    str   str replace           x000D    return str split     reduce function result  char  index  array   x000D      var j   parseInt index   3 array length   x000D      var number   parseInt char  16   x000D      result j     array length    3  number    result j     16   number  x000D      return result  x000D       0 0 0    x000D    x000D   x000D    Same code in ES6 x000D  hex2rgb   str   gt  str replace         split     reduce  r c i  length  l  j n   gt  j parseInt i 3 l  n parseInt c 16  r j   l  3 n r j   16 n r   0 0 0    x000D   x000D    hex to RGBA conversion x000D  hex2rgba    str  a    gt  str replace         split     reduce  r c i  length  l  j n   gt  j parseInt i 3 l  n parseInt c 16  r j   l  3 n r j   16 n r   0 0 0 a  1    x000D   x000D    hex to standard RGB conversion x000D  hex2rgbStandard   str   gt   RGB   str replace         split     reduce  r c i  length  l  j n   gt  j parseInt i 3 l  n parseInt c 16  r j   l  3 n r j   16 n r   0 0 0   join          x000D   x000D   x000D  console log hex2rgb   aebece     x000D  console log hex2rgbSimple   aebece     x000D   x000D  console log hex2rgb   aabbcc     x000D   x000D  console log hex2rgb   abc     x000D   x000D  console log hex2rgba   abc   0 7    x000D   x000D  console log hex2rgbStandard   abc     x000D   x000D   x000D

User · Answer

Immutable and human understandable version without any bitwise magic    Loop over array Normalize value if value  lt  0 or value  gt  255 using Math min   and Math max   Convert number to hex notation using String toString   Append leading zero and trim value to two characters join mapped values to string   function rgbToHex r  g  b      return  r  g  b       map color   gt          const normalizedColor   Math max 0  Math min 255  color          const hexColor   normalizedColor toString 16          return  0  hexColor   slice -2               join          Yes  it won t be as performant as bitwise operators but way more readable and immutable so it will not modify any input

User · Answer

i needed a function that accepts invalid values too like  rgb -255  255  255  rgb 510  255  255   this is a spin off of   cwolves answer  function rgb r  g  b      this c   this c    function  n        return Math max Math min n  255   0          return   1  lt  lt  24     this c r   lt  lt  16     this c g   lt  lt  8    this c b   toString 16  slice 1  toUpperCase

User · Answer

My version of hex2rbg    Accept short hex like  fff   Algorithm compacity is o n   should faster than using regex  e g String replace  String split  String match etc   Use constant space    Support rgb and rgba      you may need remove hex trim   if you are using IE8   e g     hex2rgb   fff     rgb 255 255 255   hex2rgb   fff   1    rgba 255 255 255 1   hex2rgb   ffffff     rgb 255 255 255    hex2rgb   ffffff   1    rgba 255 255 255 1    code   function hex2rgb  hex  opacity        hex   hex trim        hex   hex 0            hex substr 1    hex      var bigint   parseInt hex  16   h           if  hex length     3            h push  bigint  gt  gt  4   amp  255           h push  bigint  gt  gt  2   amp  255         else           h push  bigint  gt  gt  16   amp  255           h push  bigint  gt  gt  8   amp  255             h push bigint  amp  255       if  arguments length     2            h push opacity           return  rgba   h join              else           return  rgb   h join

User · Answer

I came across this problem since I wanted to parse any color string value and be able to specify an opacity  so I wrote this function that uses the canvas API  var toRGBA   function        var canvas   document createElement  canvas      var context   canvas getContext  2d       canvas width   1    canvas height   1     return function  color        context fillStyle   color      context fillRect 0  0  1  1        var data   context getImageData 0  0  1  1  data       return         r  data 0         g  data 1         b  data 2         a  data 3                    Note about context fillStyle   If parsing the value results in failure  then it must be ignored  and the attribute must retain its previous value   Here s a Stack Snippet demo you can use to test inputs   x000D   x000D  var toRGBA   function        var canvas   document createElement  canvas      var context   canvas getContext  2d       canvas width   1    canvas height   1     return function  color        context fillStyle   color      context fillRect 0  0  1  1        var data   context getImageData 0  0  1  1  data       return         r  data 0         g  data 1         b  data 2         a  data 3                    var inputs   document getElementsByTagName  input     function setColor       inputs 1  value   JSON stringify toRGBA inputs 0  value      document body style backgroundColor   inputs 0  value     inputs 0  addEventListener  input   setColor   setColor    x000D  input     width  200px    margin  0 5rem    x000D   lt input value  cyan    gt   lt input readonly  readonly    gt  x000D   x000D   x000D

User · Answer

function getRGB color     if color length    7       var r   parseInt color substr 1 2  16       var g   parseInt color substr 3 2  16       var b   parseInt color substr 5 2  16           return  rgb   r     g     b                 else     console log  Enter correct value      var a   getRGB   f0f0f0    if  a    a    Enter correct value       a

User · Answer

Shorthand version that accepts a string    x000D   x000D  function rgbToHex a   x000D    a a replace     d   g     split        x000D    return      1 lt  lt 24    a 0  lt  lt 16    a 1  lt  lt 8    a 2   toString 16  slice 1  x000D    x000D   x000D  document write rgbToHex  rgb 255 255 255      x000D   x000D   x000D    To check if it s not already hexadecimal   x000D   x000D  function rgbToHex a   x000D    if  a indexOf      return a  x000D    a a replace     d   g     split        x000D    return      1 lt  lt 24    a 0  lt  lt 16    a 1  lt  lt 8    a 2   toString 16  slice 1  x000D    x000D   x000D  document write  rgb    rgbToHex  rgb 255 255 255       -- hex    rgbToHex   e2e2e2     x000D   x000D   x000D

User · Answer

I m working with XAML data that has a hex format of  AARRGGBB  Alpha  Red  Green  Blue    Using the answers above  here s my solution    function hexToRgba hex        var bigint  r  g  b  a        Remove   character     var re              var aRgb   hex replace re           bigint   parseInt aRgb  16          If in  FFF format     if  aRgb length    3            r    bigint  gt  gt  4   amp  255          g    bigint  gt  gt  2   amp  255          b   bigint  amp  255          return  rgba     r         g         b     1                 If in  RRGGBB format     if  aRgb length  gt   6            r    bigint  gt  gt  16   amp  255          g    bigint  gt  gt  8   amp  255          b   bigint  amp  255          var rgb   r         g         b             If in  AARRBBGG format         if  aRgb length    8                a     bigint  gt  gt  24   amp  255    255              return  rgba     rgb         a toFixed 1                             return  rgba     rgb     1        http   jsfiddle net kvLyscs3

User · Answer

I whipped up this for use with lodash  It will convert an RGB string such as  30 209 19  to its corresponding hex string   1ed113    var rgb    30 209 19    var hex     reduce rgb split       function hexAccumulator  rgbValue        var intColor     parseInt rgbValue        if    isNaN intColor             throw new Error  The value     rgbValue     was not able to be converted to int                  Ensure a value such as 2 is converted to  02       var hexColor     padLeft intColor toString 16   2   0         return hexAccumulator   hexColor

User · Answer

Try  bonus  let hex2rgb  c  gt   rgb   c substr 1  match     g  map x  gt   0x  x        let rgb2hex  c  gt     c match   d  g  map x  gt   x  toString 16  padStart 2 0   join     x000D   x000D  let hex2rgb  c  gt   rgb   c substr 1  match     g  map x  gt   0x  x        let rgb2hex  c  gt      c match   d  g  map x  gt   x  toString 16  padStart 2 0   join        TEST console log   0080C0          -- gt    hex2rgb   0080C0     console log  rgb 0  128  192  -- gt    rgb2hex  rgb 0  128  192      x000D   x000D   x000D

User · Answer

For convert directly from jQuery you can try     function rgbToHex color        var bg   color match   rgb    d    s   d    s   d             function hex x          return   0    parseInt x  toString 16   slice -2             return           hex bg 1     hex bg 2     hex bg 3           rgbToHex     col-tab-bar  col-tab span   css  color

User · Answer

function hex2rgb hex      return   0x    hex 1    hex 2    0   0x    hex 3    hex 4    0   0x    hex 5    hex 6    0

User · Answer

ECMAScript 6 version of Tim Down s answer  Converting RGB to hex   x000D   x000D  const rgbToHex    r  g  b    gt         r  g  b  map x   gt    x000D    const hex   x toString 16  x000D    return hex length     1    0    hex   hex x000D     join     x000D   x000D  console log rgbToHex 0  51  255         0033ff  x000D   x000D   x000D    Converting hex to RGB  Returns an array  r  g  b   Works also with shorthand hex triplets such as   03F     x000D   x000D  const hexToRgb   hex   gt  x000D    hex replace       a-f d    a-f d    a-f d    i x000D                 m  r  g  b    gt        r   r   g   g   b   b  x000D       substring 1  match    2  g  x000D       map x   gt  parseInt x  16   x000D   x000D  console log hexToRgb   0033ff        0  51  255  x000D  console log hexToRgb   03f        0  51  255  x000D   x000D   x000D    Bonus  RGB to hex using padStart   method   x000D   x000D  const rgbToHex    r  g  b    gt         r  g  b  x000D     map x   gt  x toString 16  padStart 2   0    join     x000D   x000D  console log rgbToHex 0  51  255         0033ff  x000D   x000D   x000D    Note that this answer uses latest ECMAScript features  which are not supported in older browsers  If you want this code to work in all environments  you should use Babel to compile your code

User · Answer

Here s my version  function rgb to hex red  green  blue      const rgb    red  lt  lt  16     green  lt  lt  8     blue  lt  lt  0     return        0x1000000   rgb  toString 16  slice 1      function hex to rgb hex      const normal   hex match      0-9a-f  2    0-9a-f  2    0-9a-f  2    i     if  normal  return normal slice 1  map e   gt  parseInt e  16      const shorthand   hex match      0-9a-f    0-9a-f    0-9a-f    i     if  shorthand  return shorthand slice 1  map e   gt  0x11   parseInt e  16      return null

User · Answer

Based on  MichalPerlakowski answer  EcmaScipt 6  and his answer based on Tim Down s answer  I wrote a modified version of the function of converting hexToRGB with the addition of safe checking if the r g b color components are between 0-255 and also the funtions can take Number r g b params or String r g b parameters and here it is    function rgbToHex r  g  b         r   Math abs r        g   Math abs g        b   Math abs b         if   r  lt  0   r   0       if   g  lt  0   g   0       if   b  lt  0   b   0        if   r  gt  255   r   255       if   g  gt  255   g   255       if   b  gt  255   b   255       return        r  g  b  map x   gt          const hex   x toString 16         return hex length     1    0    hex   hex        join            To use the function safely - you should ckeck whether the passing string is a real rbg string color - for example a very simple check could be    if  rgbStr substring 0 3       rgb         let rgbColors   JSON parse rgbStr replace  rgb         replace              rgbStr   this rgbToHex rgbColors 0   rgbColors 1   rgbColors 2

User · Answer

I made a small Javascript color class for RGB and Hex colors  this class also includes RGB and Hex validation functions  I ve added the code as a snippet to this answer    x000D   x000D  var colorClass   function     x000D     this validateRgb   function color    x000D        return typeof color      object   amp  amp  x000D        color length     3                amp  amp  x000D        Math min apply null  color   gt   0  amp  amp  x000D        Math max apply null  color   lt   255  x000D        x000D     this validateHex   function color    x000D        return color match         0-9a-f  3   1 2    i   x000D        x000D     this hexToRgb   function color    x000D        var hex      color replace             x000D        var length   hex length  x000D        return       x000D           parseInt length     6   hex  0     hex  1     hex  0     hex  0    16   x000D           parseInt length     6   hex  2     hex  3     hex  1     hex  1    16   x000D           parseInt length     6   hex  4     hex  5     hex  2     hex  2    16  x000D           x000D        x000D     this rgbToHex   function color    x000D        return       x000D          0    parseInt color  0    10  toString 16   slice -2    x000D          0    parseInt color  1    10  toString 16   slice -2    x000D          0    parseInt color  2    10  toString 16   slice -2   x000D        x000D     x000D   x000D  var colors   new colorClass    x000D  console log colors hexToRgb   FFFFFF              255  255  255  x000D  console log colors rgbToHex  255  255  255        FFFFFF x000D   x000D   x000D

User · Answer

You can try this simple piece of code below    For HEX to RGB  list  r   g   b    sscanf  7bde84     02x 02x 02x    echo  r          g          b    This will return 123 222 132  For RGB to HEX   rgb    123 222 132    rgbarr   explode      rgb 3   echo sprintf    02x 02x 02x    rgbarr 0    rgbarr 1    rgbarr 2      This will return  7bde84

User · Answer

A clean coffeescript version of the above  thanks  TimDown    rgbToHex    rgb  - gt      a   rgb match   d  g     rgb  unless a length is 3            1  lt  lt  24     parseInt a 0    lt  lt  16     parseInt a 1    lt  lt  8    parseInt a 2    toString 16  slice 1

User · Answer

This code accept  fff and  ffffff variants and opacity   function hex2rgb hex  opacity            var h hex replace                   h    h match new RegExp       h length 3        g              for var i 0  i lt h length  i                h i    parseInt h i  length  1  h i  h i  h i   16            if  typeof opacity     undefined    h push opacity            return  rgba   h join

User · Answer

CSS Level 4 side note  Generally  the reason you d want to be able to convert Hex to RGB is for the alpha channel  in which case you can soon do that with CSS4 by adding a trailing hex  Example   FF8800FF or  f80f for fully transparent orange   That aside  the code below answers both the questions in a single function  going from and to another   This accepts an optional alpha channel  supports both string an array formats  parses 3 4 6 7 character hex s  and rgb a complete or partial strings  with exception of percent-defined rgb a values  without a flag    Replace the few ES6 syntaxes if supporting IE   In a line   function rgbaHex c a i  return Array isArray c    typeof c    string  amp  amp     test c      c  Array isArray c  c c replace    sa-z        gi     split       map s  gt parseInt s  toString 16  replace     a-z d    i  0 1         c 0  c 1  c 2    c c replace         c c length 6 c replace               1 1 2 2 3 3   c a parseFloat a   null  rgb  a  a          i parseInt c 16   gt  gt 16 amp 255 i gt  gt 8 amp 255 i amp 255 a  join   replace                  Readable version   function rgbaHex c  a           RGBA to Hex     if  Array isArray c      typeof c      string   amp  amp      test c              c   Array isArray c    c   c replace    sa-z        gi      split               c   c map s   gt  window parseInt s  toString 16  replace     a-z d    i   0 1              return       c 0    c 1    c 2                Hex to RGBA     else           c   c replace                   c   c length   6   c replace                1 1 2 2 3 3     c          c   window parseInt c  16            a   window parseFloat a     null           const r    c  gt  gt  16   amp  255          const g    c  gt  gt  08   amp  255          const b    c  gt  gt  00   amp  255           return  rgb  a    a           r  g  b  a  join   replace                        Usages   rgbaHex   a8f    rgbaHex   aa88ff    rgbaHex   A8F    rgbaHex   AA88FF    rgbaHex   AA88FF   0 5   rgbaHex   a8f    0 85       etc   rgbaHex  rgba 170 136 255 0 8      rgbaHex  rgba 170 136 255 0 8     rgbaHex  rgb 170 136 255     rgbaHex  rg170 136 255    rgbaHex   170  136  255     rgbaHex  170 136 255 0 8    rgbaHex  170 136 255       etc

User · Answer

An alternative version of hexToRgb   function hexToRgb hex        var bigint   parseInt hex  16       var r    bigint  gt  gt  16   amp  255      var g    bigint  gt  gt  8   amp  255      var b   bigint  amp  255       return r         g         b      Edit  3 28 2017 Here is another approach that seems to be even faster  function hexToRgbNew hex      var arrBuff   new ArrayBuffer 4     var vw   new DataView arrBuff     vw setUint32 0 parseInt hex  16  false     var arrByte   new Uint8Array arrBuff      return arrByte 1          arrByte 2          arrByte 3       Edit  8 11 2017 The new approach above after more testing is not faster     Though it is a fun alternate way

User · Answer

A simple answer for rgb to hex      function rgbtohex r g b           return        Math round r    65536   Math round g    256   Math round b   toString 16

User · Answer

This could be used for getting colors from computed style propeties   function rgbToHex color        color       color      if   color    color indexOf  rgb    lt  0            return             if  color charAt 0                    return color             var nums         rgb    d    s   d    s   d     i exec color           r   parseInt nums 2   10  toString 16           g   parseInt nums 3   10  toString 16           b   parseInt nums 4   10  toString 16        return                 r length    1    0   r   r             g length    1    0   g   g             b length    1    0   b   b               not computed   lt div style  color   4d93bc  border  1px solid red   gt     lt  div gt      computed   lt div style  color  rgb 77  147  188   border  1px solid rgb 255  0  0    gt     lt  div gt   console log  rgbToHex color        4d93bc console log  rgbToHex borderTopColor        ff0000   Ref  https   github com k-gun so blob master so util js

User · Answer

I found this and because I think it is pretty straight forward and has validation tests and supports alpha values  optional   this will fit the case   Just comment out the regex line if you know what you re doing and it s a tiny bit faster   function hexToRGBA hex  alpha       hex       hex  trim   replace    g        trim and remove any leading   if there  supports number values as well      if         0-9a-fA-F  3   1 2    test hex   throw   not a valid hex string      Regex Validator     if  hex length  3  hex hex 0  hex 0  hex 1  hex 1  hex 2  hex 2     support short form     var b int   parseInt hex  16       return  rgba              b int  gt  gt  16   amp  255    R          b int  gt  gt  8   amp  255    G         b int  amp  255    B         alpha    1    add alpha if is set       join

User · Answer

My example     x000D   x000D  color    x000D              toHex  function num   x000D                  var str   num toString 16   x000D                  return  str length lt 6   00  str     str   x000D                 x000D              toNum  function hex   x000D                  return parseInt hex replace          16   x000D                 x000D              rgbToHex  function color  x000D                x000D                  color   color replace   s g      x000D                  var aRGB   color match   rgb    d 1 3         d 1 3         d 1 3          i   x000D                  if aRGB  x000D                    x000D                      color       x000D                      for  var i 1   i lt  3  i    color    Math round  aRGB i  aRGB i  length-1       2 55 1  parseInt aRGB i    toString 16  replace          0 1    x000D                    x000D                  else color   color replace        da-f     da-f     da-f    i    1 1 2 2 3 3    x000D                  return     color  x000D                x000D   x000D   x000D

[javascript] RGB to hex and hex to RGB

Examples related to javascript

Examples related to colors

Examples related to hex

Examples related to rgb