HEX color code short tuts

	HEX color code - short tuts
	Discussion by r3d with 12 Replies. Last Update: September 10, 2006, 10:00 am

r3d

Short tuts for html hex color code

hex code 00 - ff
count as 0-1-2-...-9-A-B-C-D-E-F no #10 coz it count as 16 in decimal, A represent 10 and B is 11, F is 15 and 10 is 16. how? F is 15 and G is supposed to be 16 but G and above is not a valid hex code so they made it 10( not ten but one-zero)

actually it have mathematical computation for that and i will not explain it

color code in hex must be in six(6) digits 123456
the first two(2) digit is red (the 12)
the third and fourth is green (34)
and the last is in blue(56)
these are the three main colors in color wheel. and you can mix these color to produce another color.
and in two digit hex 00 is the lowest(least), FF is the highest(more)

how it works? just like a color mixing w/ three colors in paint brush except it show an inverse color when these three color are mix together with a great amount. in paint brush when you mix red-green-blue the output is black but in html hex color it is white(FFFFFF) confuse?
back in hex color, 000000 is black and FFFFFF is white, in html black represents no color means red is zero(00), green is zero(00), and blue is zero(00) in hex 00000 and white represents that all color exist, more red(FF), more green(FF) and more blue(FF) in hex FFFFFF.

how about other colors?
it just like these, put more red color (FF) no green (00) and no blue(00) in hex FF0000. imagine a canvas that you paint with only red what color that you expect? of course red

, what if you add a some green(32) and some blue(03) in hex FF3203 hopefully it is still red since you just add a little of other color. what if you add more, in hex FFACBE (red is FF, green is AC, and blue is BE) REMEMBER that if you add or combine a great amount of all three color it will produce a white or lighter color. what if you decreased the amount of red in half 880000? decreasing the amount of color will show a darker one.

more color?
back in white(FFFFFF) and black(000000) and what is middle color of it?
yes it's gray

and the half of F(it count as 16 including 0) is 8 and the half of white(FFFFFF), 888888 is gray.
From the previous one FF0000 is red, 00FF00 is green and 0000FF is blue,
Mixing red and green will output yellow (FFFF00) red –FF, green FF, and no blue -00
Green and blue will produce cyan, (00FFFF) no red – 00, green FF, and blue FF
And the combination of red and blue is magenta, (FF00FF), red FF, no green 00, and blue FF.

How to produce more color?
experiments

see also this post http://www.astahost.com/index.php?showtopic=254 from Darren it have the list of standard color for web that even the older pc can view expect B/W monitor

but with this short tuts you can create or recreate any colors that you want, I hope

Thu Sep 9, 2004 Reply New Discussion

Eric Straven

Well done :S......These things are a bit complicated, so I almost never bother with these...I might try to understand it later. But other than HTML(of which I can also just put "red" or "white" to produce that color), what modern practical use does it have??? Please I'm just curious...

Thu Sep 9, 2004 Reply New Discussion

overture

Well it can allow you to choose from a greater range of colours, rather than just using 'red' 'white'...

Also just a little note here, when using hex colours in CSS to define a text or background colour or something you can just use something like this:

CODE

body {
background-color: #ccc;
}

as you can see there are only 3 letters for the colour and hex has to be 6, what it does it will carry on and put another 3 'c's. this only works however for all hex numbers that are the same like 'eeeeee' or 'cccccc' or '000000' and so on. just thought it was interesting.

Thu Sep 9, 2004 Reply New Discussion

zarjay

QUOTE (overture)

CODE

body {
background-color: #ccc;
}

[post="959"]<{POST_SNAPBACK}>[/post]

It works for other combinations as well, but the hex code must be paired. Here's an example:

CODE

Now, that was the short way. This is what it really means:

CODE

So, just as long as your intention is to have a color with paired hex values, it will work. This is much safer than having hex values such as #45dafc anyway.

Sat Sep 11, 2004 Reply New Discussion

KyoNiwa

