Change color intensity with jQuery?

N

Nikita Sklyuev2012-03-12 08:56:52

JavaScript

Nikita Sklyuev, 2012-03-12 08:56:52

Hello dear Habrahumans.

Yesterday, a friend asked me to make it so that with the help of a slider on the site it would be possible to change the color intensity in the block.

Dragging the slider is not a problem, but I'm stuck with the intensity.

Can you tell me how to change the color intensity using JS?

It is advisable to do without plugins!

I just haven't come across this before.

Thanks in advance!

Reply

Answer the question

In order to leave comments, you need to log in

5 answer(s)

M

Mikhail Krainov, 2012-03-12
@medved13

CSS3 has HSL color notation . To decrease the intensity, you need to decrease the saturation (saturation). For IE less than 8, you can write color in RGB, converting it from HSLa with javascript .

T

TrueDrago, 2012-03-12
@TrueDrago

The easiest option is to change the css property "opacity", like this:

$('#element').animate({opacity: "0.5"}, 500);

M

max_rip, 2012-03-12
@max_rip

Well, for full compatibility, you can use the HSL2RGB converter www.codingforums.com/showpost.php?p=54172&postcount=2

N

Nikita Sklyuev, 2012-03-12
@trilodi

Compatibility is optional, this is for modern mobile browsers"!

V

Vitaly Peretyatko, 2012-03-12
@viperet

code.google.com/p/flot/source/browse/trunk/jquery.colorhelpers.js
Used in particular in flot.
It works approximately like this,
$.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
it allows you to conveniently work with color, changing the values of the channels together or separately, to an absolute or relative value.