Hex web colours

Hi I am displaying a colour as a hex value in php . Is it possible to vary the shade of colour by subtracting a number from the hex value ? What I want to do it display vivid web safe colour but if selected I want to dull or lighten the colour. I know I can just use two shades of colour but I could hundred of potential co开发者_StackOverflow社区lours .

to be clear #66cc00 is bright green and #99ffcc is a very pale green . What do i subtract to get the second colour ? is there any formula because I just can get it .

Thanks for any help

Cheers

Hex colors are made up of 6 hexadecimal digits. The first two digits are for the red shade, the second two are for the green, and the last two are for the blue. Within the shades, 00 is the absence of color and FF is the highest value for the color. So, #FF0000 would be bright red with no green or blue, and #00CCFF would be very blue and a little green with no red at all.

The example colors you give actually have a different makeup of red, green, and blue. #66CC00 is mostly green with some red while #99FFCC is mostly green with some blue and red.

You should break your colors into their red, green, and blue components before converting them to decimal, average the two, and then convert back:

#66 CC 00 -> 102 204 0

#99 FF CC -> 153 255 204

Average between the two: 128 230 102: #80E666

After finding the in-between color, you can approximate the closest web safe color: #99FF66

A converter between hexadecimal and decimal to do this yourself can be found here.

Here is a PHP script that does what you need. Here is a JavaScript script based off of the method described above (related hex to decimal conversion in JS):

color1 = "#66CC00";
color2 = "#99FFCC";

r1 = parseInt(color1.substring(1,3), 16);
g1 = parseInt(color1.substring(3,5), 16);
b1 = parseInt(color1.substring(5,7), 16);
r2 = parseInt(color2.substring(1,3), 16);
g2 = parseInt(color2.substring(3,5), 16);
b2 = parseInt(color2.substring(5,7), 16);

r3 = (Math.round((r1 + r2)/2)).toString(16);
g3 = (Math.round((g1 + g2)/2)).toString(16);
b3 = (Math.round((b1 + b2)/2)).toString(16);

color3 = "#" + r3 + g3 + b3;

To explain this further:

Take #FFFFFF, completely white.

It actually consists of 3 separate color values Red Green and Blue.

FF (255, full red), FF (255, full green), FF (255, full blue)

If you wanted a full red color you would instead use #FF0000 (255, 0, 0)

Color values goes from 0 to 255 and you combine colorvalues to get the final color.

It really helps to understand what is going on with the colors, but if you're merely interested in shading a color, here's what I found on php.net. Haven't tried it (yet) tough, hope it suits your needs.

This is called hexadecimal base:

1 2 3 4 5 6 7 8 9 A B C D E F

"E" in hexadecimal (16) base is "14" in decimal (10) base

66cc00(16) == 6736896(10)

99ffcc(16) == 10092492(10)

Web colours are specified by their red, green and blue values. Each component being a value from 00 (0) to FF (255). The more of a component there is the brighter that component will appear. If all three components are the same you get shades of grey from black (#000000) to white (#ffffff).

So in your first example there's some red and a lot of green. In your second there's more of every colour which makes the whole colour lighter. Green is still the main component though which is why it's a pale colour.

To change from one colour to another you need to vary the values of each component, but it's not always as simple as subtracting one value from another.

What are you trying to achieve to get from your first to your second colour?

Web colors are in RGB. To affect the saturation and value of the color without affecting the hue, you must convert to HSV color space.

RGB to HSV in PHP

Once you have HSV, change the V component to make a color darker or lighter and change the S component to make the color more or less saturated or pale. After tweaking the S and V convert back to RGB. To make the colors web safe, round each RGB channel to a multiple of 51 or 0x33.