By safer... does that mean that it will be easier for the computer to register what color it makes? In your css... does the div{color:#eee;} make all the div's that color or just a specified div? Is so would it be something like div-left:#xxxxxx; if you wanted a specific div a specific color? (if you have a left colum that is)

Sat Sep 18, 2004 Reply New Discussion

r3d

you can also set css colors using rgb colors
like this rgb(255,10,20) valid value from 0 to 255

example:

CODE

#head {
background-color: rgb(255,0,0); /* in words red in hex #ff0000 or #f00 */
....
}

*hidden tricks you can also set the rgb value in percentage

CODE

#footer {
background-color: rgb(50%,50%,50%); /* grayish color */
...
}

it use for some reasons, main reason for percentage coz of different gamma settings of different pc. css geeks said its a clever way

Fri Oct 1, 2004 Reply New Discussion

Cloak

Just a note on how hexadecimal color codes are actually made up. This was sort of touched on in r3d's tutorial, but this goes a little deeper.

As some of you may know, all colors displayed on a computer monitor are made up of different combinations of red, green, and blue (the RGB cube). The smallest amount of color is 0; the highest is 255.

A hexadecimal (hex) color code is the values of RGB converted into hex - The first two characters are hex for the decimal value of red, the next two are for green, and the final two are for blue.

For example, let's look at orange, which has the hex color code of FFAA00. It is made up of 255 parts red, 170 parts green, and 0 parts blue.

R|G|B
255|170|0
FF|AA|00

Anyway, well done, r3d.

Sun Oct 10, 2004 Reply New Discussion

Spog

http://www.kenjikojima.com/java/RGBHexConverter2.html

see this site for RGB // HEX converter. this way, you can get into your favourite photo editor, get the exact color you need, and there ya go. gives you a great preview too !

Sun Mar 13, 2005 Reply New Discussion

SingleDaddyof2

What I would like to know is, how does one convert hex color codes to HSV (Hue, Saturation, value/brightness/intensity)?

Mon Mar 14, 2005 Reply New Discussion

chiiyo

By the way, if it wasn't clear enough, the reason why CSS allows you to type in 3 characters instead of 6, and therefore assume that the hex color code you're using has paired characters, is because on the whole, paired character hex color codes are also web-safe colour codes, which means that most systems and most browser should be able to render that colour properly.

Since CSS is a good way of standardising layout, it's quite reasonable that they expect the people who use CSS to also use web-safe colours.

Tue Mar 15, 2005 Reply New Discussion

Arena

oh thanks. that confused me for a while. When I had used RGB, I somehow that a 49 in R means that the hex starts w/ a 49. Then I got really confused w/ the numbers over 100. finally I gave up and used online hex rgb converter LOL. Then I realized on css I can just used rgb(#,#,#) xDDDDDDD yea that solved my problem but this is cool too =D

Sat Sep 9, 2006 Reply New Discussion

Arbitrary

RGB might be quite a bit easier for some. Personally I think RGB is easier, since it's easy to figure out how much to specify for each color rather than to convert things into hex. I sometimes use online hex converters, but most of the time I prefer to test with Adobe Photoshop Elements. Photoshop has a nice color to hexadecimal converter, and it's a lot easier to have the palette/code right next to your layout--comparing colors becomes a cinch. No more clicking back and forth between Firefox tabs to compare colors. XD

Tutorial's quite nice, but I wouldn't spend any time remembering hex codes. It's much easier to depend on an already-made program or something of the sort to do that busybody work for you. Then you can spend more time on the "important" things like layout and coding. :}

Sat Sep 9, 2006 Reply New Discussion

Chesso

If you want to create colour schemes and such for your websites then I know a great place that will help greatly with it (I have used it on many occasions myself).

http://www.colorschemer.com/online.html

Shows you the actual colours. It also allows you to lighten or darken the current colour by a certain degree or select some similar or otherwise colours from the right section.

It also lets you set or get the RGB or HEX values, very usefull while building up your website and want to colour scheme it and especially usefull if you want to use lighter/darker tones of a specific colour to get a bit of a gradient look.

Sun Sep 10, 2006 Reply New Discussion