dynamically change color to lighter or darker by percentage CSS (javascript)

Question

we have big application on the site and we have few links, which are lets 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 let user decide what colors they want for there customized profile/site (like twitter). so my question is, can we reduce the color by percentage?

lets say following is css code

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 redcuing it
}

so is there a way to reduce a color by percentage?

Answer 1

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?

Answer 2

For css named color 'blue', there is 'lightblue'

For 'green', there is 'lightgreen'

For 'grey', there is 'lightgrey'

For 'yellow', there is 'lightyellow'

Try browsing this css named color list for more: http://www.w3schools.com/CSS/css_colornames.asp

Answer 3

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:

1. 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.
2. Break up the colour into its red, green and blue components
3. Increment each of the three components by a set amount. Experiment with this to get the results you are after.
4. Generate CSS incorporating the new colour

Links to this CSS-generating page would look something like:

<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)

Answer 4

The answer to your question is no.

Answer 5

Not directly, no. But you could use a site that will give you your base color and then give you the hex and rgb codes for different ranges of your base color, like:

http://colorschemedesigner.com/

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.

Here's a regularly updated link of other color scheme generators:

Answer 6

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.

Answer 7

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 */
    }

Answer 8

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.

Answer 9

If you're using a stack which lets you use SASS, you can do something like this:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}