Dynamically change color to lighter or darker by percentage CSS Javascript

Question

We have a big application on the site and we have a few links which are, let's say blue color like the blue links on this site. Now I want to make some other links, but with lighter color. Obviously I can just do simply by the hex code adding in the CSS file, but our site lets user decide what colors they want for their customized profile/site (like Twitter).

So, my question is: can we reduce the color by percentage?

Let's say the following code is CSS:

a {
  color: blue;
}

a.lighter {
  color: -50%; // obviously not correct way, but just an idea
}

OR

a.lighter {
  color: blue -50%;  // again not correct, but another example of setting color and then reducing it
}

Is there a way to reduce a color by a percentage?

User · Answer

There is  opacity   which will make the background shine through   opacity  0 5    but I m not sure this is what you mean  Define  reduce color   Make transparent  Or add white

User · Answer

This is an old question  but most of the answers require the use of a preprocessor or JavaScript to operate  or they not only affect the color of the element but also the color of the elements contained within it  I am going to add a kind-of-complicated CSS-only way of doing the same thing  Probably in the future  with the more advanced CSS functions  it will be easier to do   The idea is based on using    RGB colors  so you have separate values for red  green  and blue  CSS variables  to store the color values and the darkness  and  The calc function  to apply the change    By default darkness will be 1  for 100   the regular color   and if you multiply by a number between 0 and 1  you ll be making the color darker  For example  if you multiply by 0 85 each of the values  you ll be making the colors 15  darker  100  - 15    85    0 85    Here is an example  I created three classes   dark   darker  and  darkest that will make the original color 25   50   and 75  darker respectively    x000D   x000D  html   x000D    --clarity  1  x000D    x000D   x000D  div   x000D    display  inline-block  x000D    height  100px  x000D    width  100px  x000D    line-height  100px  x000D    color  white  x000D    text-align  center  x000D    font-family  arial  sans-serif  x000D    font-size  20px  x000D    background  rgba  x000D                    calc var --r    var --clarity     x000D                    calc var --g    var --clarity     x000D                    calc var --b    var --clarity   x000D                     x000D    x000D   x000D   dark      --clarity  0 75    x000D   darker    --clarity  0 50    x000D   darkest   --clarity  0 25    x000D   x000D   red   x000D    --r  255  x000D    --g  0  x000D    --b  0  x000D    x000D   x000D   purple   x000D    --r  205  x000D    --g  30  x000D    --b  205  x000D    x000D   lt div class  red  gt 0  lt  div gt  x000D   lt div class  red dark  gt 25  lt  div gt  x000D   lt div class  red darker  gt 50  lt  div gt  x000D   lt div class  red darkest  gt 75  lt  div gt  x000D   x000D   lt br  gt  lt br  gt  x000D   x000D   lt div class  purple  gt 0  lt  div gt  x000D   lt div class  purple dark  gt 25  lt  div gt  x000D   lt div class  purple darker  gt 50  lt  div gt  x000D   lt div class  purple darkest  gt 75  lt  div gt  x000D   x000D   x000D

User · Answer

If you re using a stack which lets you use SASS  you can use the lighten function    linkcolour   0000FF   a     color   linkcolour     a lighter     color  lighten  linkcolour  50

User · Answer

if you decide to use http   compass-style org   a sass-based css framework  it provides very useful darken   and lighten   sass functions to dynamically generate css  it s very clean    import compass utilities   link color   bb8f8f a   color   link color a visited   color   link color a hover   color  darken  link color 10    generates  a     color   bb8f8f     a visited     color   bb8f8f     a hover     color   a86f6f

User · Answer

As far as I know  there s no way you can do this in CSS   But I think that a little server-side logic could easily do as you suggest  CSS stylesheets are normally static assets  but there is no reason they couldn t be dynamically generated by server-side code  Your server-side script would    Check a URL parameter to determine the user and therefore the user s chosen colour  Use a URL parameter rather than a session variable so that you can still cache the CSS  Break up the colour into its red  green and blue components Increment each of the three components by a set amount  Experiment with this to get the results you are after  Generate CSS incorporating the new colour   Links to this CSS-generating page would look something like    lt link rel  stylesheet  href  http   yoursite com custom ashx user 1231  gt    If you don t use the  css extension be sure to set the MIME-type correctly so that the browser knows to interpret the file as CSS    Note that to make colours lighter you have to raise each of the RGB values

User · Answer

