Programmatically Lighten or Darken a hex color or rgb and blend colors

Question

Here is a function I was working on to programmatically lighten or darken a hex color by a specific amount  Just pass in a string like  3F6D2A  for the color  col  and a base10 integer  amt  for the amount to lighten or darken  To darken  pass in a negative number  i e  -20    The reason for me to do this was because of all the solutions I found  thus far  they seemed to over-complicate the issue  And I had a feeling it could be done with just a couple lines of code  Please let me know if you find any problems  or have any adjustments to make that would speed it up    x000D   x000D  function LightenDarkenColor col  amt    x000D    col   parseInt col  16   x000D    return    col  amp  0x0000FF    amt        col  gt  gt  8   amp  0x00FF    amt   lt  lt  8       col  gt  gt  16    amt   lt  lt  16   toString 16   x000D    x000D   x000D   x000D     TEST x000D  console log  LightenDarkenColor  3F6D2A  40     x000D   x000D   x000D    For Development use here is an easier to read version    x000D   x000D  function LightenDarkenColor col  amt    x000D    var num   parseInt col  16   x000D    var r    num  gt  gt  16    amt  x000D    var b     num  gt  gt  8   amp  0x00FF    amt  x000D    var g    num  amp  0x0000FF    amt  x000D    var newColor   g    b  lt  lt  8     r  lt  lt  16   x000D    return newColor toString 16   x000D    x000D   x000D   x000D     TEST x000D  console log LightenDarkenColor  3F6D2A   -40    x000D   x000D   x000D    And finally a version to handle colors that may  or may not  have the     in the beginning  Plus adjusting for improper color values   function LightenDarkenColor col amt        var usePound   false      if   col 0                     col   col slice 1           usePound   true             var num   parseInt col 16        var r    num  gt  gt  16    amt       if   r  gt  255   r   255      else if   r  lt  0  r   0       var b     num  gt  gt  8   amp  0x00FF    amt       if   b  gt  255   b   255      else if   b  lt  0  b   0       var g    num  amp  0x0000FF    amt       if   g  gt  255   g   255      else if    g  lt  0   g   0       return  usePound            g    b  lt  lt  8     r  lt  lt  16   toString 16       OK  so now it s not just a couple of lines  but it seems far simpler and if you re not using the     and don t need to check for colors out of range  it is only a couple of lines    If not using the      you can just add it in code like   var myColor    3F6D2A   myColor   LightenDarkenColor myColor 10   thePlaceTheColorIsUsed          myColor     I guess my main question is  am I correct here  Does this not encompass some  normal  situations

User · Answer

I needed it in C   it may help  net developers  public static string LightenDarkenColor string color  int amount                int colorHex   int Parse color  System Globalization NumberStyles HexNumber           string output      colorHex  amp  0x0000FF    amount        colorHex  gt  gt  0x8   amp  0x00FF    amount   lt  lt  0x8       colorHex  gt  gt  0xF    amount   lt  lt  0xF   ToString  x6            return output

User · Answer

I am adding my 2 cents here  a satisfyingly small combination of different answers  const colorShade    col  amt    gt      col   col replace             if  col length     3  col   col 0    col 0    col 1    col 1    col 2    col 2     let  r  g  b    col match    2  g       r  g  b     parseInt r  16    amt  parseInt g  16    amt  parseInt b  16    amt      r   Math max Math min 255  r   0  toString 16    g   Math max Math min 255  g   0  toString 16    b   Math max Math min 255  b   0  toString 16     const rr    r length  lt  2    0          r   const gg    g length  lt  2    0          g   const bb    b length  lt  2    0          b    return     rr   gg   bb       accepts a color starting with   or not  with 6 characters or 3 characters  example of use  colorShade   54b946   -40  Here is the output of 4 colors with 3 shades lighter and 3 shades darker for each of them  amount is a multiple of 40 here

User · Answer

