HTML/CSS/Style Basics/color
Содержание
- 1 background: lightblue
- 2 Browser-Safe Color Chart
- 3 Change color with Javascript
- 4 color: #333333
- 5 color:black; assigns the constant value black to the color property.
- 6 color: blue;
- 7 color:red
- 8 Colors
- 9 CSS Color Chart
- 10 Hexadecimal Colors
- 11 RGB Colors
- 12 RGB Colors with percentage
- 13 The Sixteen Basic Colors
- 14 Use #fff for #ffffff
- 15 User-Interface Color Keywords
background: lightblue
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
span {
background: lightblue;
}
span.valign {
font-size: 16px;
color: white;
background: steelblue;
font-weight: bold;
}
</style>
</head>
<body>
<p>
<span>
If Peter Piper picked a peck of
<span class="valign">pickled</span>
peppers,
</span>
</p>
</body>
</html>
Browser-Safe Color Chart
<html>
<head>
<title></title>
<style>td {font-size:1.4em}</style>
</head>
<body bgcolor="#000000">
<h1 align="center"><font color="silver">Browser-Safe Color Chart</font></h1>
<center>
<table cellpadding="5" cellspacing="3" border="1" bordercolor="#99CCFF">
<tr>
<td bgcolor="#FFFFFF">#FFFFFF</td>
<td bgcolor="#FFFFCC">#FFFFCC</td>
<td bgcolor="#FFFF99">#FFFF99</td>
<td bgcolor="#FFFF66">#FFFF66</td>
<td bgcolor="#FFFF33">#FFFF33</td>
<td bgcolor="#FFFF00">#FFFF00</td>
</tr>
<tr>
<td bgcolor="#FFCCFF">#FFCCFF</td>
<td bgcolor="#FFCCCC">#FFCCCC</td>
<td bgcolor="#FFCC99">#FFCC99</td>
<td bgcolor="#FFCC66">#FFCC66</td>
<td bgcolor="#FFCC33">#FFCC33</td>
<td bgcolor="#FFCC00">#FFCC00</td>
</tr>
<tr>
<td bgcolor="#FF99FF">#FF99FF</td>
<td bgcolor="#FF99CC">#FF99CC</td>
<td bgcolor="#FF9999">#FF9999</td>
<td bgcolor="#FF9966">#FF9966</td>
<td bgcolor="#FF9933">#FF9933</td>
<td bgcolor="#FF9900">#FF9900</td>
</tr>
<tr>
<td bgcolor="#FF66FF">#FF66FF</td>
<td bgcolor="#FF66CC">#FF66CC</td>
<td bgcolor="#FF6699">#FF6699</td>
<td bgcolor="#FF6666">#FF6666</td>
<td bgcolor="#FF6633">#FF6633</td>
<td bgcolor="#FF6600">#FF6600</td>
</tr>
<tr>
<td bgcolor="#FF33FF">#FF33FF</td>
<td bgcolor="#FF33CC">#FF33CC</td>
<td bgcolor="#FF3399">#FF3399</td>
<td bgcolor="#FF3366">#FF3366</td>
<td bgcolor="#FF3333">#FF3333</td>
<td bgcolor="#FF3300">#FF3300</td>
</tr>
<tr>
<td bgcolor="#FF00FF">#FF00FF</td>
<td bgcolor="#FF00CC">#FF00CC</td>
<td bgcolor="#FF0099">#FF0099</td>
<td bgcolor="#FF0066">#FF0066</td>
<td bgcolor="#FF0033">#FF0033</td>
<td bgcolor="#FF0000">#FF0000</td>
</tr>
<tr>
<td bgcolor="#CCFFFF">#CCFFFF</td>
<td bgcolor="#CCFFCC">#CCFFCC</td>
<td bgcolor="#CCFF99">#CCFF99</td>
<td bgcolor="#CCFF66">#CCFF66</td>
<td bgcolor="#CCFF33">#CCFF33</td>
<td bgcolor="#CCFF00">#CCFF00</td>
</tr>
<tr>
<td bgcolor="#CCCCFF">#CCCCFF</td>
<td bgcolor="#CCCCCC">#CCCCCC</td>
<td bgcolor="#CCCC99">#CCCC99</td>
<td bgcolor="#CCCC66">#CCCC66</td>
<td bgcolor="#CCCC33">#CCCC33</td>
<td bgcolor="#CCCC00">#CCCC00</td>
</tr>
<tr>
<td bgcolor="#CC99FF">#CC99FF</td>
<td bgcolor="#CC99CC">#CC99CC</td>
<td bgcolor="#CC9999">#CC9999</td>
<td bgcolor="#CC9966">#CC9966</td>
<td bgcolor="#CC9933">#CC9933</td>
<td bgcolor="#CC9900">#CC9900</td>
</tr>
<tr>
<td bgcolor="#CC66FF">#CC66FF</td>
<td bgcolor="#CC66CC">#CC66CC</td>
<td bgcolor="#CC6699">#CC6699</td>
<td bgcolor="#CC6666">#CC6666</td>
<td bgcolor="#CC6633">#CC6633</td>
<td bgcolor="#CC6600">#CC6600</td>
</tr>
<tr>
<td bgcolor="#CC33FF">#CC33FF</td>
<td bgcolor="#CC33CC">#CC33CC</td>
<td bgcolor="#CC3399">#CC3399</td>
<td bgcolor="#CC3366">#CC3366</td>
<td bgcolor="#CC3333">#CC3333</td>
<td bgcolor="#CC3300">#CC3300</td>
</tr>
<tr>
<td bgcolor="#CC00FF">#CC00FF</td>
<td bgcolor="#CC00FF">#CC00CC</td>
<td bgcolor="#CC0099">#CC0099</td>
<td bgcolor="#CC0066">#CC0066</td>
<td bgcolor="#CC0033">#CC0033</td>
<td bgcolor="#CC0000">#CC0000</td>
</tr>
<tr>
<td bgcolor="#99FFFF">#99FFFF</td>
<td bgcolor="#99FFCC">#99FFCC</td>
<td bgcolor="#99FF99">#99FF99</td>
<td bgcolor="#99FF66">#99FF66</td>
<td bgcolor="#99FF33">#99FF33</td>
<td bgcolor="#99FF00">#99FF00</td>
</tr>
<tr>
<td bgcolor="#99CCFF">#99CCFF</td>
<td bgcolor="#99CCCC">#99CCCC</td>
<td bgcolor="#99CC99">#99CC99</td>
<td bgcolor="#99CC66">#99CC66</td>
<td bgcolor="#99CC33">#99CC33</td>
<td bgcolor="#99CC00">#99CC00</td>
</tr>
<tr>
<td bgcolor="#9999FF">#9999FF</td>
<td bgcolor="#9999CC">#9999CC</td>
<td bgcolor="#999999">#999999</td>
<td bgcolor="#999966">#999966</td>
<td bgcolor="#999933">#999933</td>
<td bgcolor="#999900">#999900</td>
</tr>
<tr>
<td bgcolor="#9966FF">#9966FF</td>
<td bgcolor="#9966CC">#9966CC</td>
<td bgcolor="#996699">#996699</td>
<td bgcolor="#996666">#996666</td>
<td bgcolor="#996633">#996633</td>
<td bgcolor="#996600">#996600</td>
</tr>
<tr>
<td bgcolor="#9933FF">#9933FF</td>
<td bgcolor="#9933CC">#9933CC</td>
<td bgcolor="#993399">#993399</td>
<td bgcolor="#993366">#993366</td>
<td bgcolor="#993333">#993333</td>
<td bgcolor="#993300">#993300</td>
</tr>
<tr>
<td bgcolor="#9900FF">#9900FF</td>
<td bgcolor="#9900CC">#9900CC</td>
<td bgcolor="#990099">#990099</td>
<td bgcolor="#990066">#990066</td>
<td bgcolor="#990033">#990033</td>
<td bgcolor="#990000">#990000</td>
</tr>
<tr>
<td bgcolor="#66FFFF">#66FFFF</td>
<td bgcolor="#66FFCC">#66FFCC</td>
<td bgcolor="#66FF99">#66FF99</td>
<td bgcolor="#66FF66">#66FF66</td>
<td bgcolor="#66FF33">#66FF33</td>
<td bgcolor="#66FF00">#66FF00</td>
</tr>
<tr>
<td bgcolor="#66CCFF">#66CCFF</td>
<td bgcolor="#66CCCC">#66CCCC</td>
<td bgcolor="#66CC99">#66CC99</td>
<td bgcolor="#66CC66">#66CC66</td>
<td bgcolor="#66CC33">#66CC33</td>
<td bgcolor="#66CC00">#66CC00</td>
</tr>
<tr>
<td bgcolor="#6699FF">#6699FF</td>
<td bgcolor="#6699CC">#6699CC</td>
<td bgcolor="#669999">#669999</td>
<td bgcolor="#669966">#669966</td>
<td bgcolor="#669933">#669933</td>
<td bgcolor="#669900">#669900</td>
</tr>
<tr>
<td bgcolor="#6666FF">#6666FF</td>
<td bgcolor="#6666CC">#6666CC</td>
<td bgcolor="#666699">#666699</td>
<td bgcolor="#666666">#666666</td>
<td bgcolor="#666633">#666633</td>
<td bgcolor="#666600">#666600</td>
</tr>
<tr>
<td bgcolor="#6633FF">#6633FF</td>
<td bgcolor="#6633CC">#6633CC</td>
<td bgcolor="#663399">#663399</td>
<td bgcolor="#663366">#663366</td>
<td bgcolor="#663333">#663333</td>
<td bgcolor="#663300">#663300</td>
</tr>
<tr>
<td bgcolor="#6600FF"><font color="#999999">#6600FF</font></td>
<td bgcolor="#6600CC"><font color="#999999">#6600CC</font></td>
<td bgcolor="#660099"><font color="#999999">#660099</font></td>
<td bgcolor="#660066"><font color="#999999">#660066</font></td>
<td bgcolor="#660033"><font color="#999999">#660033</font></td>
<td bgcolor="#660000"><font color="#999999">#660000</font></td>
</tr>
<tr>
<td bgcolor="#33FFFF"><font color="#000000">#33FFFF</font></td>
<td bgcolor="#33FFCC"><font color="#000000">#33FFCC</font></td>
<td bgcolor="#33FF99"><font color="#000000">#33FF99</font></td>
<td bgcolor="#33FF66"><font color="#000000">#33FF66</font></td>
<td bgcolor="#33FF33"><font color="#000000">#33FF33</font></td>
<td bgcolor="#33FF00"><font color="#000000">#33FF00</font></td>
</tr>
<tr>
<td bgcolor="#33CCFF"><font color="#000000">#33CCFF</font></td>
<td bgcolor="#33CCCC"><font color="#000000">#33CCCC</font></td>
<td bgcolor="#33CC99"><font color="#000000">#33CC99</font></td>
<td bgcolor="#33CC66"><font color="#000000">#33CC66</font></td>
<td bgcolor="#33CC33"><font color="#000000">#33CC33</font></td>
<td bgcolor="#33CC00"><font color="#000000">#33CC00</font></td>
</tr>
<tr>
<td bgcolor="#3399FF"><font color="#000000">#3399FF</font></td>
<td bgcolor="#3399CC"><font color="#000000">#3399CC</font></td>
<td bgcolor="#339999"><font color="#000000">#339999</font></td>
<td bgcolor="#339966"><font color="#000000">#339966</font></td>
<td bgcolor="#339933"><font color="#000000">#339933</font></td>
<td bgcolor="#339900"><font color="#000000">#339900</font></td>
</tr>
<tr>
<td bgcolor="#3366FF"><font color="#000000">#3366FF</font></td>
<td bgcolor="#3366CC"><font color="#000000">#3366CC</font></td>
<td bgcolor="#336699"><font color="#000000">#336699</font></td>
<td bgcolor="#336666"><font color="#000000">#336666</font></td>
<td bgcolor="#336633"><font color="#000000">#336633</font></td>
<td bgcolor="#336600"><font color="#000000">#336600</font></td>
</tr>
<tr>
<td bgcolor="#3333FF"><font color="#999999">#3333FF</font></td>
<td bgcolor="#3333CC"><font color="#999999">#3333CC</font></td>
<td bgcolor="#333399"><font color="#999999">#333399</font></td>
<td bgcolor="#333366"><font color="#999999">#333366</font></td>
<td bgcolor="#333333"><font color="#999999">#333333</font></td>
<td bgcolor="#333300"><font color="#999999">#333300</font></td>
</tr>
<tr>
<td bgcolor="#3300FF"><font color="#999999">#3300FF</font></td>
<td bgcolor="#3300CC"><font color="#999999">#3300CC</font></td>
<td bgcolor="#330099"><font color="#999999">#330099</font></td>
<td bgcolor="#330066"><font color="#999999">#330066</font></td>
<td bgcolor="#330033"><font color="#999999">#330033</font></td>
<td bgcolor="#330000"><font color="#999999">#330000</font></td>
</tr>
<tr>
<td bgcolor="#00FFFF"><font color="#000000">#00FFFF</font></td>
<td bgcolor="#00FFCC"><font color="#000000">#00FFCC</font></td>
<td bgcolor="#00FF99"><font color="#000000">#00FF99</font></td>
<td bgcolor="#00FF66"><font color="#000000">#00FF66</font></td>
<td bgcolor="#00FF33"><font color="#000000">#00FF33</font></td>
<td bgcolor="#00FF00"><font color="#000000">#00FF00</font></td>
</tr>
<tr>
<td bgcolor="#00CCFF"><font color="#000000">#00CCFF</font></td>
<td bgcolor="#00CCCC"><font color="#000000">#00CCCC</font></td>
<td bgcolor="#00CC99"><font color="#000000">#00CC99</font></td>
<td bgcolor="#00CC66"><font color="#000000">#00CC66</font></td>
<td bgcolor="#00CC33"><font color="#000000">#00CC33</font></td>
<td bgcolor="#00CC00"><font color="#000000">#00CC00</font></td>
</tr>
<tr>
<td bgcolor="#0099FF"><font color="#000000">#0099FF</font></td>
<td bgcolor="#0099CC"><font color="#000000">#0099CC</font></td>
<td bgcolor="#009999"><font color="#000000">#009999</font></td>
<td bgcolor="#009966"><font color="#000000">#009966</font></td>
<td bgcolor="#009933"><font color="#000000">#009933</font></td>
<td bgcolor="#009900"><font color="#000000">#009900</font></td>
</tr>
<tr>
<td bgcolor="#0066FF"><font color="#000000">#0066FF</font></td>
<td bgcolor="#0066CC"><font color="#000000">#0066CC</font></td>
<td bgcolor="#006699"><font color="#000000">#006699</font></td>
<td bgcolor="#006666"><font color="#000000">#006666</font></td>
<td bgcolor="#006633"><font color="#000000">#006633</font></td>
<td bgcolor="#006600"><font color="#000000">#006600</font></td>
</tr>
<tr>
<td bgcolor="#0033FF"><font color="#999999">#0033FF</font></td>
<td bgcolor="#0033CC"><font color="#999999">#0033CC</font></td>
<td bgcolor="#003399"><font color="#999999">#003399</font></td>
<td bgcolor="#003366"><font color="#999999">#003366</font></td>
<td bgcolor="#003333"><font color="#999999">#003333</font></td>
<td bgcolor="#003300"><font color="#999999">#003300</font></td>
</tr>
<tr>
<td bgcolor="#0000FF"><font color="#999999">#0000FF</font></td>
<td bgcolor="#0000CC"><font color="#999999">#0000CC</font></td>
<td bgcolor="#000099"><font color="#999999">#000099</font></td>
<td bgcolor="#000066"><font color="#999999">#000066</font></td>
<td bgcolor="#000033"><font color="#999999">#000033</font></td>
<td bgcolor="#000000"><font color="#999999">#000000</font></td>
</tr>
</table>
</center>
</body>
</html>
Change color with Javascript
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fix Colors</title>
<script type="text/javascript" language="javascript">
<!--
function swapit(element) {
var myElement = document.getElementById(element);
myElement.style.color="red"
}
function revert(element) {
var myElement = document.getElementById(element);
myElement.style.color="black"
}
// -->
</script>
</head>
<body>
<h1 id="changeme">Changing Color</h1>
<p onmouseover="swapit("changeme")" onmouseout="revert("changeme")">
This is a test. This is a test. This is a test. .</p>
</body>
</html>
color: #333333
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Combination Style Sheet Example</title>
<style type="text/css" media="all">
body {
color: #333333;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<h1 style="font-family: Times; font-size: .95em;">
Aftermath</h1>
<p><em>this is a test. </em></p>
<p>this is a test. ,<br />
this is a test. </p>
</body>
</html>
color:black; assigns the constant value black to the color property.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>CSS Syntax</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style><!-
body {
color:black;
}
</style>
</head>
<body>
<p>CSS syntax is <span style="font-style:italic;">EASY!</span></p>
</body>
</html>
color: blue;
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css" rel="stylesheet">
p {color: blue;}
</style>
<title>My first web page</title>
</head>
<body>
<p>It is easy to use HTML</p>
</body>
</html>
color:red
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
p.left {
color:red;
}
</style>
<title>Chapter Two, XHTML and CSS</title>
</head>
<body>
<p class="left">It is easy to use XHTML</p>
</body>
</html>
Colors
RGB values specify a color via a Red, Green, Blue representation.
RGB Percentage is the same as RGB but uses percentages.
RGBA (RGB with Alpha channel [available in CSS 3]): The RGB palette is used with the addition of an alpha channel to specify transparency.
Hexadecimal: This enables you to specify a color by a special hexadecimal number.
Shorthand Hexadecimal: This is a shortened representation of hexadecimal numbers; it is limited to a special 216-color, web-safe palette.
CSS Color Chart
<html>
<head>
<title>CSS Color Chart</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
body {
background-color: rgb(60%,60%,60%);
color: rgb(0%,0%,0%);
}
h1, h2{
color: rgb(80%80%80%)
}
th{
background-color: rgb(65%65%65%)
}
</style>
</head>
<body>
<div align="center">
<h1>"Browser-Safe" Color Mixing Chart</h1>
<h2>Gray Scale</h2>
<table>
<tr>
<th>0% Red, Green, Blue</th>
<th>20% Red, Green, Blue</th>
<th>40% Red, Green, Blue</th>
<th>60% Red, Green, Blue</th>
<th>80% Red, Green, Blue</th>
<th>100% Red, Green, Blue</th>
</tr>
<tr><!-- Row 1 -->
<td style="background-color: rgb(0%0%0%)">?/td>
<!-- Col 1 -->
<td style="background-color: rgb(20%20%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%40%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%60%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%80%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%100%100%)">?/td>
<!-- Col 6 -->
</tr>
</table>
<br>
<h2>Pure Colors</h2>
<table border="1" cellpadding="15" width="90%">
<tr>
<th>Color</th>
<th>20%</th>
<th>40%</th>
<th>60%</th>
<th>80%</th>
<th>100%</th>
</tr>
<tr><!-- Row 2 -->
<th>Pure Red</th>
<td style="background-color: rgb(20%0%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%0%0%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%0%0%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%0%0%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%0%0%)">?/td>
<!-- Col 6 -->
</tr>
<tr><!-- Row 3 -->
<th>Pure Green</th>
<td style="background-color: rgb(0%20%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(0%40%0%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(0%60%0%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(0%80%0%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(0%100%0%)">?/td>
<!-- Col 6 -->
</tr>
<tr><!-- Row 4 -->
<th>Pure Blue</th>
<!-- Col 1 -->
<td style="background-color: rgb(0%0%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(0%0%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(0%0%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(0%0%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(0%0%100%)">?/td>
<!-- Col 6 -->
</tr>
</table>
<br>
<h2>Mixture of Red and Green</h2>
<br>
<table border="3" cellpadding="15" width="90%">
<tr>
<th>Color Mixture</th>
<th>0% Red</th>
<th>20% Red</th>
<th>40% Red</th>
<th>60% Red</th>
<th>80% Red</th>
<th>100% Red</th>
</tr>
<tr>
<th>0% Green</th>
<td style="background-color: rgb(0%0%0%)">?/td>
<!-- Col 1 -->
<td style="background-color: rgb(20%0%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%0%0%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%0%0%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%0%0%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%0%0%)">?/td>
<!-- Col 6 -->
</tr>
<tr><!-- Row 6 -->
<th>20% Green</th>
<td style="background-color: rgb(0%20%0%)">?/td>
<!-- Col 1 -->
<td style="background-color: rgb(20%20%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%20%0%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%20%0%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%20%0%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%20%0%)">?/td>
<!-- Col 6 -->
</tr>
<tr><!-- Row 6 -->
<th>40% Green</th>
<td style="background-color: rgb(0%40%0%)">?/td>
<!-- Col 1 -->
<td style="background-color: rgb(20%40%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%40%0%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%40%0%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%40%0%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%40%0%)">?/td>
<!-- Col 6 -->
</tr>
<tr><!-- Row 6 -->
<th>60% Green</th>
<td style="background-color: rgb(0%60%0%)">?/td>
<!-- Col 1 -->
<td style="background-color: rgb(20%60%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%60%0%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%60%0%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%60%0%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%60%0%)">?/td>
<!-- Col 6 -->
</tr>
<tr><!-- Row 6 -->
<th>80% Green</th>
<td style="background-color: rgb(0%80%0%)">?/td>
<!-- Col 1 -->
<td style="background-color: rgb(20%80%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%80%0%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%80%0%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%80%0%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%80%0%)">?/td>
<!-- Col 6 -->
</tr>
<tr><!-- Row 6 -->
<th>100% Green</th>
<td style="background-color: rgb(0%100%0%)">?/td>
<!-- Col 1 -->
<td style="background-color: rgb(20%100%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%100%0%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%100%0%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%100%0%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%100%0%)">?/td>
<!-- Col 6 -->
</tr>
</table>
<br>
<!--Table # Blue and Red Mixtures-->
<table width="90%" cellpadding="15" border="1">
<caption><b>Mixtures of Blue and Red</b></caption>
<tr>
<th>Color Mixture</th>
<th>0% Red</th>
<th>20% Red</th>
<th>40% Red</th>
<th>60% Red</th>
<th>80% Red</th>
<th>100% Red</th>
</tr>
<tr>
<th>0% Blue</th>
<td style="background-color: rgb(00%00%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(20%00%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%00%0%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%00%0%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%00%0%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%00%0%)">?/td>
<!-- Col 6 -->
</tr>
<tr><!-- Row 1 -->
<th>20% Blue</th>
<td style="background-color: rgb(00%00%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(20%00%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%00%20%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%00%20%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%00%20%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%00%20%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>40% Blue</th>
<td style="background-color: rgb(00%00%40%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(20%00%40%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%00%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%00%40%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%00%40%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%00%40%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>60% Blue</th>
<td style="background-color: rgb(00%00%60%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(20%00%60%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%00%60%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%00%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%00%60%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%00%60%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>80% Blue</th>
<td style="background-color: rgb(00%00%80%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(20%00%80%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%00%80%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%00%80%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%00%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%00%80%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>100% Blue</th>
<td style="background-color: rgb(00%00%100%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(20%00%100%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%00%100%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%00%100%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%00%100%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%00%100%)">?/td>
<!-- Col 6 -->
</tr>
</table>
<table width="90%" cellpadding="15" border="1">
<caption><b>Mixtures of Blue and Green</b></caption>
<tr>
<th>Color Mixture</th>
<th>0% Green</th>
<th>20% Green</th>
<th>40% Green</th>
<th>60% Green</th>
<th>80% Green</th>
<th>100% Green</th>
</tr>
<tr>
<th>0% Blue</th>
<td style="background-color: rgb(0%00%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(0%20%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(0%40%0%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(0%60%0%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(0%80%0%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(0%100%0%)">?/td>
<!-- Col 6 -->
</tr>
<tr><!-- Row 1 -->
<th>20% Blue</th>
<td style="background-color: rgb(00%00%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb( 0%20%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb( 0%40%20%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb( 0%60%20%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb( 0%80%20%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb( 0%100%20%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>40% Blue</th>
<td style="background-color: rgb(00%00%40%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb( 0%20%40%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb( 0%40%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb( 0%60%40%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb( 0%80%40%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb( 0%100%40%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>60% Blue</th>
<td style="background-color: rgb(00%00%60%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb( 0%20%60%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb( 0%40%60%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb( 0%60%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb( 0%80%60%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb( 0%100%60%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>80% Blue</th>
<td style="background-color: rgb(00%00%80%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb( 0%20%80%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb( 0%40%80%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb( 0%60%80%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb( 0%80%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb( 0%100%80%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>100%Blue</th>
<td style="background-color: rgb(00%00%100%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb( 0%20%100%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb( 0%40%100%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb( 0%60%100%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb( 0%80%100%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb( 0%100%100%)">?/td>
<!-- Col 6 -->
</tr>
</table>
<!--Table # Red, Blue, and Green Mixtures-->
<table width="90%" cellpadding="15" border="1">
<caption><b>Mixtures of Red, Blue, and Green</b></caption>
<tr><!-- Row 1 -->
</tr>
<tr>
<th>Color Mixture</th>
<th>0% Green</th>
<th>20% Green</th>
<th>40% Green</th>
<th>60% Green</th>
<th>80% Green</th>
<th>100% Green</th>
</tr>
<tr>
<th>20% Red + 20% Blue</th>
<td style="background-color: rgb(20%00%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(20%20%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(20%40%20%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(20%60%20%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(20%80%20%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(20%100%20%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>40% Red + 40% Blue</th>
<td style="background-color: rgb(40%00%40%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%20%40%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%40%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(40%60%40%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(40%80%40%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(40%100%40%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>60% Red + 60% Blue</th>
<td style="background-color: rgb(60%00%60%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(60%20%60%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(60%40%60%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%60%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(60%80%60%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(60%100%60%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>80% Red + 80% Blue</th>
<td style="background-color: rgb(80%00%80%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(80%20%80%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(80%40%80%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(80%60%80%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%80%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(80%100%80%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>100% Red + 100% Blue</th>
<td style="background-color: rgb(100%00%100%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(100%20%100%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(100%40%100%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(100%60%100%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(100%80%100%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%100%100%)">?/td>
<!-- Col 6 -->
</tr>
</table>
<!--Table # Red, Blue, and Green Mixtures-->
<table width="90%" cellpadding="15" border="1">
<caption><b>Mixtures of Red, Blue, and Green</b></caption>
<tr><!-- Row 1 -->
</tr>
<tr>
<th>Color Mixture</th>
<th>0% Blue</th>
<th>20% Blue</th>
<th>40% Blue</th>
<th>60% Blue</th>
<th>80% Blue</th>
<th>100% Blue</th>
</tr>
<tr>
<th>0% Red + 0% Green</th>
<td style="background-color: rgb(0%00%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(0%0%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(0%0%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(0%0%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(0%0%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(0%0%100%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>20% Red + 20% Green</th>
<td style="background-color: rgb(20%20%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(20%20%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(20%20%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(20%20%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(20%20%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(20%20%100%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>40% Red + 40% Green</th>
<td style="background-color: rgb(40%40%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%40%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(40%40%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(40%40%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(40%40%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(40%40%100%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>60% Red + 60% Green</th>
<td style="background-color: rgb(60%60%00%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(60%60%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(60%60%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(60%60%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(60%60%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(60%60%100%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>80% Red + 80% Green</th>
<td style="background-color: rgb(80%80%0%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(80%80%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(80%80%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(80%80%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(80%80%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(80%80%100%)">?/td>
<!-- Col 6 -->
</tr>
<tr>
<th>100% Red + 100% Green</th>
<td style="background-color: rgb(100% 100%00%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(100%100%20%)">?/td>
<!-- Col 2 -->
<td style="background-color: rgb(100%100%40%)">?/td>
<!-- Col 3 -->
<td style="background-color: rgb(100%100%60%)">?/td>
<!-- Col 4 -->
<td style="background-color: rgb(100%100%80%)">?/td>
<!-- Col 5 -->
<td style="background-color: rgb(100%100%100%)">?/td>
<!-- Col 6 -->
</tr>
</table>
</div>
</body>
</html>
Hexadecimal Colors
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Setting a Negative Margin</title>
<style type="text/css">
div {
color: #000000;
background-color: #FF0000;
border: thin solid #FFA500;
}
</style>
</head>
<body>
<div>a div</div>
</body>
</html>
RGB Colors
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Setting a Negative Margin</title>
<style type="text/css">
body {
background-color: rgb(128, 128, 128);
}
</style>
</head>
<body>
<div>a div</div>
</body>
</html>
RGB Colors with percentage
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Setting a Negative Margin</title>
<style type="text/css">
body {
background-color: rgb(50%, 50%, 50%);
}
</style>
</head>
<body>
<div>a div</div>
</body>
</html>
The Sixteen Basic Colors
<html>
<head>
<title></title>
</head>
<body bgcolor="#000000">
<center>
<h1>The Sixteen Basic Colors</h1>
<table border="1" cellpadding="5"> <!--Table starts-->
<tr> <!--Row 1 -->
<td bgcolor="white">White</td> <!--TD tags define table cells-->
<td bgcolor="black" style="color: white;">Black</td>
<td bgcolor="gray">Gray</td>
<td bgcolor="silver">Silver</td>
</tr> <!--End of row 1-->
<tr> <!--Row 2-->
<td bgcolor="navy" style="color: white;">Navy</td>
<td bgcolor="blue" style="color: white;">Blue</td>
<td bgcolor="teal">Teal</td>
<td bgcolor="aqua">Aqua</td>
</tr> <!--End of row 2-->
<tr> <!-- Row 3-->
<td bgcolor="lime">Lime</td>
<td bgcolor="green">Green</td>
<td bgcolor="olive">Olive</td>
<td bgcolor="yellow">Yellow</td>
</tr> <!--End of row 3-->
<tr> <!--Row 4-->
<td bgcolor="fuchsia">Fuchsia</td>
<td bgcolor="red">Red</td>
<td bgcolor="maroon" style="color: white;">Maroon</td>
<td bgcolor="purple" style="color: white;">Purple</td>
</tr> <!--End of row 4-->
</table> <!--End of table-->
</center>
</body>
</html>
Use #fff for #ffffff
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml"xml: lang="en"lang="en">
<head>
<title></title>
<style type="text/css">
body {
background: #fff;
color: #000;
}
#MainText {
padding: 10px;
margin: 5px;
background-color: #fff;
}
</style>
</head>
<body>
<div id="MainText">
<p>this is a test. this is a test. this is a test. this is a test. .</p>
</div>
</body>
</html>
User-Interface Color Keywords
Color Keyword Description
ActiveBorder Border of the active window.
ActiveCaption Caption of the active window.
AppWorkspace Background color of multiple document interface.
Background Desktop background.
ButtonFace Face color of three-dimensional display elements.
ButtonHighlight Dark shadow for three-dimensional display elements (for edges facing away from the light source).
ButtonShadow Shadow color for three-dimensional display elements.
ButtonText Text on push buttons.
CaptionText Text in caption, size box, and scrollbar arrow box.
GrayText Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
Highlight Item(s) selected in a control.
HighlightText Text of item(s) selected in a control.
InactiveBorder Inactive window border.
InactiveCaption Inactive window caption.
InactiveCaptionText Color of text in an inactive caption.
InfoBackground Background color for tooltip controls.
InfoText Text color for tooltip controls.
Menu Menu background.
MenuText Text in menus.
Scrollbar Scrollbar gray area.
ThreeDDarkShadow Dark shadow for three-dimensional display elements.
ThreeDFace Face color for three-dimensional display elements.
ThreeDHighlight Highlight color for three-dimensional display elements.
ThreeDLightShadow Light color for three-dimensional display elements (for edges facing the light source).
ThreeDShadow Dark shadow for three-dimensional display elements.
Window Window background.
WindowFrame Window frame.
WindowText Text in windows.