User Tools

Site Tools


htmlcrossbrowsercolors

<h1>HTML Colors</h1> Colors are displayed combining&nbsp; RED, GREEN, and BLUE light sources. <h2>Color Values</h2> <p>HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).</p> <p>The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF).</p> <p>The table below shows the result of combining Red, Green, and Blue light sources:.</p> <table class“ex” cellspacing“0” border“1” width“100%”>

<tr>
  <th width''"50%">Color</th>
  <th width''"25%">Color HEX</th>
  <th width''"25%">Color RGB</th>
</tr>
<tr>
  <td bgcolor''"#000000">&nbsp;</td>
  <td>#000000</td>
  <td>rgb(0,0,0)</td>
</tr>
<tr>
  <td bgcolor''"#FF0000">&nbsp;</td>
  <td>#FF0000</td>
  <td>rgb(255,0,0)</td>
</tr>
<tr>
  <td bgcolor''"#00FF00">&nbsp;</td>
  <td>#00FF00</td>
  <td>rgb(0,255,0)</td>
</tr>
<tr>
  <td bgcolor''"#0000FF">&nbsp;</td>
  <td>#0000FF</td>
  <td>rgb(0,0,255)</td>
</tr>
<tr>
  <td bgcolor''"#FFFF00">&nbsp;</td>
  <td>#FFFF00</td>
  <td>rgb(255,255,0)</td>
</tr>
<tr>
  <td bgcolor''"#00FFFF">&nbsp;</td>
  <td>#00FFFF</td>
  <td>rgb(0,255,255)</td>
</tr>
<tr>
  <td bgcolor''"#FF00FF">&nbsp;</td>
  <td>#FF00FF</td>
  <td>rgb(255,0,255)</td>
</tr>
<tr>
  <td bgcolor''"#C0C0C0">&nbsp;</td>
  <td>#C0C0C0</td>
  <td>rgb(192,192,192)</td>
</tr>
<tr>
  <td bgcolor''"#FFFFFF">&nbsp;</td>
  <td>#FFFFFF</td>
  <td>rgb(255,255,255)</td>
</tr>

</table>

<h2>W3C Standard Color Names</h2> <p>W3C has listed 16 color names that will validate with an HTML validator.</p> <p>The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.</p>

<h2>Cross-browser Color Names</h2> <p>A collection of nearly 150 color names are supported by all major browsers.</p> <p>View the HtmlCrossBrowserColorNames</p>

<h2>Cross-browser Color Values</h2> <p>Some years ago, when most computers only supported 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. The reason for this was that the Microsoft and Mac operating system used 40 different &quot;reserved&quot; fixed system colors (about 20 each).</p> <p>We are not sure how important this is now, since most computers today have the ability to display millions of different colors, but the choice is left to you.</p> <p>The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette:</p>