I made a port of the excellent xcolor library to remove its jQuery dependency  There are a ton of functions in there including lightening and darkening colors    Really  converting hex to RGB is a completely separate function from lightening or darkening colors  Keep things DRY please  In any case  once you have an RGB color  you can just add the difference between the light level you want and the light level you have to each of the RGB values   var lightness   function level        if level     undefined            return Math max this g this r this b        else           var roundedLevel   Math round level     fractions won t work here         var levelChange   roundedLevel - this lightness            var r   Math max 0 this r levelChange          var g   Math max 0 this g levelChange          var b   Math max 0 this b levelChange           if r  gt  0xff  r   0xff         if g  gt  0xff  g   0xff         if b  gt  0xff  b   0xff          return xolor  r  r  g  g  b  b            var lighter   function amount        return this lightness this lightness   amount      See https   github com fresheneesz xolor for more of the source

User · Answer

Your approach is ok    I simplify your shortest version a little  for saturation control look here   col amt   gt      0x  col  amt 0x010101  toString 16  padStart 6 0    x000D   x000D     Similar to OP shortest version  we not have here   and colors range checking  var LightenDarkenColor          col amt    gt      0x  col  amt 0x010101  toString 16  padStart 6 0              ------    TEST    ------  function update       let c  col value padEnd 6  0   slice 0 6     let color       LightenDarkenColor c   amt value     oldColor innerHTML    Old     c    oldColor style    background     c      newColor innerHTML    New    color   newColor style    background    color           update    x000D   box  width  100px  height  100px  margin  10px  display  inline-block  x000D   lt input id  col  value  3F6D2A  oninput  update    gt   lt input id  amt  value  30  oninput  update    gt  lt br gt   lt div id  oldColor  class  box  gt  lt  div gt   lt div id  newColor  class  box  gt  lt  div gt  x000D   x000D   x000D   And version with   and color ranges checking  x000D   x000D       and colors range checking  var LightenDarkenColor          col amt    gt      col slice 1  match     g                            map x  gt  x   0x  x   amt x lt 0 0  x gt 255 255 x                             toString 16  padStart 2 0   join           ------    TEST    ------  function update       let c  col value padEnd 6  0   slice 0 7     let color   LightenDarkenColor c   amt value     oldColor innerHTML    Old    c    oldColor style    background    c      newColor innerHTML    New    color   newColor style    background    color       update    x000D   box  width  100px  height  100px  margin  10px  display  inline-block  x000D   lt input id  col  value   3F6D2A  oninput  update    gt   lt input id  amt  value  40  oninput  update    gt  lt br gt   lt div id  oldColor  class  box  gt  lt  div gt   lt div id  newColor  class  box  gt  lt  div gt  x000D   x000D   x000D

User · Answer

There is lack of support for colors starting from 00 ie  quot  000623 quot  but here is the fix function lightenDarkenColor colorCode  amount     let usePound   false    if  colorCode 0      quot   quot          colorCode   colorCode slice 1        usePound   true      const num   parseInt colorCode  16    let r    num  gt  gt  16    amount    if  r  gt  255         r   255     else if  r  lt  0         r   0       let b     num  gt  gt  8   amp  0x00FF    amount    if  b  gt  255         b   255     else if  b  lt  0         b   0       let g    num  amp  0x0000FF    amount    if  g  gt  255         g   255     else if  g  lt  0         g   0      let color    g    b  lt  lt  8     r  lt  lt  16   toString 16    while  color length  lt  6      color   0   color      return  usePound               color

User · Answer

