jQuery and colour calculation

Question

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

I think we should do these type of stuff using backend processing or flash/flex, — kobe, Nov 22 '10 at 02:02
Hi Giv, I completely agree - Unfortunately, though, that's a luxury I can ill afford seeing as it's a mod on a tumblr theme where all assets needs to be hosted on the tumblr server. — Tiny Giant Studios, Nov 22 '10 at 12:04

Yi Jiang · Accepted Answer · 2010-11-23T09:12:19.447

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/

Wooohoooooo! Works awesomely! I'm using it on a new tumblr theme I'm developing -- thank you very, very much Yi: You've saved my hairline... — Tiny Giant Studios, Nov 22 '10 at 12:13
If it's not a shade of gray, the original color will have a different hue than the new color. The correct way to do this is to use HSL and reduce the lightness, while keeping saturation and hue constant. Since you're already using jQuery Color, it is worth mentioning that it has bidirectional HSL-RGB conversation. — dbkaplun, Sep 07 '12 at 01:43

score 1 · Answer 2 · answered Apr 20 '11 at 09:58

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.

Hi Keeff - indeed, hsla/rgba is the easiest and best solutions. Unfortunately tumblr doesn't allow parsing of either these two: which is why I had to work with RGB and do my calculations on that. Thanks for the answer though :) — Tiny Giant Studios, Apr 21 '11 at 10:23

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

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?

edited May 23 '17 at 10:33

Community

1
1

answered Nov 22 '10 at 02:13

Aishwar

9,284
10
59
80

Thank you Aishwar, that solution would certainly work, however I found Yi's answer to work perfectly without having to convert colours. Nonetheless, thank you very much for taking a look - I really appreciate it :) – Tiny Giant Studios Nov 22 '10 at 12:15

jQuery and colour calculation

3 Answers3

Linked