JQuery and color calculation

Question

I currently have an H1 tag set to color # 8c0000 (dark red).

Using jQuery, I would like to get the color H1, and then do a calculation based on the color h1 to determine what would be the hexadecimal value of the new color if I wanted some shades to be darker.

The reason for this is that I want to use the new CSS3 text-shadow property to create an emboss effect by creating an inset shadow shadow.

To get the color of the H1 elements, I believe it can be done using:

('H1').css('color');

But what should I do with this value to calculate a darker shade?

PS - the view when the color H1 will be set dynamically, I can’t just hardcode the shadow of the fixed text, so I need a calculation ...

Any help would be greatly appreciated. Thank you in advance

Answer 1

The easiest way (without converting color spaces) would be to simply analyze the result $('h1').css('color')and minus a certain amount from each of R, G and B. The main problem is that jQuery does not normalize the value back here, so we have to figure it out a bit.

getRGB() jQuery Color Plugin , , RGB, . (, , )

: , , , rgb:

$('h1').css('text-shadow', function(){
    var rgb = getRGB($(this).css('color'));

    for(var i = 0; i < rgb.length; i++){
        rgb[i] = Math.max(0, rgb[i] - 40);
    }

    var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
    return '0 3px 3px ' + newColor;
});

: http://jsfiddle.net/yijiang/pxqkH/4/

Answer 2

rgba hsla . , , , , CSS, ( ).

, , . , , :

var $h1 = $('h1');

$h1.css('text-shadow', function() {
    return 'rgba(0,0,0,0.7) 0 -1px, '+$h1.css('color')+' 0 -1px';
});

.

. , (, CSS R L), , , .

Answer 3

- RGB, HSV - V, RGB .

HSV is another color space where H represents hue (color), S represents saturation (saturation), and V represents values ​​(luminance). For a darker shade, decrease V. After decreasing the value of V, convert it back to RGB. Then set this as the new color value.

Here is a page describing how to do RGB to HSV conversion: Why doesn't this Javascript RGB for HSL code work?