C  Version    note that I am getting color strings in this format  FF12AE34  and need to cut out the  FF       private string GetSmartShadeColorByBase string s  float percent                if  string IsNullOrEmpty s               return             var r   s Substring 3  2           int rInt   int Parse r  NumberStyles HexNumber           var g   s Substring 5  2           int gInt   int Parse g  NumberStyles HexNumber           var b   s Substring 7  2           int bInt   int Parse b  NumberStyles HexNumber            var t   percent  lt  0   0   255          var p   percent  lt  0   percent -1   percent           int newR   Convert ToInt32 Math Round  t - rInt    p    rInt           var newG   Convert ToInt32 Math Round  t - gInt    p    gInt           var newB   Convert ToInt32 Math Round  t - bInt    p    bInt            return String Format    0 X2  1 X2  2 X2    newR  newG  newB

User · Answer

The following method will allow you to lighten or darken the exposure value of a Hexadecimal  Hex  color string   private static string GetHexFromRGB byte r  byte g  byte b  double exposure        exposure   Math Max Math Min exposure  1 0   -1 0       if  exposure  gt   0                return                     byte  r     byte MaxValue - r    exposure    ToString  X2                   byte  g     byte MaxValue - g    exposure    ToString  X2                   byte  b     byte MaxValue - b    exposure    ToString  X2              else               return                     byte  r    r   exposure    ToString  X2                   byte  g    g   exposure    ToString  X2                   byte  b    b   exposure    ToString  X2               For the last parameter value in GetHexFromRGB    Pass in a double value somewhere between -1 and 1  -1 is black  0 is unchanged  1 is white       split color   e04006  into three strings var r   Convert ToByte  e0   16   var g   Convert ToByte  40   16   var b   Convert ToByte  06   16    GetHexFromRGB r  g  b  0 25       Lighten by 25

User · Answer

