Jump to content
xisto Community
r3d1405241470

HEX color code short tuts

Recommended Posts

Short tuts for html hex color code :P

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) :P actually it have mathematical computation for that and i will not explain it :P

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. :P

more color?
back in white(FFFFFF) and black(000000) and what is middle color of it?
yes it's gray :P 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 :P
see also this post http://forums.xisto.com/topic/79732-topic/?findpost=1064273354 from Darren it have the list of standard color for web that even the older pc can view expect B/W monitor :P but with this short tuts you can create or recreate any colors that you want, I hope :)

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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:

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. :)

Share this post


Link to post
Share on other sites

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:

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. :)

<{POST_SNAPBACK}>


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

<style type="text/css">body { background:#abc;}div {color:#eee;}p {color:#44d;}</style>

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

<style type="text/css">body {background:#aabbcc;}div {color:#eeeeee;}p {color:#4444dd;}</style>

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.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

#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
#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 :)

Share this post


Link to post
Share on other sites

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|B255|170|0FF|AA|00Anyway, well done, r3d.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. XDTutorial'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. :}

Edited by Arbitrary (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.