If you only need to change background color  this is a great approach that is futureproof - Use linear-gradient method on background image   Check out the example below    x000D   x000D  document x000D     getElementById  colorpicker   x000D     addEventListener  change   function event    x000D      document x000D         documentElement x000D         style setProperty  --color   event target value   x000D        x000D  span   x000D    display  inline-block  x000D    border-radius  20px  x000D    height  40px  x000D    width  40px  x000D    vertical-align  middle  x000D    x000D   x000D   red   x000D    background-color  red  x000D    x000D   x000D   red-darker   x000D    background  linear-gradient  x000D      to top  x000D      rgba 0  0  0  0 25   x000D      rgba 0  0  0  0 25  x000D      red  x000D    x000D   x000D   root   x000D    --color  lime  x000D    x000D   x000D   dynamic-color   x000D    background-color  var --color   x000D    x000D   x000D   dynamic-color-darker   x000D    background  linear-gradient  x000D      to top  x000D      rgba 0  0  0  0 25   x000D      rgba 0  0  0  0 25  x000D      var --color   x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt  lt strong gt Static Color lt  strong gt  lt  td gt  x000D       lt td gt  lt span class  red  gt  lt  span gt  lt  td gt  x000D       lt td gt  lt span class  red-darker  gt  lt  span gt  lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt  lt strong gt Dynamic Color lt  strong gt  lt  td gt  x000D       lt td gt  lt span class  dynamic-color  gt  lt  span gt  lt  td gt  x000D       lt td gt  lt span class  dynamic-color-darker  gt  lt  span gt  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   lt br  gt  x000D  Change the dynamic color   lt input id  colorpicker  value   00ff00  type  color   gt  x000D   x000D   x000D    Credits  https   css-tricks com css-custom-properties-theming

User · Answer

At the time of writing  here s the best pure CSS implementation for color manipulation I found   Use CSS variables to define your colors in HSL instead of HEX RGB format  then use calc   to manipulate them   Here s a basic example    x000D   x000D   root   x000D    --link-color-h  211  x000D    --link-color-s  100   x000D    --link-color-l  50   x000D    --link-color-hsl  var --link-color-h   var --link-color-s   var --link-color-l   x000D   x000D    --link-color  hsl var --link-color-hsl    x000D    --link-color-10  hsla var --link-color-hsl    1   x000D    --link-color-20  hsla var --link-color-hsl    2   x000D    --link-color-30  hsla var --link-color-hsl    3   x000D    --link-color-40  hsla var --link-color-hsl    4   x000D    --link-color-50  hsla var --link-color-hsl    5   x000D    --link-color-60  hsla var --link-color-hsl    6   x000D    --link-color-70  hsla var --link-color-hsl    7   x000D    --link-color-80  hsla var --link-color-hsl    8   x000D    --link-color-90  hsla var --link-color-hsl    9   x000D   x000D    --link-color-warm  hsl calc var --link-color-h    80   var --link-color-s   var --link-color-l    x000D    --link-color-cold  hsl calc var --link-color-h  - 80   var --link-color-s   var --link-color-l    x000D   x000D    --link-color-low  hsl var --link-color-h   calc var --link-color-s    2   var --link-color-l    x000D    --link-color-lowest  hsl var --link-color-h   calc var --link-color-s    4   var --link-color-l    x000D   x000D    --link-color-light  hsl var --link-color-h   var --link-color-s   calc var --link-color-l     9    x000D    --link-color-dark  hsl var --link-color-h   var --link-color-s   calc var --link-color-l     9    x000D    x000D   x000D   flex   x000D    display  flex  x000D    x000D   x000D   flex  gt  div   x000D    flex  1  x000D    height  calc 100vw   10   x000D    x000D   lt h3 gt Color Manipulation  alpha  lt  h3 gt  x000D   x000D   lt div class  flex  gt  x000D     lt div style  background-color  var --link-color-10   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-20   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-30   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-40   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-50   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-60   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-70   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-80   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-90   gt  lt  div gt  x000D     lt div style  background-color  var --link-color   gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt h3 gt Color Manipulation  Hue  lt  h3 gt  x000D   x000D   lt div class  flex  gt  x000D     lt div style  background-color  var --link-color-warm   gt  lt  div gt  x000D     lt div style  background-color  var --link-color   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-cold   gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt h3 gt Color Manipulation  Saturation  lt  h3 gt  x000D   x000D   lt div class  flex  gt  x000D     lt div style  background-color  var --link-color   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-low   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-lowest   gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt h3 gt Color Manipulation  Lightness  lt  h3 gt  x000D   x000D   lt div class  flex  gt  x000D     lt div style  background-color  var --link-color-light   gt  lt  div gt  x000D     lt div style  background-color  var --link-color   gt  lt  div gt  x000D     lt div style  background-color  var --link-color-dark   gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    I also created a CSS framework  still in early stage  to provide basic CSS variables support called root-variables