Well  this answer has become its own beast  Many new versions  it was getting stupid long  Many thanks to all of the great many contributors to this answer  But  in order to keep it simple for the masses  I archived all the versions history of this answer s evolution to my github  And started it over clean on StackOverflow here with the newest version  A special thanks goes out to Mike  Pomax  Kamermans for this version  He gave me the new math   This function  pSBC  will take a HEX or RGB web color  pSBC can shade it darker or lighter  or blend it with a second color  and can also pass it right thru but convert from Hex to RGB  Hex2RGB  or RGB to Hex  RGB2Hex   All without you even knowing what color format you are using  This runs really fast  probably the fastest  especially considering its many features  It was a long time in the making  See the whole story on my github   If you want the absolutely smallest and fastest possible way to shade or blend  see the Micro Functions below and use one of the 2-liner speed demons  They are great for intense animations  but this version here is fast enough for most animations  This function uses Log Blending or Linear Blending  However  it does NOT convert to HSL to properly lighten or darken a color  Therefore  results from this function will differ from those much larger and much slower functions that use HSL   jsFiddle with pSBC github  gt  pSBC Wiki  Features   Auto-detects and accepts standard Hex colors in the form of strings  For example   quot  AA6622 quot  or  quot  bb551144 quot   Auto-detects and accepts standard RGB colors in the form of strings  For example   quot rgb 123 45 76  quot  or  quot rgba 45 15 74 0 45  quot   Shades colors to white or black by percentage  Blends colors together by percentage  Does Hex2RGB and RGB2Hex conversion at the same time  or solo  Accepts 3 digit  or 4 digit w  alpha  HEX color codes  in the form  RGB  or  RGBA   It will expand them  For Example   quot  C41 quot  becomes  quot  CC4411 quot   Accepts and  Linear  blends alpha channels  If either the c0  from  color or the c1  to  color has an alpha channel  then the returned color will have an alpha channel  If both colors have an alpha channel  then the returned color will be a linear blend of the two alpha channels using the percentage given  just as if it were a normal color channel   If only one of the two colors has an alpha channel  this alpha will just be passed thru to the returned color  This allows one to blend shade a transparent color while maintaining the transparency level  Or  if the transparency levels should blend as well  make sure both colors have alphas  When shading  it will pass the alpha channel straight thru  If you want basic shading that also shades the alpha channel  then use rgb 0 0 0 1  or rgb 255 255 255 1  as your c1  to  color  or their hex equivalents   For RGB colors  the returned color s alpha channel will be rounded to 3 decimal places  RGB2Hex and Hex2RGB conversions are implicit when using blending  Regardless of the c0  from  color  the returned color will always be in the color format of the c1  to  color  if one exists  If there is no c1  to  color  then pass  c  in as the c1 color and it will shade and convert whatever the c0 color is  If conversion only is desired  then pass 0 in as the percentage  p  as well  If the c1 color is omitted or a non-string is passed in  it will not convert  A secondary function is added to the global as well  pSBCr can be passed a Hex or RGB color and it returns an object containing this color information  Its in the form   r  XXX  g  XXX  b  XXX  a  X XXX   Where  r   g  and  b have range 0 to 255  And when there is no alpha   a is -1  Otherwise   a has range 0 000 to 1 000  For RGB output  it outputs rgba   over rgb   when a color with an alpha channel was passed into c0  from  and or c1  to   Minor Error Checking has been added  It s not perfect  It can still crash or create jibberish  But it will catch some stuff  Basically  if the structure is wrong in some ways or if the percentage is not a number or out of scope  it will return null  An example  pSBC 0 5  quot salt quot      null  where as it thinks  salt is a valid color  Delete the four lines which end with return null  to remove this feature and make it faster and smaller  Uses Log Blending  Pass true in for l  the 4th parameter  to use Linear Blending   Code     Version 4 0 const pSBC  p c0 c1 l   gt       let r g b P f t h i parseInt m Math round a typeof c1    quot string quot       if typeof p    quot number quot   p lt -1  p gt 1  typeof c0    quot string quot    c0 0    r  amp  amp c0 0          c1 amp  amp  a  return null      if  this pSBCr this pSBCr  d   gt           let n d length x             if n gt 9                r g b a  d d split  quot   quot   n d length              if n lt 3  n gt 4 return null              x r i r 3    quot a quot  r slice 5  r slice 4   x g i g  x b i b  x a a parseFloat a  -1          else              if n  8  n  6  n lt 4 return null              if n lt 6 d  quot   quot  d 1  d 1  d 2  d 2  d 3  d 3   n gt 4 d 4  d 4   quot  quot                d i d slice 1  16               if n  9  n  5 x r d gt  gt 24 amp 255 x g d gt  gt 16 amp 255 x b d gt  gt 8 amp 255 x a m  d amp 255  0 255  1000              else x r d gt  gt 16 x g d gt  gt 8 amp 255 x b d amp 255 x a -1          return x       h c0 length gt 9 h a c1 length gt 9 true c1   quot c quot   h false h f this pSBCr c0  P p lt 0 t c1 amp  amp c1   quot c quot  this pSBCr c1  P  r 0 g 0 b 0 a -1   r 255 g 255 b 255 a -1  p P p -1 p P 1-p      if  f   t return null      if l r m P f r p t r  g m P f g p t g  b m P f b p t b       else r m  P f r  2 p t r  2   0 5  g m  P f g  2 p t g  2   0 5  b m  P f b  2 p t b  2   0 5       a f a t t a f a gt  0  t gt  0 a f a lt 0 t t lt 0 a a P t p 0      if h return quot rgb quot   f  quot a  quot   quot   quot   r  quot   quot  g  quot   quot  b  f  quot   quot  m a 1000  1000  quot  quot    quot   quot       else return quot   quot   4294967296 r 16777216 g 65536 b 256  f m a 255  0   toString 16  slice 1 f undefined -2     Usage     Setup   let color1    quot rgb 20 60 200  quot   let color2    quot rgba 20 60 200 0 67423  quot   let color3    quot  67DAF0 quot   let color4    quot  5567DAF0 quot   let color5    quot  F3A quot   let color6    quot  F3A9 quot   let color7    quot rgb 200 60 20  quot   let color8    quot rgba 200 60 20 0 98631  quot       Tests        Log Blending         Shade  Lighten or Darken  pSBC   0 42  color1       rgb 20 60 200     42  Lighter    gt  rgb 166 171 225  pSBC   -0 4  color5        F3A    40  Darker    gt   c62884 pSBC   0 42  color8       rgba 200 60 20 0 98631     42  Lighter    gt  rgba 225 171 166 0 98631      Shade with Conversion  use  quot c quot  as your  quot to quot  color  pSBC   0 42  color2   quot c quot        rgba 20 60 200 0 67423     42  Lighter     Convert    gt   a6abe1ac     RGB2Hex  amp  Hex2RGB Conversion Only  set percentage to zero  pSBC   0  color6   quot c quot         F3A9    Convert    gt  rgba 255 51 170 0 6      Blending pSBC   -0 5  color2  color8       rgba 20 60 200 0 67423    rgba 200 60 20 0 98631     50  Blend    gt  rgba 142 60 142 0 83  pSBC   0 7  color2  color7       rgba 20 60 200 0 67423    rgb 200 60 20     70  Blend    gt  rgba 168 60 111 0 67423  pSBC   0 25  color3  color7        67DAF0   rgb 200 60 20     25  Blend    gt  rgb 134 191 208  pSBC   0 75  color7  color3       rgb 200 60 20     67DAF0    75  Blend    gt   86bfd0       Linear Blending         Shade  Lighten or Darken  pSBC   0 42  color1  false  true       rgb 20 60 200     42  Lighter    gt  rgb 119 142 223  pSBC   -0 4  color5  false  true        F3A    40  Darker    gt   991f66 pSBC   0 42  color8  false  true       rgba 200 60 20 0 98631     42  Lighter    gt  rgba 223 142 119 0 98631      Shade with Conversion  use  quot c quot  as your  quot to quot  color  pSBC   0 42  color2   quot c quot   true       rgba 20 60 200 0 67423     42  Lighter     Convert    gt   778edfac     RGB2Hex  amp  Hex2RGB Conversion Only  set percentage to zero  pSBC   0  color6   quot c quot   true        F3A9    Convert    gt  rgba 255 51 170 0 6      Blending pSBC   -0 5  color2  color8  true       rgba 20 60 200 0 67423    rgba 200 60 20 0 98631     50  Blend    gt  rgba 110 60 110 0 83  pSBC   0 7  color2  color7  true       rgba 20 60 200 0 67423    rgb 200 60 20     70  Blend    gt  rgba 146 60 74 0 67423  pSBC   0 25  color3  color7  true        67DAF0   rgb 200 60 20     25  Blend    gt  rgb 127 179 185  pSBC   0 75  color7  color3  true       rgb 200 60 20     67DAF0    75  Blend    gt   7fb3b9       Other Stuff         Error Checking pSBC   0 42   quot  FFBAA quot         FFBAA    42  Lighter    gt  null   Invalid Input Color  pSBC   42  color1  color5       rgb 20 60 200     F3A    4200  Blend    gt  null   Invalid Percentage Range  pSBC   0 42            object Object     42  Lighter    gt  null   Strings Only for Color  pSBC    quot 42 quot   color1       rgb 20 60 200      quot 42 quot     gt  null   Numbers Only for Percentage  pSBC   0 42   quot salt quot        salt    42  Lighter    gt  null   A Little Salt is No Good         Error Check Fails  Some Errors are not Caught  pSBC   0 42   quot  salt quot         salt    42  Lighter    gt   a5a5a500      and a Pound of Salt is Jibberish      Ripping pSBCr   color4        5567DAF0    Rip    gt   object Object    gt    r  85  g  103  b  218  a  0 941    The picture below will help show the difference in the two blending methods    Micro Functions If you really want speed and size  you will have to use RGB not HEX  RGB is more straightforward and simple  HEX writes too slow and comes in too many flavors for a simple two-liner  IE  it could be a 3  4  6  or 8 digit HEX code   You will also need to sacrifice some features  no error checking  no HEX2RGB nor RGB2HEX  As well  you will need to choose a specific function  based on its function name below  for the color blending math  and if you want shading or blending  These functions do support alpha channels  And when both input colors have alphas it will Linear Blend them  If only one of the two colors has an alpha  it will pass it straight thru to the resulting color  Below are two liner functions that are incredibly fast and small  const RGB Linear Blend  p c0 c1   gt       var i parseInt r Math round P 1-p  a b c d  c0 split  quot   quot    e f g h  c1 split  quot   quot   x d  h j x  quot   quot    d h  h d r  parseFloat d  P parseFloat h  p  1000  1000  quot   quot    quot   quot       return quot rgb quot   x  quot a  quot   quot   quot   r i a 3    quot a quot  a slice 5  a slice 4   P i e 3    quot a quot  e slice 5  e slice 4   p   quot   quot  r i b  P i f  p   quot   quot  r i c  P i g  p  j     const RGB Linear Shade  p c   gt       var i parseInt r Math round  a b c d  c split  quot   quot   P p lt 0 t P 0 255 p P P 1 p 1-p      return quot rgb quot   d  quot a  quot   quot   quot   r i a 3    quot a quot  a slice 5  a slice 4   P t   quot   quot  r i b  P t   quot   quot  r i c  P t   d  quot   quot  d  quot   quot       const RGB Log Blend  p c0 c1   gt       var i parseInt r Math round P 1-p  a b c d  c0 split  quot   quot    e f g h  c1 split  quot   quot   x d  h j x  quot   quot    d h  h d r  parseFloat d  P parseFloat h  p  1000  1000  quot   quot    quot   quot       return quot rgb quot   x  quot a  quot   quot   quot   r  P i a 3    quot a quot  a slice 5  a slice 4    2 p i e 3    quot a quot  e slice 5  e slice 4    2   0 5   quot   quot  r  P i b   2 p i f   2   0 5   quot   quot  r  P i c   2 p i g   2   0 5  j     const RGB Log Shade  p c   gt       var i parseInt r Math round  a b c d  c split  quot   quot   P p lt 0 t P 0 p 255  2 P P 1 p 1-p      return quot rgb quot   d  quot a  quot   quot   quot   r  P i a 3    quot a quot  a slice 5  a slice 4    2 t   0 5   quot   quot  r  P i b   2 t   0 5   quot   quot  r  P i c   2 t   0 5   d  quot   quot  d  quot   quot        Want more info  Read the full writeup on github  PT  P s  If anyone has the math for another blending method  please share

