Welcome Guest ( Log In | Register )



2 Pages V   1 2 >  
Reply to this topicStart new topic
> HEX color code, short tuts
r3d
post Sep 9 2004, 03:43 PM
Post #1


death
Group Icon

Group: Members
Posts: 268
Joined: 8-September 04
Member No.: 384



Short tuts for html hex color code biggrin.gif

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) biggrin.gif actually it have mathematical computation for that and i will not explain it tongue.gif

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 huh.gif, 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. biggrin.gif

more color?
back in white(FFFFFF) and black(000000) and what is middle color of it?
yes it's gray biggrin.gif 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 biggrin.gif
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 biggrin.gif but with this short tuts you can create or recreate any colors that you want, I hope unsure.gif
Go to the top of the page
 
+Quote Post
Eric Straven
post Sep 9 2004, 04:16 PM
Post #2


King of Fanelia
Group Icon

Group: [HOSTED]
Posts: 48
Joined: 29-August 04
From: Toronto, Ontario, Canada.
Member No.: 7



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...
Go to the top of the page
 
+Quote Post
overture
post Sep 9 2004, 04:35 PM
Post #3


Premium Member
Group Icon

Group: Members
Posts: 208
Joined: 6-September 04
From: England
Member No.: 315



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. biggrin.gif
Go to the top of the page
 
+Quote Post
zarjay
post Sep 11 2004, 12:23 AM
Post #4


Member [ Level 1 ]
Group Icon

Group: Members
Posts: 48
Joined: 6-September 04
Member No.: 318



QUOTE(overture @ Sep 9 2004, 10:35 AM)
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. biggrin.gif
*



It works for other combinations as well, but the hex code must be paired. Here's an example:
CODE
<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:
CODE
<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.
Go to the top of the page
 
+Quote Post
KyoNiwa
post Sep 18 2004, 07:23 PM
Post #5


Newbie [ Level 2 ]
Group Icon

Group: Members
Posts: 22
Joined: 18-September 04
Member No.: 680



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)
Go to the top of the page
 
+Quote Post
r3d
post Oct 1 2004, 03:40 PM
Post #6


death
Group Icon

Group: Members
Posts: 268
Joined: 8-September 04
Member No.: 384



you can also set css colors using rgb colors
like this rgb(255,10,20) valid value from 0 to 255 smile.gif
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 dry.gif
Go to the top of the page
 
+Quote Post
Cloak
post Oct 10 2004, 07:44 AM
Post #7





Guests






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.
Go to the top of the page
 
+Quote Post
Spog
post Mar 13 2005, 04:05 AM
Post #8


Newbie [ Level 2 ]
Group Icon

Group: Members
Posts: 10
Joined: 13-March 05
Member No.: 3,023



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 ! smile.gif
Go to the top of the page
 
+Quote Post
SingleDaddyof2
post Mar 14 2005, 01:42 PM
Post #9


Advanced Member
Group Icon

Group: Members
Posts: 115
Joined: 14-February 05
From: So. Cal.
Member No.: 2,632



What I would like to know is, how does one convert hex color codes to HSV (Hue, Saturation, value/brightness/intensity)?
Go to the top of the page
 
+Quote Post
chiiyo
post Mar 15 2005, 05:23 PM
Post #10


Premium Member
Group Icon

Group: Members
Posts: 218
Joined: 14-March 05
From: Singapore
Member No.: 3,041
myCENTs:92.74



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.
Go to the top of the page
 
+Quote Post

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Code To Send An Email From A Form(10)
  2. Basic Tutorial: PHP GD(16)
  3. Do You Program/code Your Own Games(11)
  4. Short "slicing" Tutorial(12)
  5. VB.NET: Howto Add And Delete Files(9)
  6. Does Anyone Code Using Turing(3)
  7. Myspace Code Changing(10)
  8. Photoshop Tutorial: Adding Color To Black And White Photo(6)
  9. Free Shoutbox? HTML, Flash or PHP Code(24)
  10. Photoshop Tutorial: Selective Coloring - Color Object In A B & W Photo(5)
  11. Uploading Image File Through JSP Code To Server(9)
  12. Dynamically Change The Background Image On Mouse Effects!(3)
  13. How To Add Adsense Code In SMF(4)
  14. Garry's Mod 10(2)
  15. Free Code Snippets And Css Layout(14)
  1. Wii Sports(10)
  2. Disable Task Manager 1 Line Code![vb6](34)
  3. Tips For Modifying Wordpress Code(1)
  4. Decompile An Exe To Source Code(10)
  5. Ad Free Short Subdomain Redirection(1)
  6. Short Url For Your Website(12)
  7. Dynamic Php Image And Better Php Code Question(10)
  8. Need Help With Code For Battle Calculator For An Mmorpg I Am Planning(0)
  9. Code To Text Ratio Tool(0)
  10. Php Random Selector(2)
  11. Activation Code(7)
  12. Instant Replay Code?(0)
  13. Windows Xp, How To Re-enable Show All Possible Color(6)


 



- Lo-Fi Version Time is now: 23rd November 2008 - 06:18 PM