User · Answer

You can do this with CSS filters in all modern browsers (see the caniuse compatibility table).

_x000D_

.button {_x000D_
  color: #ff0000;_x000D_
}_x000D_
_x000D_
/* note: 100% is baseline so 85% is slightly darker, _x000D_
   20% would be significantly darker */_x000D_
.button:hover {_x000D_
  filter: brightness(85%);_x000D_
}

_x000D_

<button class="button">Foo lorem ipsum</button>

_x000D_

Here's more reading from CSS Tricks about the various filters you can use: https://css-tricks.com/almanac/properties/f/filter/

User · Answer

I am adding an answer using raw CSS3 and SVG without requiring LESS or SASS.

Basically, if the question is to make a colour 10%,25%,50% ligher or darker for the sakes of a global hover effect you can create an SVG data call like this

:root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;

}

.myButton{
    color: white;
    background-color:blue;
}
.myButton:hover{
    background-image: var(--lighten-bg);
}

For some reason, unknown to me, the SVG won't allow me to enter a hex value in the "fill" attribute but "white" and "black" satisfy my need.

Food for thought: If you didn't mind using images, just use a 50% transparent PNG as the background image. If you wanted to be fancy, call a PHP script as the background image and pass it the HEX and OPACITY values and let it spit out the SVG code above.

User · Answer

I found a PHP class that let me do this server side. I just output an inline CSS color style for whatever I need to be lighter/darker. Works great.

http://www.barelyfitz.com/projects/csscolor/