User · Answer

My version written in typescript  function changeColorLightness color  number  lightness  number   number       return  Math max 0  Math min   color  amp  0xFF0000    0x10000    lightness  0xFF     0x10000             Math max 0  Math min   color  amp  0x00FF00    0x100    lightness  0xFF     0x100             Math max 0  Math min   color  amp  0x0000FF     lightness  0xFF        explanation  export function changeColorLightness color  number  lightness  number   number       const r    color  amp  0xFF0000    0x10  4      const g    color  amp  0x00FF00    0x10  2      const b    color  amp  0x0000FF        const changedR   Math max 0  Math min r   lightness  0xFF        const changedG   Math max 0  Math min g   lightness  0xFF        const changedB   Math max 0  Math min b   lightness  0xFF         return  changedR   0x10  4     changedG   0x10  2    changedB     usage  changeColorLightness 0x00FF00  0x50   changeColorLightness parseInt  quot  00FF00 quot  replace          16   0x50   changeColorLightness 0x00FF00  127 5

User · Answer

I just used the hex number preceded by      var x   0xf0f0f0  x x 0xf00    set this value as you wish programatically document getElementById  quot heading quot   style    background-color     x toString 16     higher the number   lighter the color

User · Answer

I wanted to change a color to a specific brightness level - no matter what brightness the color was before - here s a simple JS function that seems to work well  although I m sure it could be shorter  function setLightPercentage col  any  p  number        const R   parseInt col substring 1  3   16       const G   parseInt col substring 3  5   16       const B   parseInt col substring 5  7   16       const curr total dark    255   3  -  R   G   B           calculate how much of the current darkness comes from the different channels     const RR     255 - R    curr total dark       const GR     255 - G    curr total dark       const BR     255 - B    curr total dark           calculate how much darkness there should be in the new color     const new total dark     255 - 255    p   100     3           make the new channels contain the same   of available dark as the old ones did     const NR   255 - Math round RR   new total dark       const NG   255 - Math round GR   new total dark       const NB   255 - Math round BR   new total dark        const RO     NR toString 16  length     1     0    NR toString 16    NR toString 16        const GO     NG toString 16  length     1     0    NG toString 16    NG toString 16        const BO     NB toString 16  length     1     0    NB toString 16    NB toString 16         return       RO   GO   BO

