CSS et les couleurs

Trois techniques pour exprimer la couleur

On peut donc écrire (pour un fond jaune) :

background-color : yellow ou background-color : #FFFF00 ou background-color : rgb(255,255,0) ou background-color : rgb(100%,100%,0%)

Donc dans le cadre de la notation RGB on peut utiliser des pourcentages.

Les 16 couleurs de base

Pendant longtemps les navigateurs n'ont reconnu que les noms de 16 couleurs.

Les 16 couleurs de base par ordre alphabétique
nomcode hexadécimalcode RGBAperçu
aqua / cyan#00FFFF0,255,255
black#0000000,0,0
blue#0000FF0,0,255
fuchsia / magenta#FF00FF255,0,255
gray#808080128,128,128
green#0080000,128,0
lime#00FF000,255,0
maroon#800000128,0,0
navy#0000800,0,128
olive#808000128,128,0
purple#800080128,0,128
red#FF0000255,0,0
silver#C0C0C0192,192,192
teal#0080800,128,128
white#FFFFFF255,255,255
yellow#FFFF00255,255,0

Vous pouvez remarquez qu'il y a deux paires de synonymes.
Ainsi aqua et cyan désignent la même couleur.

Je rappelle que dans le cadre du code RGB vous pouvez manipuler des pourcentages. Ainsi pour exprimer la couleur teal vous pouvez écrire : rgb(0%,50%,50%).

Révisions sur la production de tableaux en HTML

Je vous communique ci-dessous deux extraits du code HTML & CSS correspondant au tableau des 16 couleurs de base afin de vous rappeler les balises à utiliser pour fabriquer un beau tableau HTML.

<table> <caption>Les 16 couleurs de base par ordre alphabétique</caption> <tr><th>nom</th><th>code hexadécimal</th><th>code RGB</th><th>Aperçu</th></tr> <tr><td>aqua / cyan</td><td>#00FFFF</td><td>0,255,255</td><td style ="background :rgb(0,255,255);" ></td></tr> <tr><td>black</td><td>#000000</td><td>0,0,0</td><td style ="background :rgb(0,0,0);" ></td></tr> <tr><td>blue</td><td>#0000FF</td><td>0,0,255</td><td style ="background :rgb(0%,0%,100%);" ></td></tr> ... <tr><td>white</td><td>#FFFFFF</td><td>255,255,255</td><td style ="background :rgb(255,255,255);" ></td></tr> <tr><td>yellow</td><td>#FFFF00</td><td>255,255,0</td><td style ="background :rgb(255,255,0);" ></td></tr> </table>

Le formatage est géré par des règles de style contenues dans la feuille de style externe :

table {width : 500px ; border : none ; margin : 10px auto 10px auto ; } caption {font-size : 110% ; color :navy; } td,th {border : 1px solid black ; } td {padding-left : 5px ; }

Déterminer le code RGB

J'ai mis au point une petite application qui permet d'obtenir le code RGB d'une couleur après avoir déterminé celle-ci grâce à une palette : la boîte à couleurs
Retour menu