Table des matières

Des couleurs pour le web

Couleurs HTML

Valeur hexadécimale Nom HTML
#000000 black
#000080 navy
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua ou cyan
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia ou magenta
#FFFF00 yellow
#FFFFFF white

Couleurs "really safe"

Couleurs SVG

Tableaux colorés en HTML

couleurs.html
<!doctype html>
<html lang="fr">
 
<head>
	<meta charset="UTF-8">
	<title>Couleurs | LeonLeMoutonProduction</title>
</head>
 
<body>
	<section style="width:33%;float:left;">
 
		<h1 style="text-align:center;">Couleurs HTML</h1>
 
		<table summary="Couleurs HTML">
 
			<thead>
				<tr>
				<th>Valeur hexadécimale</th>
				<th>Nom HTML</th>
				</tr>
			</thead>
 
			<tbody>
				<tr>
				<td style="background:#000; color:#FFF;">#000000</td>
				<td>black</td>
				</tr>
				<tr>
				<td style="background:#000080; color:#FFF;">#000080</td>
				<td>navy</td>
				</tr>
				<tr>
				<td style="background:#00F; color:#FFF;">#0000FF</td>
				<td>blue</td>
				</tr>
				<tr>
				<td style="background:#008000;">#008000</td>
				<td>green</td>
				</tr>
				<tr>
				<td style="background:#008080;">#008080</td>
				<td>teal</td>
				</tr>
				<tr>
				<td style="background:#0F0;">#00FF00</td>
				<td>lime</td>
				</tr>
				<tr>
				<td style="background:#0FF;">#00FFFF</td>
				<td>aqua ou cyan</td>
				</tr>
				<tr>
				<td style="background:#800000; color:#FFF;">#800000</td>
				<td>maroon</td>
				</tr>
				<tr>
				<td style="background:#660099; color:#FFF;">#800080</td>
				<td>purple</td>
				</tr>
				<tr>
				<td style="background:#808000;">#808000</td>
				<td>olive</td>
				</tr>
				<tr>
				<td style="background:#808080;">#808080</td>
				<td>gray</td>
				</tr>
				<tr>
				<td style="background:#C0C0C0;">#C0C0C0</td>
				<td>silver</td>
				</tr>
				<tr>
				<td style="background:#F00;">#FF0000</td>
				<td>red</td>
				</tr>
				<tr>
				<td style="background:#F0F;">#FF00FF</td>
				<td>fuchsia ou magenta</td>
				</tr>
				<tr>
				<td style="background:#FF0;">#FFFF00</td>
				<td>yellow</td>
				</tr>
				<tr>
				<td style="background:#FFF;">#FFFFFF</td>
				<td>white</td>
				</tr>
			</tbody>
		</table>
	</section>
 
	<section style="width:33%;float:left;">
 
		<h1 style="text-align:center;">Couleurs "really safe"</h1>
 
		<table summary="Couleurs really safe">
 
			<thead>
				<tr>
				<th>Valeur hexadécimale</th>
				<th>Nom HTML</th>
				</tr>
			</thead>
 
			<tbody>
				<tr>
				<td style="background: #000; color:#FFF;">#000000</td>
				<td>black</td>
				</tr>
				<tr>
				<td style="background: #003; color:#FFF;">#000033</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #00F; color:#FFF;">#0000FF</td>
				<td>blue</td>
				</tr>
				<tr>
				<td style="background: #0F0;">#00FF00</td>
				<td>lime</td>
				</tr>
				<tr>
				<td style="background: #0F6;">#00FF66</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #0FC;">#00FFCC</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #0FF;">#00FFFF</td>
				<td>aqua ou cyan</td>
				</tr>
				<tr>
				<td style="background: #3F3;">#33FF33</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #3F6;">#33FF66</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #3FC;">#33FFCC</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #3FF;">#33FFFF</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #6F0;">#66FF00</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #6F3;">#66FF33</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #6FF;">#66FFFF</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #CF6;">#CCFF66</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #F00;">#FF0000</td>
				<td>red</td>
				</tr>
				<tr>
				<td style="background: #F03;">#FF0033</td>
				<td>red</td>
				</tr>
				<tr>
				<td style="background: #F0F;">#FF00FF</td>
				<td>fuchsia ou magenta</td>
				</tr>
				<tr>
				<td style="background: #FF0;">#FFFF00</td>
				<td>yellow</td>
				</tr>
				<tr>
				<td style="background: #FF3;">#FFFF33</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #FF6;">#FFFF66</td>
				<td>/</td>
				</tr>
				<tr>
				<td style="background: #FFF;">#FFFFFF</td>
				<td>white</td>
				</tr>		
			</tbody>
		</table>
	</section>
 
	<section style="width:33%;float:left;">
 
	<h1 style="text-align:center;">Couleurs SVG</h1>
 
	<table summary="Couleurs SVG">
 
			<thead>
				<tr>
				<th>Valeur hexadécimale</th>
				<th>Nom HTML</th>
				</tr>
			</thead>
 
			<tbody>
				<tr>
				<td style="background:#000000; color:#FFF;">#000000</td>
				<td>black</td>
				</tr>
				<tr>
				<td style="background:#000080; color:#FFF;">#000080</td>
				<td>navy</td>
				</tr>
				<tr>
				<td style="background:#00008b; color:#FFF;">#00008b</td>
				<td>darkblue</td>
				</tr>
				<tr>
				<td style="background:#0000cd; color:#FFF;">#0000cd</td>
				<td>mediumblue</td>
				</tr>
				<tr>
				<td style="background:#0000ff; color:#FFF;">#0000ff</td>
				<td>blue</td>
				</tr>
				<tr>
				<td style="background:#006400; color:#FFF;">#006400</td>
				<td>darkgreen</td>
				</tr>
				<tr>
				<td style="background:#008000;">#008000</td>
				<td>green</td>
				</tr>
				<tr>
				<td style="background:#008080;">#008080</td>
				<td>teal</td>
				</tr>
				<tr>
				<td style="background:#008b8b;">#008b8b</td>
				<td>darkcyan</td>
				</tr>
				<tr>
				<td style="background:#00bfff;">#00bfff</td>
				<td>deepskyblue</td>
				</tr>
				<tr>
				<td style="background:#00ced1;">#00ced1</td>
				<td>darkturquoise</td>
				</tr>
				<tr>
				<td style="background:#00fa9a;">#00fa9a</td>
				<td>mediumspringgreen</td>
				</tr>
				<tr>
				<td style="background:#00ff00;">#00ff00</td>
				<td>lime</td>
				</tr>
				<tr>
				<td style="background:#00ff7f;">#00ff7f</td>
				<td>springgreen</td>
				</tr>
				<tr>
				<td style="background:#00ffff;">#00ffff</td>
				<td>aqua ou cyan</td>
				</tr>
				<tr>
				<td style="background:#191970; color:#FFF;">#191970</td>
				<td>midnightblue</td>
				</tr>
				<tr>
				<td style="background:#1e90ff;">#1e90ff</td>
				<td>dodgerblue</td>
				</tr>
				<tr>
				<td style="background:#20b2aa;">#20b2aa</td>
				<td>lightseagreen</td>
				</tr>
				<tr>
				<td style="background:#228b22;">#228b22</td>
				<td>forestgreen</td>
				</tr>
				<tr>
				<td style="background:#2e8b57;">#2e8b57</td>
				<td>seagreen</td>
				</tr>
				<tr>
				<td style="background:#2f4f4f; color:#FFF;">#2f4f4f</td>
				<td>darkslategray</td>
				</tr>
				<tr>
				<td style="background:#2f4f4f; color:#FFF;">#2f4f4f</td>
				<td>darkslategrey</td>
				</tr>
				<tr>
				<td style="background:#32cd32;">#32cd32</td>
				<td>limegreen</td>
				</tr>
				<tr>
				<td style="background:#3cb371;">#3cb371</td>
				<td>mediumseagreen</td>
				</tr>
				<tr>
				<td style="background:#40e0d0;">#40e0d0</td>
				<td>turquoise</td>
				</tr>
				<tr>
				<td style="background:#4169e1;">#4169e1</td>
				<td>royalblue</td>
				</tr>
				<tr>
				<td style="background:#4682b4;">#4682b4</td>
				<td>steelblue</td>
				</tr>
				<tr>
				<td style="background:#483d8b; color:#FFF;">#483d8b</td>
				<td>darkslateblue</td>
				</tr>
				<tr>
				<td style="background:#48d1cc;">#48d1cc</td>
				<td>mediumturquoise</td>
				</tr>
				<tr>
				<td style="background:#4b0082; color:#FFF;">#4b0082</td>
				<td>indigo</td>
				</tr>
				<tr>
				<td style="background:#556b2f; color:#FFF;">#556b2f</td>
				<td>darkolivegreen</td>
				</tr>
				<tr>
				<td style="background:#5f9ea0;">#5f9ea0</td>
				<td>cadetblue</td>
				</tr>
				<tr>
				<td style="background:#6495ed;">#6495ed</td>
				<td>cornflowerblue</td>
				</tr>
				<tr>
				<td style="background:#66cdaa;">#66cdaa</td>
				<td>mediumaquamarine</td>
				</tr>
				<tr>
				<td style="background:#696969; color:#FFF;">#696969</td>
				<td>dimgray</td>
				</tr>
				<tr>
				<td style="background:#696969; color:#FFF;">#696969</td>
				<td>dimgrey</td>
				</tr>
				<tr>
				<td style="background:#6a5acd; color:#FFF;">#6a5acd</td>
				<td>slateblue</td>
				</tr>
				<tr>
				<td style="background:#6b8e23;">#6b8e23</td>
				<td>olivedrab</td>
				</tr>
				<tr>
				<td style="background:#708090;">#708090</td>
				<td>slategray</td>
				</tr>
				<tr>
				<td style="background:#708090;">#708090</td>
				<td>slategrey</td>
				</tr>
				<tr>
				<td style="background:#778899;">#778899</td>
				<td>lightslategray</td>
				</tr>
				<tr>
				<td style="background:#778899;">#778899</td>
				<td>lightslategrey</td>
				</tr>
				<tr>
				<td style="background:#7b68ee;">#7b68ee</td>
				<td>mediumslateblue</td>
				</tr>
				<tr>
				<td style="background:#7cfc00;">#7cfc00</td>
				<td>lawngreen</td>
				</tr>
				<tr>
				<td style="background:#7fff00;">#7fff00</td>
				<td>chartreuse</td>
				</tr>
				<tr>
				<td style="background:#7fffd4;">#7fffd4</td>
				<td>aquamarine</td>
				</tr>
				<tr>
				<td style="background:#800000; color:#FFF;">#800000</td>
				<td>maroon</td>
				</tr>
				<tr>
				<td style="background:#800080; color:#FFF;">#800080</td>
				<td>purple</td>
				</tr>
				<tr>
				<td style="background:#808000;">#808000</td>
				<td>olive</td>
				</tr>
				<tr>
				<td style="background:#808080;">#808080</td>
				<td>gray</td>
				</tr>
				<tr>
				<td style="background:#808080;">#808080</td>
				<td>grey</td>
				</tr>
				<tr>
				<td style="background:#87ceeb;">#87ceeb</td>
				<td>skyblue</td>
				</tr>
				<tr>
				<td style="background:#87cefa;">#87cefa</td>
				<td>lightskyblue</td>
				</tr>
				<tr>
				<td style="background:#8a2be2; color:#FFF;">#8a2be2</td>
				<td>blueviolet</td>
				</tr>
				<tr>
				<td style="background:#8b0000; color:#FFF;">#8b0000</td>
				<td>darkred</td>
				</tr>
				<tr>
				<td style="background:#8b008b; color:#FFF;">#8b008b</td>
				<td>darkmagenta</td>
				</tr>
				<tr>
				<td style="background:#8b4513; color:#FFF;">#8b4513</td>
				<td>saddlebrown</td>
				</tr>
				<tr>
				<td style="background:#8fbc8f;">#8fbc8f</td>
				<td>darkseagreen</td>
				</tr>
				<tr>
				<td style="background:#90ee90;">#90ee90</td>
				<td>lightgreen</td>
				</tr>
				<tr>
				<td style="background:#9370db;">#9370db</td>
				<td>mediumpurple</td>
				</tr>
				<tr>
				<td style="background:#9400d3; color:#FFF;">#9400d3</td>
				<td>darkviolet</td>
				</tr>
				<tr>
				<td style="background:#98fb98;">#98fb98</td>
				<td>palegreen</td>
				</tr>
				<tr>
				<td style="background:#9932cc; color:#FFF;">#9932cc</td>
				<td>darkorchid</td>
				</tr>
				<tr>
				<td style="background:#9acd32;">#9acd32</td>
				<td>yellowgreen</td>
				</tr>
				<tr>
				<td style="background:#a0522d; color:#FFF;">#a0522d</td>
				<td>sienna</td>
				</tr>
				<tr>
				<td style="background:#a52a2a; color:#FFF;">#a52a2a</td>
				<td>brown</td>
				</tr>
				<tr>
				<td style="background:#a9a9a9;">#a9a9a9</td>
				<td>darkgray</td>
				</tr>
				<tr>
				<td style="background:#a9a9a9;">#a9a9a9</td>
				<td>darkgrey</td>
				</tr>
				<tr>
				<td style="background:#add8e6;">#add8e6</td>
				<td>lightblue</td>
				</tr>
				<tr>
				<td style="background:#adff2f;">#adff2f</td>
				<td>greenyellow</td>
				</tr>
				<tr>
				<td style="background:#afeeee;">#afeeee</td>
				<td>paleturquoise</td>
				</tr>
				<tr>
				<td style="background:#b0c4de;">#b0c4de</td>
				<td>lightsteelblue</td>
				</tr>
				<tr>
				<td style="background:#b0e0e6;">#b0e0e6</td>
				<td>powderblue</td>
				</tr>
				<tr>
				<td style="background:#b22222; color:#FFF;">#b22222</td>
				<td>firebrick</td>
				</tr>
				<tr>
				<td style="background:#b8860b;">#b8860b</td>
				<td>darkgoldenrod</td>
				</tr>
				<tr>
				<td style="background:#ba55d3;">#ba55d3</td>
				<td>mediumorchid</td>
				</tr>
				<tr>
				<td style="background:#bc8f8f;">#bc8f8f</td>
				<td>rosybrown</td>
				</tr>
				<tr>
				<td style="background:#bdb76b;">#bdb76b</td>
				<td>darkkhaki</td>
				</tr>
				<tr>
				<td style="background:#c0c0c0;">#c0c0c0</td>
				<td>silver</td>
				</tr>
				<tr>
				<td style="background:#c71585;">#c71585</td>
				<td>mediumvioletred</td>
				</tr>
				<tr>
				<td style="background:#cd5c5c;">#cd5c5c</td>
				<td>indianred</td>
				</tr>
				<tr>
				<td style="background:#cd853f;">#cd853f</td>
				<td>peru</td>
				</tr>
				<tr>
				<td style="background:#d2691e;">#d2691e</td>
				<td>chocolate</td>
				</tr>
				<tr>
				<td style="background:#d2b48c;">#d2b48c</td>
				<td>tan</td>
				</tr>
				<tr>
				<td style="background:#d3d3d3;">#d3d3d3</td>
				<td>lightgray</td>
				</tr>
				<tr>
				<td style="background:#d3d3d3;">#d3d3d3</td>
				<td>lightgrey</td>
				</tr>
				<tr>
				<td style="background:#d8bfd8;">#d8bfd8</td>
				<td>thistle</td>
				</tr>
				<tr>
				<td style="background:#da70d6;">#da70d6</td>
				<td>orchid</td>
				</tr>
				<tr>
				<td style="background:#daa520;">#daa520</td>
				<td>goldenrod</td>
				</tr>
				<tr>
				<td style="background:#db7093;">#db7093</td>
				<td>palevioletred</td>
				</tr>
				<tr>
				<td style="background:#dc143c;">#dc143c</td>
				<td>crimson</td>
				</tr>
				<tr>
				<td style="background:#dcdcdc;">#dcdcdc</td>
				<td>gainsboro</td>
				</tr>
				<tr>
				<td style="background:#dda0dd;">#dda0dd</td>
				<td>plum</td>
				</tr>
				<tr>
				<td style="background:#deb887;">#deb887</td>
				<td>burlywood</td>
				</tr>
				<tr>
				<td style="background:#e0ffff;">#e0ffff</td>
				<td>lightcyan</td>
				</tr>
				<tr>
				<td style="background:#e6e6fa;">#e6e6fa</td>
				<td>lavender</td>
				</tr>
				<tr>
				<td style="background:#e9967a;">#e9967a</td>
				<td>darksalmon</td>
				</tr>
				<tr>
				<td style="background:#ee82ee;">#ee82ee</td>
				<td>violet</td>
				</tr>
				<tr>
				<td style="background:#eee8aa;">#eee8aa</td>
				<td>palegoldenrod</td>
				</tr>
				<tr>
				<td style="background:#f08080;">#f08080</td>
				<td>lightcoral</td>
				</tr>
				<tr>
				<td style="background:#f0e68c;">#f0e68c</td>
				<td>khaki</td>
				</tr>
				<tr>
				<td style="background:#f0f8ff;">#f0f8ff</td>
				<td>aliceblue</td>
				</tr>
				<tr>
				<td style="background:#f0fff0;">#f0fff0</td>
				<td>honeydew</td>
				</tr>
				<tr>
				<td style="background:#f0ffff;">#f0ffff</td>
				<td>azure</td>
				</tr>
				<tr>
				<td style="background:#f4a460;">#f4a460</td>
				<td>sandybrown</td>
				</tr>
				<tr>
				<td style="background:#f5deb3;">#f5deb3</td>
				<td>wheat</td>
				</tr>
				<tr>
				<td style="background:#f5f5dc;">#f5f5dc</td>
				<td>beige</td>
				</tr>
				<tr>
				<td style="background:#f5f5f5;">#f5f5f5</td>
				<td>whitesmoke</td>
				</tr>
				<tr>
				<td style="background:#f5fffa;">#f5fffa</td>
				<td>mintcream</td>
				</tr>
				<tr>
				<td style="background:#f8f8ff;">#f8f8ff</td>
				<td>ghostwhite</td>
				</tr>
				<tr>
				<td style="background:#fa8072;">#fa8072</td>
				<td>salmon</td>
				</tr>
				<tr>
				<td style="background:#faebd7;">#faebd7</td>
				<td>antiquewhite</td>
				</tr>
				<tr>
				<td style="background:#faf0e6;">#faf0e6</td>
				<td>linen</td>
				</tr>
				<tr>
				<td style="background:#fafad2;">#fafad2</td>
				<td>lightgoldenrodyellow</td>
				</tr>
				<tr>
				<td style="background:#fdf5e6;">#fdf5e6</td>
				<td>oldlace</td>
				</tr>
				<tr>
				<td style="background:#ff0000;">#ff0000</td>
				<td>red</td>
				</tr>
				<tr>
				<td style="background:#ff00ff;">#ff00ff</td>
				<td>fuchsia ou magenta</td>
				</tr>
				<tr>
				<td style="background:#ff1493;">#ff1493</td>
				<td>deeppink</td>
				</tr>
				<tr>
				<td style="background:#ff4500;">#ff4500</td>
				<td>orangered</td>
				</tr>
				<tr>
				<td style="background:#ff6347;">#ff6347</td>
				<td>tomato</td>
				</tr>
				<tr>
				<td style="background:#ff69b4;">#ff69b4</td>
				<td>hotpink</td>
				</tr>
				<tr>
				<td style="background:#ff7f50;">#ff7f50</td>
				<td>coral</td>
				</tr>
				<tr>
				<td style="background:#ff8c00;">#ff8c00</td>
				<td>darkorange</td>
				</tr>
				<tr>
				<td style="background:#ffa07a;">#ffa07a</td>
				<td>lightsalmon</td>
				</tr>
				<tr>
				<td style="background:#ffa500;">#ffa500</td>
				<td>orange</td>
				</tr>
				<tr>
				<td style="background:#ffb6c1;">#ffb6c1</td>
				<td>lightpink</td>
				</tr>
				<tr>
				<td style="background:#ffc0cb;">#ffc0cb</td>
				<td>pink</td>
				</tr>
				<tr>
				<td style="background:#ffd700;">#ffd700</td>
				<td>gold</td>
				</tr>
				<tr>
				<td style="background:#ffdab9;">#ffdab9</td>
				<td>peachpuff</td>
				</tr>
				<tr>
				<td style="background:#ffdead;">#ffdead</td>
				<td>navajowhite</td>
				</tr>
				<tr>
				<td style="background:#ffe4b5;">#ffe4b5</td>
				<td>moccasin</td>
				</tr>
				<tr>
				<td style="background:#ffe4c4;">#ffe4c4</td>
				<td>bisque</td>
				</tr>
				<tr>
				<td style="background:#ffe4e1;">#ffe4e1</td>
				<td>mistyrose</td>
				</tr>
				<tr>
				<td style="background:#ffebcd;">#ffebcd</td>
				<td>blanchedalmond</td>
				</tr>
				<tr>
				<td style="background:#ffefd5;">#ffefd5</td>
				<td>papayawhip</td>
				</tr>
				<tr>
				<td style="background:#fff0f5;">#fff0f5</td>
				<td>lavenderblush</td>
				</tr>
				<tr>
				<td style="background:#fff5ee;">#fff5ee</td>
				<td>seashell</td>
				</tr>
				<tr>
				<td style="background:#fff8dc;">#fff8dc</td>
				<td>cornsilk</td>
				</tr>
				<tr>
				<td style="background:#fffacd;">#fffacd</td>
				<td>lemonchiffon</td>
				</tr>
				<tr>
				<td style="background:#fffaf0;">#fffaf0</td>
				<td>floralwhite</td>
				</tr>
				<tr>
				<td style="background:#fffafa;">#fffafa</td>
				<td>snow</td>
				</tr>
				<tr>
				<td style="background:#ffff00;">#ffff00</td>
				<td>yellow</td>
				</tr>
				<tr>
				<td style="background:#ffffe0;">#ffffe0</td>
				<td>lightyellow</td>
				</tr>
				<tr>
				<td style="background:#fffff0;">#fffff0</td>
				<td>ivory</td>
				</tr>
				<tr>
				<td style="background:#ffffff;">#ffffff</td>
				<td>white</td>
				</tr>
			</tbody>
		</table>
	</section>
 
</body>
</html>