<table border“1” width“100%”>

  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#000000">000000</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#000033">000033</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#000066">000066</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#000099">000099</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#0000cc">0000CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#0000ff">0000FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#003300">003300</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#003333">003333</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#003366">003366</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#003399">003399</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#0033cc">0033CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#0033ff">0033FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#006600">006600</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#006633">006633</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#006666">006666</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#006699">006699</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#0066cc">0066CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#0066ff">0066FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#009900">009900</td>
    <td align''"center" bgcolor''"#009933">009933</td>
    <td align''"center" bgcolor''"#009966">009966</td>
    <td align''"center" bgcolor''"#009999">009999</td>
    <td align''"center" bgcolor''"#0099cc">0099CC</td>
    <td align''"center" bgcolor''"#0099ff">0099FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#00cc00">00CC00</td>
    <td align''"center" bgcolor''"#00cc33">00CC33</td>
    <td align''"center" bgcolor''"#00cc66">00CC66</td>
    <td align''"center" bgcolor''"#00cc99">00CC99</td>
    <td align''"center" bgcolor''"#00cccc">00CCCC</td>
    <td align''"center" bgcolor''"#00ccff">00CCFF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#00ff00">00FF00</td>
    <td align''"center" bgcolor''"#00ff33">00FF33</td>
    <td align''"center" bgcolor''"#00ff66">00FF66</td>
    <td align''"center" bgcolor''"#00ff99">00FF99</td>
    <td align''"center" bgcolor''"#00ffcc">00FFCC</td>
    <td align''"center" bgcolor''"#00ffff">00FFFF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#330000">330000</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#330033">330033</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#330066">330066</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#330099">330099</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#3300cc">3300CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#3300ff">3300FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#333300">333300</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#333333">333333</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#333366">333366</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#333399">333399</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#3333cc">3333CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#3333ff">3333FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#336600">336600</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#336633">336633</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#336666">336666</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#336699">336699</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#3366cc">3366CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#3366ff">3366FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#339900">339900</td>
    <td align''"center" bgcolor''"#339933">339933</td>
    <td align''"center" bgcolor''"#339966">339966</td>
    <td align''"center" bgcolor''"#339999">339999</td>
    <td align''"center" bgcolor''"#3399cc">3399CC</td>
    <td align''"center" bgcolor''"#3399ff">3399FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#33cc00">33CC00</td>
    <td align''"center" bgcolor''"#33cc33">33CC33</td>
    <td align''"center" bgcolor''"#33cc66">33CC66</td>
    <td align''"center" bgcolor''"#33cc99">33CC99</td>
    <td align''"center" bgcolor''"#33cccc">33CCCC</td>
    <td align''"center" bgcolor''"#33ccff">33CCFF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#33ff00">33FF00</td>
    <td align''"center" bgcolor''"#33ff33">33FF33</td>
    <td align''"center" bgcolor''"#33ff66">33FF66</td>
    <td align''"center" bgcolor''"#33ff99">33FF99</td>
    <td align''"center" bgcolor''"#33ffcc">33FFCC</td>
    <td align''"center" bgcolor''"#33ffff">33FFFF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#660000">660000</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#660033">660033</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#660066">660066</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#660099">660099</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#6600cc">6600CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#6600ff">6600FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#663300">663300</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#663333">663333</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#663366">663366</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#663399">663399</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#6633cc">6633CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#6633ff">6633FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#666600">666600</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#666633">666633</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#666666">666666</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#666699">666699</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#6666cc">6666CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#6666ff">6666FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#669900">669900</td>
    <td align''"center" bgcolor''"#669933">669933</td>
    <td align''"center" bgcolor''"#669966">669966</td>
    <td align''"center" bgcolor''"#669999">669999</td>
    <td align''"center" bgcolor''"#6699cc">6699CC</td>
    <td align''"center" bgcolor''"#6699ff">6699FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#66cc00">66CC00</td>
    <td align''"center" bgcolor''"#66cc33">66CC33</td>
    <td align''"center" bgcolor''"#66cc66">66CC66</td>
    <td align''"center" bgcolor''"#66cc99">66CC99</td>
    <td align''"center" bgcolor''"#66cccc">66CCCC</td>
    <td align''"center" bgcolor''"#66ccff">66CCFF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#66ff00">66FF00</td>
    <td align''"center" bgcolor''"#66ff33">66FF33</td>
    <td align''"center" bgcolor''"#66ff66">66FF66</td>
    <td align''"center" bgcolor''"#66ff99">66FF99</td>
    <td align''"center" bgcolor''"#66ffcc">66FFCC</td>
    <td align''"center" bgcolor''"#66ffff">66FFFF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#990000">990000</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#990033">990033</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#990066">990066</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#990099">990099</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#9900cc">9900CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#9900ff">9900FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#993300">993300</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#993333">993333</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#993366">993366</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#993399">993399</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#9933cc">9933CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#9933ff">9933FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#996600">996600</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#996633">996633</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#996666">996666</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#996699">996699</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#9966cc">9966CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#9966ff">9966FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#999900">999900</td>
    <td align''"center" bgcolor''"#999933">999933</td>
    <td align''"center" bgcolor''"#999966">999966</td>
    <td align''"center" bgcolor''"#999999">999999</td>
    <td align''"center" bgcolor''"#9999cc">9999CC</td>
    <td align''"center" bgcolor''"#9999ff">9999FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#99cc00">99CC00</td>
    <td align''"center" bgcolor''"#99cc33">99CC33</td>
    <td align''"center" bgcolor''"#99cc66">99CC66</td>
    <td align''"center" bgcolor''"#99cc99">99CC99</td>
    <td align''"center" bgcolor''"#99cccc">99CCCC</td>
    <td align''"center" bgcolor''"#99ccff">99CCFF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#99ff00">99FF00</td>
    <td align''"center" bgcolor''"#99ff33">99FF33</td>
    <td align''"center" bgcolor''"#99ff66">99FF66</td>
    <td align''"center" bgcolor''"#99ff99">99FF99</td>
    <td align''"center" bgcolor''"#99ffcc">99FFCC</td>
    <td align''"center" bgcolor''"#99ffff">99FFFF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc0000">CC0000</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc0033">CC0033</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc0066">CC0066</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc0099">CC0099</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc00cc">CC00CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc00ff">CC00FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc3300">CC3300</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc3333">CC3333</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc3366">CC3366</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc3399">CC3399</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc33cc">CC33CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc33ff">CC33FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc6600">CC6600</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc6633">CC6633</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc6666">CC6666</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc6699">CC6699</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc66cc">CC66CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#cc66ff">CC66FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#cc9900">CC9900</td>
    <td align''"center" bgcolor''"#cc9933">CC9933</td>
    <td align''"center" bgcolor''"#cc9966">CC9966</td>
    <td align''"center" bgcolor''"#cc9999">CC9999</td>
    <td align''"center" bgcolor''"#cc99cc">CC99CC</td>
    <td align''"center" bgcolor''"#cc99ff">CC99FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#cccc00">CCCC00</td>
    <td align''"center" bgcolor''"#cccc33">CCCC33</td>
    <td align''"center" bgcolor''"#cccc66">CCCC66</td>
    <td align''"center" bgcolor''"#cccc99">CCCC99</td>
    <td align''"center" bgcolor''"#cccccc">CCCCCC</td>
    <td align''"center" bgcolor''"#ccccff">CCCCFF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#ccff00">CCFF00</td>
    <td align''"center" bgcolor''"#ccff33">CCFF33</td>
    <td align''"center" bgcolor''"#ccff66">CCFF66</td>
    <td align''"center" bgcolor''"#ccff99">CCFF99</td>
    <td align''"center" bgcolor''"#ccffcc">CCFFCC</td>
    <td align''"center" bgcolor''"#ccffff">CCFFFF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff0000">FF0000</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff0033">FF0033</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff0066">FF0066</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff0099">FF0099</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff00cc">FF00CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff00ff">FF00FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff3300">FF3300</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff3333">FF3333</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff3366">FF3366</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff3399">FF3399</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff33cc">FF33CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff33ff">FF33FF</td>
  </tr>
  <tr>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff6600">FF6600</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff6633">FF6633</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff6666">FF6666</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff6699">FF6699</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff66cc">FF66CC</td>
    <td align''"center" style''"color:#ffffff" bgcolor''"#ff66ff">FF66FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#ff9900">FF9900</td>
    <td align''"center" bgcolor''"#ff9933">FF9933</td>
    <td align''"center" bgcolor''"#ff9966">FF9966</td>
    <td align''"center" bgcolor''"#ff9999">FF9999</td>
    <td align''"center" bgcolor''"#ff99cc">FF99CC</td>
    <td align''"center" bgcolor''"#ff99ff">FF99FF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#ffcc00">FFCC00</td>
    <td align''"center" bgcolor''"#ffcc33">FFCC33</td>
    <td align''"center" bgcolor''"#ffcc66">FFCC66</td>
    <td align''"center" bgcolor''"#ffcc99">FFCC99</td>
    <td align''"center" bgcolor''"#ffcccc">FFCCCC</td>
    <td align''"center" bgcolor''"#ffccff">FFCCFF</td>
  </tr>
  <tr>
    <td align''"center" bgcolor''"#ffff00">FFFF00</td>
    <td align''"center" bgcolor''"#ffff33">FFFF33</td>
    <td align''"center" bgcolor''"#ffff66">FFFF66</td>
    <td align''"center" bgcolor''"#ffff99">FFFF99</td>
    <td align''"center" bgcolor''"#ffffcc">FFFFCC</td>
    <td align''"center" bgcolor''"#ffffff">FFFFFF</td>
  </tr>

</table>

– Main.FredPettis - 20 May 2008

htmlcrossbrowsercolors.txt · Last modified: 2013/01/27 21:29 (external edit)