0

I have created a color swatches and a slider for controlling the darkness & lightness of color. I want to change the color lightness according to the slider value. What i tried :

$("#darklight").slider({
        range: "min",
        value: 0,
        min: -0.5,
        max: 0.5,
        step: 0.1,
        slide: function (event, ui) {
            $("#swatches").children("div").each(function (i, v) {
                var color = $(v).attr("title");
                var rgb = HEXtoRGB(color);
                var hsl = rgbToHsl(rgb[0], rgb[1], rgb[2]);
                hsl[2] += ui.value; //what formula should i use here to change the lightness of color ?
                rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
                color = RGBtoHEX("rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")");
                $(v).attr("title", color).css("backgroundColor", color);
            });
        }
    });

Here i am converting color to hsl and trying to manipulate the l value, but not getting the correct formula to manipulate. Can anyone please help me out ?

Gaurav
  • 8,367
  • 14
  • 55
  • 90
  • Can you define lightness? You mean `opacity` or `alpha`? – Ron van der Heijden Dec 13 '12 at 11:23
  • alpha and opacity are the same. It sounds like you mean the `L` component? – Alnitak Dec 13 '12 at 11:44
  • @Alnitak WHUT?!?! alpha and opacity are NOT the same dude. `When we apply an opacity value to an element, the opacity value is inherited by all its child elements. Suppose if we apply opacity value to a DIV (div { opacity: 0.5; } ), the text, images and all other elements inside that particular DIV will inherit the opacity value and they will become transparent in-turn. On the other hand RGBa sets the opacity of the color value of that particular element and the transparency is not inherited by its child elements. In other words, RGBA sets the opacity value only for a single declaration.` – Ron van der Heijden Dec 13 '12 at 11:48
  • @Bondye opacity is the opposite of _transparency_. Most RGBA systems (including the one you linked to) treat the Alpha channel as _opacity_. i.e. 255 (or 1.0 for floating point alpha channels) represent "fully opaque" (i.e. not transparent). That's independent of its use in CSS and the difference between in inherited and non-inherited opacity. – Alnitak Dec 13 '12 at 11:50
  • See this http://stackoverflow.com/questions/5833624/increase-css-brightness-color-on-click-with-jquery-javascript – palaѕн Dec 13 '12 at 11:50
  • @Alnitak Please read again........ – Ron van der Heijden Dec 13 '12 at 11:51
  • @Bondye you first... the semantic differences that the DOM has for `rgba` vs `opacity` are irrelevant for the OP's purposes. – Alnitak Dec 13 '12 at 11:53

1 Answers1

0

You are modifying the L property of an HSL colour - that's correct.

The error is in the range of L. It should have a nominal value of 0.5, with a range of 0 to 1.0.

Hence your slider value to be added to L should run from -1 to +1, but you need to clamp the resulting value in the range 0 .. 1, e.g:

hsl[2] += ui.value;
hsl[2] = Math.min(hsl[2], 1);
hsl[2] = Math.max(hsl[2], 0);
Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • can u please give me an idea how should i clamp the value ? – Gaurav Dec 13 '12 at 12:11
  • thanks alnitak but i just tried your logic but not working at all – Gaurav Dec 13 '12 at 12:17
  • it should work - please try to create a test case (i.e. jsfiddle.net) demonstrating how it doesn't work. – Alnitak Dec 13 '12 at 12:18
  • you need to not change the title attribute each time, otherwise you just end up making the colours too dark or too light, and can't get back to where you started. Also, I don't recognise the formulae you're using for RGBtoHSL and vice versa. – Alnitak Dec 13 '12 at 12:48