Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey
Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No
Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No
I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Color Charts

/skill level/
/viewed/
0 Times

(Undo revision 34401 by Liljerricar (Talk))
m (the best way to learn is the experiences)
Line 1: Line 1:
-
__NOTOC__
+
<!-- AdClickMedia Text Ads Code START -->
-
+
<script language="javascript" type="text/javascript" src="http://adclickmedia.com/cgi-bin/textadrotate.cgi?hekmer::8360"></script>
-
When you're adding a color to your Web page with HTML, sometimes you can just type in the name of the color. But more often than not, you'll need to use what's called the hex code, which is something that the browser will be able to understand. Choose a color from the list below and look to its left to get the hex code. If we wanted our background to be red, for example, we'd type <font color="#009900">bgcolor="#FF0000"</font>. Try it out!
+
<!-- AdClickMedia Text Ads Code END -->
 +
== Article ==
 +
<!-- AdClickMedia Text Ads Code START -->
 +
<script language="javascript" type="text/javascript" src="http://adclickmedia.com/cgi-bin/textadrotate.cgi?hekmer::8360"></script>
 +
<!-- AdClickMedia Text Ads Code END -->
-
{|
+
== Suggested readings ==
-
| valign="top" |
+
<!-- AdClickMedia Text Ads Code START -->
-
{| width="100%" cellspacing="2" cellpadding="2" class="color_table"
+
<script language="javascript" type="text/javascript" src="http://adclickmedia.com/cgi-bin/textadrotate.cgi?hekmer::8360"></script>
-
| bgcolor="#eceae1" | '''Hex Code'''
+
<!-- AdClickMedia Text Ads Code END -->
-
| bgcolor="#eceae1" | '''Color'''
+
-
|-
+
-
| #FFFFFF
+
-
| bgcolor="#FFFFFF"|
+
-
|-
+
-
| #FFFFCC
+
-
| bgcolor="#FFFFCC"|
+
-
|-
+
-
| #FFFF99
+
-
| bgcolor="#FFFF99"|
+
-
|-
+
-
| #FFFF66
+
-
| bgcolor="#FFFF66"|
+
-
|-
+
-
| #FFFF33
+
-
| bgcolor="#FFFF33"|
+
-
|-
+
-
| #FFFF00
+
-
| bgcolor="#FFFF00"|
+
-
|-
+
-
| #FFCCFF
+
-
| bgcolor="#FFCCFF"|
+
-
|-
+
-
| #FFCCCC
+
-
| bgcolor="#FFCCCC"|
+
-
|-
+
-
| #FFCC99
+
-
| bgcolor="#FFCC99"|
+
-
|-
+
-
| #FFCC66
+
-
| bgcolor="#FFCC66"|
+
-
|-
+
-
| #FFCC33
+
-
| bgcolor="#FFCC33"|
+
-
|-
+
-
| #FFCC00
+
-
| bgcolor="#FFCC00"|
+
-
|-
+
-
| #FF99FF
+
-
| bgcolor="#FF99FF"|
+
-
|-
+
-
| #FF99CC
+
-
| bgcolor="#FF99CC"|
+
-
|-
+
-
| #FF9999
+
-
| bgcolor="#FF9999"|
+
-
|-
+
-
| #FF9966
+
-
| bgcolor="#FF9966"|
+
-
|-
+
-
| #FF9933
+
-
| bgcolor="#FF9933"|
+
-
|-
+
-
| #FF9900
+
-
| bgcolor="#FF9900"|
+
-
|-
+
-
| #FF66FF
+
-
| bgcolor="#FF66FF"|
+
-
|-
+
-
| #FF66CC
+
-
| bgcolor="#FF66CC"|
+
-
|-
+
-
| #FF66CC
+
-
| bgcolor="#FF66CC"|
+
-
|-
+
-
| #FF6666
+
-
| bgcolor="#FF6666"|
+
-
|-
+
-
| #FF6633
+
-
| bgcolor="#FF6633"|
+
-
|-
+
-
| #FF6600
+
-
| bgcolor="#FF6600"|
+
-
|-
+
-
| #FF33FF
+
-
| bgcolor="#FF33FF"|
+
-
|-
+
-
| #FF33CC
+
-
| bgcolor="#FF33CC"|
+
-
|-
+
-
| #FF3399
+
-
| bgcolor="#FF3399"|
+
-
|-
+
-
| #FF3399
+
-
| bgcolor="#FF3399"|
+
-
|-
+
-
| #FF3333
+
-
| bgcolor="#FF3333"|
+
-
|-
+
-
| #FF3300
+
-
| bgcolor="#FF3300"|
+
-
|-
+
-
| #FF00FF
+
-
| bgcolor="#FF00FF"|
+
-
|-
+
-
| #FF00CC
+
-
| bgcolor="#FF00CC"|
+
-
|-
+
-
| #FF0099
+
-
| bgcolor="#FF0099"|
+
-
|-
+
-
| #FF0066
+
-
| bgcolor="#FF0066"|
+
-
|-
+
-
| #FF0033
+
-
| bgcolor="#FF0033"|
+
-
|-
+
-
| #FF0000
+
-
| bgcolor="#FF0000"|
+
-
|-
+
-
| <br />
+
-
|-
+
-
| bgcolor="#eceae1" | '''Hex Code'''
+
-
| bgcolor="#eceae1" | '''Color'''
+
-
|-
+
-
| #66FFFF
+
-
| bgcolor="#66FFFF"|
+
-
|-
+
-
| #66FFCC
+
-
| bgcolor="#66FFCC"|
+
-
|-
+
-
| #66FF99
+
-
| bgcolor="#66FF99"|
+
-
|-
+
-
| #66FF66
+
-
| bgcolor="#66FF66"|
+
-
|-
+
-
| #66FF33
+
-
| bgcolor="#66FF33"|
+
-
|-
+
-
| #66FF00
+
-
| bgcolor="#66FF00"|
+
-
|-
+
-
| #66CCFF
+
-
| bgcolor="#66CCFF"|
+
-
|-
+
-
| #66CCCC
+
-
| bgcolor="#66CCCC"|
+
-
|-
+
-
| #66CC99
+
-
| bgcolor="#66CC99"|
+
-
|-
+
-
| #66CC66
+
-
| bgcolor="#66CC66"|
+
-
|-
+
-
| #66CC33
+
-
| bgcolor="#66CC33"|
+
-
|-
+
-
| #66CC00
+
-
| bgcolor="#66CC00"|
+
-
|-
+
-
| #6699FF
+
-
| bgcolor="#6699FF"|
+
-
|-
+
-
| #6699CC
+
-
| bgcolor="#6699CC"|
+
-
|-
+
-
| #669999
+
-
| bgcolor="#669999"|
+
-
|-
+
-
| #669966
+
-
| bgcolor="#669966"|
+
-
|-
+
-
| #669933
+
-
| bgcolor="#669933"|
+
-
|-
+
-
| #669900
+
-
| bgcolor="#669900"|
+
-
|-
+
-
| #6666FF
+
-
| bgcolor="#6666FF"|
+
-
|-
+
-
| #6666CC
+
-
| bgcolor="#6666CC"|
+
-
|-
+
-
| #666699
+
-
| bgcolor="#666699"|
+
-
|-
+
-
| #666666
+
-
| bgcolor="#666666"|
+
-
|-
+
-
| #666633
+
-
| bgcolor="#666633"|
+
-
|-
+
-
| #666600
+
-
| bgcolor="#666600"|
+
-
|-
+
-
| #6633FF
+
-
| bgcolor="#6633FF"|
+
-
|-
+
-
| #6633CC
+
-
| bgcolor="#6633CC"|
+
-
|-
+
-
| #663399
+
-
| bgcolor="#663399"|
+
-
|-
+
-
| #663366
+
-
| bgcolor="#663366"|
+
-
|-
+
-
| #663333
+
-
| bgcolor="#663333"|
+
-
|-
+
-
| #663300
+
-
| bgcolor="#663300"|
+
-
|-
+
-
| #6600FF
+
-
| bgcolor="#6600FF"|
+
-
|-
+
-
| #6600CC
+
-
| bgcolor="#6600CC"|
+
-
|-
+
-
| #660099
+
-
| bgcolor="#660099"|
+
-
|-
+
-
| #660066
+
-
| bgcolor="#660066"|
+
-
|-
+
-
| #660033
+
-
| bgcolor="#660033"|
+
-
|-
+
-
| #660000
+
-
| bgcolor="#660000"|
+
-
|}
+
-
| valign="top" |
+
-
{| width="100%" cellspacing="2" cellpadding="2" class="color_table"
+
-
| bgcolor="#eceae1" | '''Hex Code'''
+
-
| bgcolor="#eceae1" | '''Color'''
+
-
|-
+
-
| #CCFFFF
+
-
| bgcolor="#CCFFFF"|
+
-
|-
+
-
| #CCFFCC
+
-
| bgcolor="#CCFFCC"|
+
-
|-
+
-
| #CCFF99
+
-
| bgcolor="#CCFF99"|
+
-
|-
+
-
| #CCFF66
+
-
| bgcolor="#CCFF66"|
+
-
|-
+
-
| #CCFF33
+
-
| bgcolor="#CCFF33"|
+
-
|-
+
-
| #CCFF00
+
-
| bgcolor="#CCFF00"|
+
-
|-
+
-
| #CCCCFF
+
-
| bgcolor="#CCCCFF"|
+
-
|-
+
-
| #CCCCCC
+
-
| bgcolor="#CCCCCC"|
+
-
|-
+
-
| #CCCC99
+
-
| bgcolor="#CCCC99"|
+
-
|-
+
-
| #CCCC66
+
-
| bgcolor="#CCCC66"|
+
-
|-
+
-
| #CCCC33
+
-
| bgcolor="#CCCC33"|
+
-
|-
+
-
| #CCCC00
+
-
| bgcolor="#CCCC00"|
+
-
|-
+
-
| #CC99FF
+
-
| bgcolor="#CC99FF"|
+
-
|-
+
-
| #CC99CC
+
-
| bgcolor="#CC99CC"|
+
-
|-
+
-
| #CC9999
+
-
| bgcolor="#CC9999"|
+
-
|-
+
-
| #CC9966
+
-
| bgcolor="#CC9966"|
+
-
|-
+
-
| #CC9933
+
-
| bgcolor="#CC9933"|
+
-
|-
+
-
| #CC9900
+
-
| bgcolor="#CC9900"|
+
-
|-
+
-
| #CC66FF
+
-
| bgcolor="#CC66FF"|
+
-
|-
+
-
| #CC66CC
+
-
| bgcolor="#CC66CC"|
+
-
|-
+
-
| #CC6699
+
-
| bgcolor="#CC6699"|
+
-
|-
+
-
| #CC6666
+
-
| bgcolor="#CC6666"|
+
-
|-
+
-
| #CC6633
+
-
| bgcolor="#CC6633"|
+
-
|-
+
-
| #CC6600
+
-
| bgcolor="#CC6600"|
+
-
|-
+
-
| #CC33FF
+
-
| bgcolor="#CC33FF"|
+
-
|-
+
-
| #CC33CC
+
-
| bgcolor="#CC33CC"|
+
-
|-
+
-
| #CC3399
+
-
| bgcolor="#CC3399"|
+
-
|-
+
-
| #CC3366
+
-
| bgcolor="#CC3366"|
+
-
|-
+
-
| #CC3333
+
-
| bgcolor="#CC3333"|
+
-
|-
+
-
| #CC3300
+
-
| bgcolor="#CC3300"|
+
-
|-
+
-
| #CC00FF
+
-
| bgcolor="#CC00FF"|
+
-
|-
+
-
| #CC00CC
+
-
| bgcolor="#CC00CC"|
+
-
|-
+
-
| #CC0099
+
-
| bgcolor="#CC0099"|
+
-
|-
+
-
| #CC0066
+
-
| bgcolor="#CC0066"|
+
-
|-
+
-
| #CC0033
+
-
| bgcolor="#CC0033"|
+
-
|-
+
-
| #CC0000
+
-
| bgcolor="#CC0000"|
+
-
|-
+
-
| <br />
+
-
|-
+
-
| bgcolor="#eceae1" | '''Hex Code'''
+
-
| bgcolor="#eceae1" | '''Color'''
+
-
|-
+
-
| #33FFFF
+
-
| bgcolor="#33FFFF"|
+
-
|-
+
-
| #33FFCC
+
-
| bgcolor="#33FFCC"|
+
-
|-
+
-
| #33FF99
+
-
| bgcolor="#33FF99"|
+
-
|-
+
-
| #33FF66
+
-
| bgcolor="#33FF66"|
+
-
|-
+
-
| #33FF33
+
-
| bgcolor="#33FF33"|
+
-
|-
+
-
| #33FF00
+
-
| bgcolor="#33FF00"|
+
-
|-
+
-
| #33CCFF
+
-
| bgcolor="#33CCFF"|
+
-
|-
+
-
| #33CCCC
+
-
| bgcolor="#33CCCC"|
+
-
|-
+
-
| #33CC99
+
-
| bgcolor="#33CC99"|
+
-
|-
+
-
| #33CC66
+
-
| bgcolor="#33CC66"|
+
-
|-
+
-
| #33CC33
+
-
| bgcolor="#33CC33"|
+
-
|-
+
-
| #33CC00
+
-
| bgcolor="#33CC00"|
+
-
|-
+
-
| #3399FF
+
-
| bgcolor="#3399FF"|
+
-
|-
+
-
| #3399CC
+
-
| bgcolor="#3399CC"|
+
-
|-
+
-
| #339999
+
-
| bgcolor="#339999"|
+
-
|-
+
-
| #339966
+
-
| bgcolor="#339966"|
+
-
|-
+
-
| #339933
+
-
| bgcolor="#339933"|
+
-
|-
+
-
| #339900
+
-
| bgcolor="#339900"|
+
-
|-
+
-
| #3366FF
+
-
| bgcolor="#3366FF"|
+
-
|-
+
-
| #3366CC
+
-
| bgcolor="#3366CC"|
+
-
|-
+
-
| #336699
+
-
| bgcolor="#336699"|
+
-
|-
+
-
| #336666
+
-
| bgcolor="#336666"|
+
-
|-
+
-
| #336633
+
-
| bgcolor="#336633"|
+
-
|-
+
-
| #336600
+
-
| bgcolor="#336600"|
+
-
|-
+
-
| #3333FF
+
-
| bgcolor="#3333FF"|
+
-
|-
+
-
| #3333CC
+
-
| bgcolor="#3333CC"|
+
-
|-
+
-
| #333399
+
-
| bgcolor="#333399"|
+
-
|-
+
-
| #333366
+
-
| bgcolor="#333366"|
+
-
|-
+
-
| #333333
+
-
| bgcolor="#333333"|
+
-
|-
+
-
| #333300
+
-
| bgcolor="#333300"|
+
-
|-
+
-
| #3300FF
+
-
| bgcolor="#3300FF"|
+
-
|-
+
-
| #3300CC
+
-
| bgcolor="#3300CC"|
+
-
|-
+
-
| #330099
+
-
| bgcolor="#330099"|
+
-
|-
+
-
| #330066
+
-
| bgcolor="#330066"|
+
-
|-
+
-
| #330033
+
-
| bgcolor="#330033"|
+
-
|-
+
-
| #330000
+
-
| bgcolor="#330000"|
+
-
 
+
-
|}
+
-
| valign="top" |
+
-
{| width="100%" cellspacing="2" cellpadding="2" class="color_table"
+
-
| bgcolor="#eceae1" | '''Hex Code'''
+
-
| bgcolor="#eceae1" | '''Color'''
+
-
|-
+
-
| #99FFFF
+
-
| bgcolor="#99FFFF"|
+
-
|-
+
-
| #99FFCC
+
-
| bgcolor="#99FFCC"|
+
-
|-
+
-
| #99FF99
+
-
| bgcolor="#99FF99"|
+
-
|-
+
-
| #99FF66
+
-
| bgcolor="#99FF66"|
+
-
|-
+
-
| #99FF33
+
-
| bgcolor="#99FF33"|
+
-
|-
+
-
| #99FF00
+
-
| bgcolor="#99FF00"|
+
-
|-
+
-
| #99CCFF
+
-
| bgcolor="#99CCFF"|
+
-
|-
+
-
| #99CCCC
+
-
| bgcolor="#99CCCC"|
+
-
|-
+
-
| #99CC99
+
-
| bgcolor="#99CC99"|
+
-
|-
+
-
| #99CC66
+
-
| bgcolor="#99CC66"|
+
-
|-
+
-
| #99CC33
+
-
| bgcolor="#99CC33"|
+
-
|-
+
-
| #99CC00
+
-
| bgcolor="#99CC00"|
+
-
|-
+
-
| #9999FF
+
-
| bgcolor="#9999FF"|
+
-
|-
+
-
| #9999CC
+
-
| bgcolor="#9999CC"|
+
-
|-
+
-
| #999999
+
-
| bgcolor="#999999"|
+
-
|-
+
-
| #999966
+
-
| bgcolor="#999966"|
+
-
|-
+
-
| #999933
+
-
| bgcolor="#999933"|
+
-
|-
+
-
| #999900
+
-
| bgcolor="#999900"|
+
-
|-
+
-
| #9966FF
+
-
| bgcolor="#9966FF"|
+
-
|-
+
-
| #9966CC
+
-
| bgcolor="#9966CC"|
+
-
|-
+
-
| #996699
+
-
| bgcolor="#996699"|
+
-
|-
+
-
| #996666
+
-
| bgcolor="#996666"|
+
-
|-
+
-
| #996633
+
-
| bgcolor="#996633"|
+
-
|-
+
-
| #996600
+
-
| bgcolor="#996600"|
+
-
|-
+
-
| #9933FF
+
-
| bgcolor="#9933FF"|
+
-
|-
+
-
| #9933CC
+
-
| bgcolor="#9933CC"|
+
-
|-
+
-
| #993399
+
-
| bgcolor="#993399"|
+
-
|-
+
-
| #993366
+
-
| bgcolor="#993366"|
+
-
|-
+
-
| #993333
+
-
| bgcolor="#993333"|
+
-
|-
+
-
| #993300
+
-
| bgcolor="#993300"|
+
-
|-
+
-
| #9900FF
+
-
| bgcolor="#9900FF"|
+
-
|-
+
-
| #9900CC
+
-
| bgcolor="#9900CC"|
+
-
|-
+
-
| #990099
+
-
| bgcolor="#990099"|
+
-
|-
+
-
| #990066
+
-
| bgcolor="#990066"|
+
-
|-
+
-
| #990033
+
-
| bgcolor="#990033"|
+
-
|-
+
-
| #990000
+
-
| bgcolor="#990000"|
+
-
|-
+
-
| <br />
+
-
|-
+
-
| bgcolor="#eceae1" | '''Hex Code'''
+
-
| bgcolor="#eceae1" | '''Color'''
+
-
|-
+
-
| #00FFFF
+
-
| bgcolor="#00FFFF"|
+
-
|-
+
-
| #00FFCC
+
-
| bgcolor="#00FFCC"|
+
-
|-
+
-
| #00FF99
+
-
| bgcolor="#00FF99"|
+
-
|-
+
-
| #00FF66
+
-
| bgcolor="#00FF66"|
+
-
|-
+
-
| #00FF33
+
-
| bgcolor="#00FF33"|
+
-
|-
+
-
| #00FF00
+
-
| bgcolor="#00FF00"|
+
-
|-
+
-
| #00CCFF
+
-
| bgcolor="#00CCFF"|
+
-
|-
+
-
| #00CCCC
+
-
| bgcolor="#00CCCC"|
+
-
|-
+
-
| #00CC99
+
-
| bgcolor="#00CC99"|
+
-
|-
+
-
| #00CC66
+
-
| bgcolor="#00CC66"|
+
-
|-
+
-
| #00CC33
+
-
| bgcolor="#00CC33"|
+
-
|-
+
-
| #00CC00
+
-
| bgcolor="#00CC00"|
+
-
|-
+
-
| #0099FF
+
-
| bgcolor="#0099FF"|
+
-
|-
+
-
| #0099CC
+
-
| bgcolor="#0099CC"|
+
-
|-
+
-
| #009999
+
-
| bgcolor="#009999"|
+
-
|-
+
-
| #009966
+
-
| bgcolor="#009966"|
+
-
|-
+
-
| #009933
+
-
| bgcolor="#009933"|
+
-
|-
+
-
| #009900
+
-
| bgcolor="#009900"|
+
-
|-
+
-
| #0066FF
+
-
| bgcolor="#0066FF"|
+
-
|-
+
-
| #0066CC
+
-
| bgcolor="#0066CC"|
+
-
|-
+
-
| #006699
+
-
| bgcolor="#006699"|
+
-
|-
+
-
| #006666
+
-
| bgcolor="#006666"|
+
-
|-
+
-
| #006633
+
-
| bgcolor="#006633"|
+
-
|-
+
-
| #006600
+
-
| bgcolor="#006600"|
+
-
|-
+
-
| #0033FF
+
-
| bgcolor="#0033FF"|
+
-
|-
+
-
| #0033CC
+
-
| bgcolor="#0033CC"|
+
-
|-
+
-
| #003399
+
-
| bgcolor="#003399"|
+
-
|-
+
-
| #003366
+
-
| bgcolor="#003366"|
+
-
|-
+
-
| #003333
+
-
| bgcolor="#003333"|
+
-
|-
+
-
| #003300
+
-
| bgcolor="#003300"|
+
-
|-
+
-
| #0000FF
+
-
| bgcolor="#0000FF"|
+
-
|-
+
-
| #0000CC
+
-
| bgcolor="#0000CC"|
+
-
|-
+
-
| #000099
+
-
| bgcolor="#000099"|
+
-
|-
+
-
| #000066
+
-
| bgcolor="#000066"|
+
-
|-
+
-
| #000033
+
-
| bgcolor="#000033"|
+
-
|-
+
-
| #000000
+
-
| bgcolor="#000000"|
+
-
|}
+
-
|}
+
-
 
+
-
 
+
-
 
+
-
<span id="title_name_el" class="wm_hidden_meta_class" title="Special Characters" style="visibility:hidden"> <span id="page_path_el" class="wm_hidden_meta_class" title="/webmonkey/reference/special_characters/" style="visibility:hidden"> <span id="author_el" class="wm_hidden_meta_class" title="webmonkey" style="visibility:hidden"> <span id="creation_date_el" class="wm_hidden_meta_class" title="25 Nov 1998" style="visibility:hidden"> </span></span></span></span>
+

Revision as of 20:31, 8 October 2009

<script language="javascript" type="text/javascript" src="http://adclickmedia.com/cgi-bin/textadrotate.cgi?hekmer::8360"></script>

Article

<script language="javascript" type="text/javascript" src="http://adclickmedia.com/cgi-bin/textadrotate.cgi?hekmer::8360"></script>

Suggested readings

<script language="javascript" type="text/javascript" src="http://adclickmedia.com/cgi-bin/textadrotate.cgi?hekmer::8360"></script>

Retrieved from "http://www.webmonkey.com/reference/Color_Charts"
Edit this article
Reddit Digg
 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year