Rectangle 27 0

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

this might help alot, if its supported in major browsers.

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

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.

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

You can now kind of do this with CSS filters. Support is iffy cross browsers but as the spec continues to get implemented and cleaned up, this is going to be really handy.

.button {
   color: #ff0000;
}

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

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

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?

no, not opacity, but add white i guess

@Basit "I guess"? You should know. But in any case, if your background is white, you can "fake" brightness by making it more transparent - I've used this to good effect recently.

The "opacity" trick also work if the background is black (opacity 0.5 makes the color darker on black background).

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

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.

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

It looks like jPaq (http://jpaq.org/) is the replacement for JXtension. The benefit of using jPaq is the fact that you can download only what you need instead of the full JavaScript library. Here is a link to the download page for just the Color class: http://jpaq.org/download/1.0.0.1008.

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

I wrote a plugin for jquery that hadles this same issue. I take the color as a property, or the set color of the css property they want, and run it through some calculations. Hex to RGB, then multiply offset percent, then return a new value. Let me know if you want an example.

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

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
<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">

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)

Interesting suggestion. Would there be a risk of colours flickering as the page loaded if you used JS?

I've used techniques like this -- each user gets his own style sheet -- in conjunction with a preferences page where the user specified color selections. Note you don't have to copy the entire style sheet, and shouldn't. You can have multiple style sheets in a page, so you can have a generic style sheet for the stuff that's the same for everybody and then a custom style sheet for the stuff that's different. In our case we had a default custom style sheet for the (majority of) users who just took the default.

@Pekka can you please paste code here, i dont have expert acount to view the answer.

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

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%);
}

Recently got into a crash course figure it out before yesterday scenario, compass & sass have totally saved my team and made me look like some sort of CSS ninja. Mixen's also have been fairly useful.

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

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%);
}

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

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)
a {
  color: #bb8f8f;
}

a:visited {
  color: #bb8f8f;
}

a:hover {
  color: #a86f6f;
}

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

I know this is a very old question, but one simple answer is 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.

Hopefully this helps other googlers that may find this page.

Actually Andrei, it works fine as a 1x1 pixel png, will fill any size, and it's a couple bytes. File should be cached the first time anyway as it is CSS.

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

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.

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

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

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

I see it is an old thread, just wanted to post this cause i think there is a good javascript solution to this problem. 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 it sets a color and selecting 20 colors with the same amount (compared to one another) of rgb only with 10 appart

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

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

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.

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

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

dynamically change color to lighter or darker by percentage CSS (javas...

css
Rectangle 27 0

a {
  color: hsl(240, 100%, 50%);
}

a:hover {
  color: hsl(240, 100%, 70%);
}

Thanks for your answer - you should note that it is a duplicate of one of the other answers. It is best to check the other answers before replying.

Thank you for that hint. It seems that I've missed the other answer, sorry.

dynamically change color to lighter or darker by percentage CSS (javas...

css