PDA

View Full Version : Is there a mathematical difference between color hex codes?

DR.Wong
10-12-2011, 01:17 PM
Hey everyone,

I'm interested in color hex codes used in HTML.

Is there a mathematical difference between hex codes?

Lets say I have a dark shade of blue : #0000FF and I want to apply a lighter shade of blue elsewhere on my web page : #0099FF.

Is there a calculable difference between the two?

What if I started with a dark shade of red : #FF0000 and I wanted to find a lighter variant of red that will match similarly to how the two blues matched above?

Is it possible to find a match mathematically by finding the difference between the two blues and then applying it to the red #FF0000?

VIPStephan
10-12-2011, 08:30 PM
Well, if you want mathematic precision I suppose you’d be better off with CSS’s RGB (http://www.w3.org/TR/css3-color/#rgb-color) color values, or if you just have to care about the most recent browser releases then the CSS 3 HSL (http://www.w3.org/TR/css3-color/#hsl-color) (hue, saturation, lightness) color values might be the most interesting for different tones of a color.

morongo47
10-19-2011, 05:56 AM
You might be able to treat it as a ratio.

You are actually adding 'intensities' of light together here, so allowing one color to dominate while raising the intensity of one or both of the remaining colors will have the effect of 'lightening' the dominant color.

And just to mention, FF (255 dec) is not the 'darkest' range of a color, it's the 'lightest', the more light you add (by dialing in higher additional color values), the lighter the dominant color gets, too.

Try this:
Set a dominant color (R,G or B at FF), now to lighten it, raise the two remaining colors (keeping them both at equal values) through any range of intensities.

Examp: FF0000, FFoaoa, FFbbbb, etc.

You have 255 intensities you can access, so 255 shades of any color you choose to dominate the intensity registers.

That means you can also mix in another color and simply raise or lower it's value to arrive at a lighter or darker shade:

fabcde would raise to fbbbdf and then to fcbce0, etc.

Once you have a color, just raise or lower each of it's red green and blue components the -same- amount to change its shade without changing the actual hue.

When any one of the R,G or B components hits FF, that's the limit you can lighten it and still maintain the same hue. When any one of those components hits 00, that's the darkest you can take it and still maintain the same hue.

From your OP, I think that's what you're after, calculating similar shades for different colors - if you set a base value for one color and lighten or darken it a certain amount, you can lighten or darken any other color the exact same amount by keeping track of the amount you changed the baseline color - it's just 255 values for each color component, so you should be able to come up with an algo to handle the amount of change you need for a shade-match using this info.

morongo47
10-19-2011, 05:56 PM
Here's something that illustrates what I posted above. Notice that as you move the slider, the dominant color remains fixed while the other two colors either increase or decrease in value.

This illustrates how intensity affects the shades of colors while maintaining the hue.

Watch the hex or decimal values of each color as you move the slider.

PS style color picker:
http://johndyer.name/lab/colorpicker/

Cjwinnit
10-20-2011, 05:30 PM
Is there a mathematical difference between hex codes?

Yes.

Lets say I have a dark shade of blue : #0000FF and I want to apply a lighter shade of blue elsewhere on my web page : #0099FF.

To go from **00** to **99** you get your original string and add 99 x (16 squared) to it.

(i.e. 25,342 - which in hex is 9900.)

Same with red.

it's like if you wanted to go from 120,000 to 129,900 (as base 10 numbers) you would add (99 x (10 squared)) to it.

morongo47
10-20-2011, 06:45 PM
To go from **00** to **99** you get your original string and add 99 x (16 squared) to it.

This would be correct methodology if we were dealing with a single hex value (or a single value of any radix, for that matter), however, we're dealing with a 3-byte 'triplet', a 24-bit value that acts as a control for three discrete intensities (these need not be hex, btw, values are values, regardless).

In a program (such as a browser), the values are bitwise-ORed together, shifted appropriately for a little-endian system (if Windows) and passed as a full 32-bit value.

To mathematically (if not subjectively) match a 'shade' (as opposed to a color), one would need to ascertain whether there is a 'dominant' color and calculate the 'intensity' of the adjacent colors, then apply the same intensity to the adjacent values of a different color while maintaining their relationships to one another.

There is also the matter of 'weighting' to consider when attempting this: not all colors are perceived as having the same 'brightness' to our eyes (along the lines of hearing being a logarithmic process), therefore, a naively imposed linear increase or decrease in intensities may not have the desired visual effect, depending on the color we modify.

You should also realize that you are dealing with monitor-gamma if you're attempting an accurate luminance match, so you'd also have to apply inverse gamma to get into a linear color space, modify your color, then return that value to the gamma-weighted monitor environment.

I'm fairly certain you didn't want to get into all that, but thought I'd pass it along just to emphasize that there's more to it than just dialing values up or down.

But, yes, you can do this mathematically,,,just understand the concept first, the math itself is just nuts and bolts, not difficult.
.