User · Answer

I tried your function and there was a little bug  If some final  r  value is 1 digit only  the result comes up like   a0a0a  when the right value is  0a0a0a   for example  I just quick-fixed it by adding this instead of your return   var rStr    r toString 16  length  lt  2   0  r toString 16  r toString 16   var gStr    g toString 16  length  lt  2   0  g toString 16  g toString 16   var bStr    b toString 16  length  lt  2   0  b toString 16  b toString 16    return  usePound           rStr   gStr   bStr    Maybe it s not so nice but it do the work  Great function  BTW  Just what I needed

User · Answer

I made a solution that works very nice for me   function shadeColor color  percent         var R   parseInt color substring 1 3  16       var G   parseInt color substring 3 5  16       var B   parseInt color substring 5 7  16        R   parseInt R    100   percent    100       G   parseInt G    100   percent    100       B   parseInt B    100   percent    100        R    R lt 255  R 255        G    G lt 255  G 255        B    B lt 255  B 255         var RR     R toString 16  length  1   0  R toString 16  R toString 16        var GG     G toString 16  length  1   0  G toString 16  G toString 16        var BB     B toString 16  length  1   0  B toString 16  B toString 16         return     RR GG BB      Example Lighten   shadeColor   63C6FF  40     Example Darken   shadeColor   63C6FF  -40