_{(note that the class uses PEAR for throwing errors, but I didn't want to include PEAR just to modify colors, so I just removed all the PEAR references)}

I turned it into a static class with static methods so I can call "lighten" & "darken" functions directly without creating a new object.

Sample usage:

$original_color = 'E58D8D';  
$lighter_color = Css::lighten($original_color, .7);  
$darker_color = Css::darken($original_color, .7);

User · Answer

If you want darker color  you can use rgba black with low opacity   rgba 0 0 0 0 3    For lighter use white   rgba 255 255 255 0 3

User · Answer

In LESS  you would use the following variables    primary-color   999   primary-color-lighter  lighten  primary-color  20      This would take the 1st variable and  lighten it by 20   or any other percentage   In this example  you d end up with your lighter color being   ccc

User · Answer

You could use a little javascript to calculate the darker and lighter color using the rgb().

Fiddle : Not really nice, but it is just for illustration.

What it essentially does is sets a color and selects 20 colors with the same amount (compared to one another) of rgb only with 10 apart.

for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
 var r = 91;
 var g = 192;
 var b = 222;
 $('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+   (i*10))      );
};

User · Answer

Use the filter pure CSS property  for a complete description of the filter property functions read this awesome article   I had a same issue like yours  and I fixed it by using the brightness function of filter property    my-class     background-color   18d176    filter  brightness 90

User · Answer

See my comment on Ctford s reply   I d think the easy way to lighten a color would be to take each of the RGB components  add to 0xff and divide by 2  If that doesn t give the exact results you want  take 0xff minus the current value times some constant and then add back to the current value  For example if you want to shift 1 3 of the way toward white  take  0xff - current  3 current   You d have to play with it to see what results you got  I would worry that with this simple a formula  a factor big enough to make dark colors fade nicely might make light colors turn completely white  while a factor small enough to make light colors only lighten a little might make dark colors not lighten enough   Still  I think going by a fraction of the distance to white is more promising than a fixed number of steps

User · Answer

Not directly  no  But you could use a site  such as colorschemedesigner com  that will give you your base color and then give you the hex and rgb codes for different ranges of your base color   Once I find my color schemes for my site  I put the hex codes for the colors and name them inside a comment section at the top of my stylesheet   Some other color scheme generators include    http   www colorschemer com online html http   colorschemegenerator com  http   www cssjuice com 25-popular-color-scheme-and-palette-generators

User · Answer

You could use RGBa   a  being alpha transparency   but it s not widely supported yet  It will be  though  so you could use it now and add a fallback   a link        color  rgb 0 0 255          a link lighter       color  rgb 128 128 255      This gets applied only in browsers that don t apply the rgba line          a link lighter      This comes after the previous line  so has priority in supporting browsers        color  rgba 0 0 255 0 5      last value is transparency

User · Answer

One outdated simple answer  in 2013  was to use a 50  transparent white PNG over the color   div       background-color red     div hover       background-image url  lighten png        Where lighten png is a PNG of a white fill with 50  transparency   There s much better ways to do this today  I hope people stop commenting now

User · Answer

Try   a     color  hsl 240  100   50       a hover     color  hsl 240  100   70

User · Answer

Bringing it all together  a table solution done purely with DIV and CSS  try it    The browser should support RGBA colors though       lt head gt   lt style gt       colored-div-table           display  table          table-layout  fixed             colored-div-table  col           display  table-column             colored-div-table  col nth-child odd               colored-div-table  col nth-child even               colored-div-table  col nth-child 1           background-color  lightblue          width  50px  important             colored-div-table  col nth-child 2           background-color  lightyellow          width  200px  important             colored-div-table  col nth-child 3           background-color  lightcyan          width  50px  important             colored-div-table  row           display  table-row             colored-div-table  row div           display  table-cell             colored-div-table  row div nth-child 1                colored-div-table  row div nth-child 2               colored-div-table  row div nth-child 3               colored-div-table  row nth-child odd            background-color  rgba 0 0 0 0 1             colored-div-table  row nth-child even           lt  style gt   lt  head gt   lt body gt    lt div id  divtable  class  colored-div-table  gt       lt div id  col  gt  lt  div gt       lt div id  col  gt  lt  div gt       lt div id  col  gt  lt  div gt          lt div id  row  gt           lt div gt First Line lt  div gt  lt div gt FL C2 lt  div gt  lt div gt FL C3 gt  lt  div gt       lt  div gt        lt div id  row  gt           lt div gt Second Line lt  div gt  lt div gt SL C2 lt  div gt  lt div gt SL C3 gt  lt  div gt       lt  div gt        lt div id  row  gt           lt div gt Third Line lt  div gt  lt div gt TL C2 lt  div gt  lt div gt TL C3 gt  lt  div gt       lt  div gt        lt div id  row  gt           lt div gt Forth Line lt  div gt  lt div gt FL C2 lt  div gt  lt div gt FL C3 gt  lt  div gt       lt  div gt       lt div id  row  gt           lt div gt Fifth Line lt  div gt  lt div gt FL C2 lt  div gt  lt div gt FL C3 gt  lt  div gt       lt  div gt       lt div id  row  gt           lt div gt Sixth Line lt  div gt  lt div gt SL C2 lt  div gt  lt div gt SL C3 gt  lt  div gt       lt  div gt       lt div id  row  gt           lt div gt Seventh Line lt  div gt  lt div gt SL C2 lt  div gt  lt div gt SL C3 gt  lt  div gt       lt  div gt       lt div id  row  gt           lt div gt Eight Line lt  div gt  lt div gt EL C2 lt  div gt  lt div gt EL C3 gt  lt  div gt       lt  div gt       lt div id  row  gt           lt div gt Nineth Line lt  div gt  lt div gt NL C2 lt  div gt  lt div gt NL C3 gt  lt  div gt       lt  div gt       lt div id  row  gt           lt div gt Tenth Line lt  div gt  lt div gt TL C2 lt  div gt  lt div gt TL C3 gt  lt  div gt       lt  div gt    lt  div gt   lt  body gt

User · Answer

You can use a JavaScript library such as JXtension which gives the user the ability to make a color lighter or darker   If you would like to find documentation for this brand new library  click here   You can also use JXtension to combine one color with another

User · Answer

I know it s late but  you could use a wrapper to your buttons and change a rgba color function opacity level  as said in other answers but with no explicit example   Here s a pen   https   codepen io aronkof pen WzGmjR   x000D   x000D   wrapper   x000D    width  50vw  x000D    height  50vh  x000D    background-color   AAA  x000D    margin  20px auto  x000D    border-radius  5px  x000D    display  grid  x000D    place-items  center  x000D     x000D   x000D   btn-wrap   x000D    background-color   000  x000D    display  inline-block  x000D    x000D   x000D  button   x000D    transition  all 0 6s linear  x000D    background-color  rgba 0  255  0  1   x000D    border  none  x000D    outline  none  x000D    color   fff  x000D    padding  50px  x000D    font-weight  700  x000D    font-size  2em  x000D    x000D   x000D  button hover   x000D    background-color  rgba 0  255  0   5   x000D    x000D   lt div id  wrapper  gt  x000D     lt div class  btn-wrap  gt  x000D       lt button class  btn  gt HEY  lt  buutton gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

HSL Colors provide an answer   a HSL color value is specified with  hsl hue  0 255   saturation    lightness      HSL is supported in IE9   Firefox  Chrome  Safari  and in Opera 10   a   color hsl 240 65  50      a lighter    color hsl 240 65  75

User · Answer

If you need to brute force it for older browser compatibility  you can use Colllor to automatically select similar color variations   Example  color   a9dbb4

[css] Dynamically change color to lighter or darker by percentage CSS (Javascript)

The answer is

Examples related to css

Tags