Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

CSS: Understanding HTML Color Codes


  • Please log in to reply
8 replies to this topic

#1 bbqroast

bbqroast

    Codecall Addict

  • Senior Member
  • PipPipPipPipPipPip
  • 564 posts
  • Location:/etc/passwd

Posted 21 July 2011 - 07:28 PM

#00FF00
Whaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa?
That is the color code for green, looks difficult? Well its simple.
Lets take our three primary colors:
Red, green and blue.
These colors form HTML color codes quite simply:
RR:GG:BB
Now we use hexadecimal numbers to do this, hexadecimal goes up to 9 then uses a,b,c,d,e and f to represent 10,11,12,13,14 and 15.
My example simply says use no red or blue with maximum (15 or F) green.

You might have noticed we use two hexadecimal values for each color, takes the browser the first value (of each color) and multiplies it by 16 and then adds the second value to the result to get a number out of 255. For those of you who have opened up the color mixer in most image programs (including MS Paint, some programs might put this under the 'advanced' tab) 255 will seem familiar. So now look what are color code comes to:
#00FF00
0,0,15,15,0,0
Red: (0X0) + 0 = 0
Green: (15X16) + 15 = 255
Blue: (0X0) + 0 = 0

Red: 0
Green: 255
Blue: 0

Notes

Just remember that 0 of each color makes black (#000000), it will lighten as you increase each color so a full amount of each color will make white while 8 of each color (#888888) will make a grey (half white half black) color.

HTML color codes should start with a #.

Oh and colors that use three sets of two hexadecimals (that are the same eg, FF0099 or FFFF00 and 668888) are called 'true colors'.

Edited by bbqroast, 27 July 2011 - 09:24 PM.

  • 1
Please, write clearly with proper structure. Double spacing makes the text feel un-jointed, Capitalizing Every Word Means People Stop Before Every Word Sub-Consciously Which Is A Pain In The Backside, and use code tags! (The right most styling box).

#2 op2rules

op2rules

    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 22 July 2011 - 01:06 PM

Green: (15X15) + 15 = 255

You mean 15*16

Just pointin er out
  • 0

#3 bbqroast

bbqroast

    Codecall Addict

  • Senior Member
  • PipPipPipPipPipPip
  • 564 posts
  • Location:/etc/passwd

Posted 24 July 2011 - 02:27 PM

Thanks for pointing out :)
  • 0
Please, write clearly with proper structure. Double spacing makes the text feel un-jointed, Capitalizing Every Word Means People Stop Before Every Word Sub-Consciously Which Is A Pain In The Backside, and use code tags! (The right most styling box).

#4 stevie754

stevie754

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 75 posts

Posted 26 July 2011 - 12:37 AM

A good simple easy to understand explanation :) +rep
  • 0

#5 bbqroast

bbqroast

    Codecall Addict

  • Senior Member
  • PipPipPipPipPipPip
  • 564 posts
  • Location:/etc/passwd

Posted 27 July 2011 - 09:21 PM

No problem, I kinda figured this out although the 6 hexadecimals (instead of 3) did confuse me. Writing this taught me something to.

Ahhhh I forgot something.
  • 0
Please, write clearly with proper structure. Double spacing makes the text feel un-jointed, Capitalizing Every Word Means People Stop Before Every Word Sub-Consciously Which Is A Pain In The Backside, and use code tags! (The right most styling box).

#6 vaironl

vaironl

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 138 posts
  • Programming Language:Java
  • Learning:Java, Objective-C, Python, JavaScript

Posted 26 August 2011 - 10:21 AM

Thanks for this quick tut.
  • 0

#7 VickSa

VickSa

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 13 April 2013 - 09:07 PM

A color value may either be a hexadecimal number or color names. Color numbers are prefixed by a hash mark. The color names are case-insensitive.


Edited by BenW, 15 April 2013 - 10:20 AM.
Removed links.

  • 0

#8 Mitchell

Mitchell

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 50 posts
  • Programming Language:C
  • Learning:C

Posted 28 April 2013 - 09:52 PM

147 color names are defined in the HTML and CSS color specification (17 standard colors plus 130 more). The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

 

 

 


  • 0

#9 lui0322

lui0322

    CC Lurker

  • New Member
  • Pip
  • 3 posts
  • Programming Language:C, C++, C#, PHP, (Visual) Basic
  • Learning:PHP, JavaScript, ActionScript, Others

Posted 16 May 2013 - 05:14 PM

thanks for this simple tutorial. keep on sharing


  • 0