User · Answer

I ve long wanted to be able to produce tints shades of colours  here is my JavaScript solution    const varyHue   function  hueIn  pcIn        const truncate   function  valIn            if  valIn  gt  255                valIn   255            else if  valIn  lt  0                 valIn   0                    return valIn              let red     parseInt hueIn substring 0  2   16       let green   parseInt hueIn substring 2  4   16       let blue    parseInt hueIn substring 4  6   16       let pc      parseInt pcIn  10        shade positive  tint negative     let max     0      let dif     0       max   red       if  pc  lt  0         tint  make lighter         if  green  lt  max                max   green                     if  blue  lt  max                max   blue                     dif   parseInt   Math abs pc    100     255 - max    10            return leftPad   truncate red   dif   toString 16     0   2     leftPad   truncate green   dif   toString 16     0   2    leftPad   truncate blue   dif   toString 16     0   2         else        shade  make darker         if  green  gt  max                max   green                     if  blue  gt  max                max   blue                     dif   parseInt   pc   100    max   10            return leftPad   truncate red - dif   toString 16     0   2     leftPad   truncate green - dif   toString 16     0   2    leftPad   truncate blue - dif   toString 16     0   2

User · Answer

have you thought about an rgb   hsl conversion  then just move the Luminosity up and down  thats the way I would go   A quick look for some algorithms got me the following sites   PHP  http   serennu com colour rgbtohsl php   Javascript  http   mjijackson com 2008 02 rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript  EDIT the above link is no longer valid  You can view git hub for the page source or the gist  Alternatively another StackOverflow question might be a good place to look     Even though this is not the right choice for the OP the following is an approximation of the code I was originally suggesting   Assuming you have rgb hsl conversion functions   var SHADE SHIFT AMOUNT   0 1    function lightenShade colorValue        if colorValue  amp  amp  colorValue length  gt   6                var redValue   parseInt colorValue slice -6 -4   16           var greenValue   parseInt colorValue slice -4 -2   16           var blueValue   parseInt colorValue slice -2   16            var hsl   rgbToHsl redValue  greenValue  blueValue           hsl 2   Math min hsl 2    SHADE SHIFT AMOUNT  1           var rgb   hslToRgb hsl 0   hsl 1   hsl 2            return       rgb 0  toString 16    rgb 1  toString 16    rgb 2  toString 16             return null     function darkenShade colorValue        if colorValue  amp  amp  colorValue length  gt   6                var redValue   parseInt colorValue slice -6 -4   16           var greenValue   parseInt colorValue slice -4 -2   16           var blueValue   parseInt colorValue slice -2   16            var hsl   rgbToHsl redValue  greenValue  blueValue           hsl 2   Math max hsl 2  - SHADE SHIFT AMOUNT  0           var rgb   hslToRgb hsl 0   hsl 1   hsl 2            return       rgb 0  toString 16    rgb 1  toString 16    rgb 2  toString 16             return null      This assumes    You have functions hslToRgb and rgbToHsl  The parameter colorValue is a string in the form  RRGGBB    Although if we are discussing css there is a syntax for specifying hsl hsla for IE9 Chrome Firefox

