CODEWITHSUNDEEP
jquerycolorscss
Tiny Giant Studios
Tiny Giant Studios

Reputation: 1145

jQuery and colour calculation

Currently I've got an H1 tag set to a colour of #8c0000 (a deep red).

Using jQuery, I would like to get the colour of the H1 and then do a calculation based on the h1's colour to determine what the hex value of a new colour would be if I wanted it several shades darker.

The reason for this is that I want to use CSS3's new text-shadow property to create an "embossed" effect by creating an "inset" text shadow.

To get the H1 elements colour, I believe, can be done by using:

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

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

PS - seeing as the H1 color will be set dynamically, I can't just hardcode in a fixed text shadow, which is why I need the calculation...

Any help would be GREATLY appreciated. Thank you in advance

Upvotes: 3

Views: 5091

Answers (3)

epok.tech
epok.tech

Reputation: 11

You can simply use an rgba or hsla value with reduced alpha as the shadow. Parsing the existing colour is probably overkill, considering there are already standard CSS properties which allow for a semi-transparent overlay (which can be your shadow).

Set the text-shadow to the colour of the text itself, and another text-shadow with a semi-transparent, darker colour over it, both slightly above the original text. The semi-transparent shadow will lay over the cloned colour, creating the effect you're after:

var $h1 = $('h1');

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

Live fiddle here.

Note: I don't know why the overlay shadow needs to be declared first (maybe to do with CSS reading R to L), but that seems to be the case.

Upvotes: 1

Yi Jiang
Yi Jiang

Reputation: 50095

The simplest method (without converting between color spaces) would be to simply parse the result of $('h1').css('color') and minus off a certain amount off each of R, G and B. The main problem is that jQuery does not normalize the value returned here, so we will have to do a bit of parsing ourselves.

Grabbing the getRGB() function from the jQuery Color Plugin, and stripping out the first and last sanity check to save space, we can now obtain the RGB value needed to do this. (You might want to keep the last check and the large array of named colors if you're working with those)

The rest of the task is trivial - simply construct the new color by minusing off a certain amount off each individual color value, then joining them back together again to form a valid rgb value: 

$('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;
});

See a simple demo here: http://jsfiddle.net/yijiang/pxqkH/4/

Upvotes: 8

Aishwar
Aishwar

Reputation: 9714

One way to do this would be to get the RGB color value, convert it to HSV - reduce the V value, convert it back to RGB and then use that value.

HSV is a different color space, where the H value represents the Hue (the color), the S represents the Saturation (the richness) and V represents the values (the brightness). For a darker shade, reduce V. After reducing the V value, 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 to HSL code work?

Upvotes: 0

Related Questions