User · Answer

How to simple shade color in PHP     lt  php function shadeColor   color   cccccc    percent -25        color   Str Replace     Null  color       r   Hexdec Substr  color 0 2       g   Hexdec Substr  color 2 2       b   Hexdec Substr  color 4 2        r    Int   r  100  percent  100      g    Int   g  100  percent  100      b    Int   b  100  percent  100       r   Trim Dechex   r lt 255   r 255         g   Trim Dechex   g lt 255   g 255         b   Trim Dechex   b lt 255   b 255        r     Strlen  r   1   0  r    r      g     Strlen  g   1   0  g    g      b     Strlen  b   1   0  b    b      return  String      r   g   b        echo shadeColor        999999

User · Answer

Here is a super simple one liner based on Eric s answer  function adjust color  amount        return       color replace           replace     g  color   gt    0  Math min 255  Math max 0  parseInt color  16    amount   toString 16   substr -2        Examples   adjust   ffffff   -20    gt    ebebeb  adjust  000000   20    gt    141414

User · Answer

This is what I used based on your function  I prefer to use steps over percentage because it s more intuitive for me   For example  20  of a 200 blue value is much different than 20  of a 40 blue value   Anyways  here s my modification  thanks for your original function   function adjustBrightness col  amt         var usePound   false       if  col 0                    col   col slice 1           usePound   true             var R   parseInt col substring 0 2  16       var G   parseInt col substring 2 4  16       var B   parseInt col substring 4 6  16           to make the colour less bright than the input        change the following three     symbols to  -      R   R   amt      G   G   amt      B   B   amt       if  R  gt  255  R   255      else if  R  lt  0  R   0       if  G  gt  255  G   255      else if  G  lt  0  G   0       if  B  gt  255  B   255      else if  B  lt  0  B   0       var RR     R toString 16  length  1   0  R toString 16  R toString 16        var GG     G toString 16  length  1   0  G toString 16  G toString 16        var BB     B toString 16  length  1   0  B toString 16  B toString 16         return  usePound           RR   GG   BB

[javascript] Programmatically Lighten or Darken a hex color (or rgb, and blend colors)

Examples related to javascript

Examples related to colors

Examples related to hex