Débuter en programmation web - sommaire

La notation des couleurs en CSS

Solutions anciennes

On argumente les propriétés background-color, color, border-color, etc de trois façons :
• le nom de la couleur (nom anglais)
• le code hexadécimal de la couleur
• le code RGB (ou RVB) de 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.

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

Ce tableau est aussi très utile pour réviser le système hexadécimal (ou base 16). Vous constatez que:
• 255 s'écrit FF en hexadécimal (16 fois 16 = 256)
• 128 s'écrit 80 en hexadécimal (8 fois 16 = 128)
• 192 s'écrit C0 en hexadécimal (12 (C) fois 16 = 192)

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%).

Le code correspondant

Il n'est peut-être pas inutile de rappeler comment j'ai produit ce code HTML.

Extrait du code 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 réalisé par quelques règles de style :

	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

La notation des couleurs - nouvelles techniques

Désormais il est possible d'exprimer les couleurs avec un code HSL.
Tant pour la notation RGB ou HSL il est possible d'ajouter un quatrième paramètre : la transparence. On parle alors de RGBA et de HSLA.

Ces différents outils de coloration sont évoquées dans des pages du tutoriel CSS3. Je vous communique les liens :
• Notation HSL des couleurs
• Intérêt de la notation RGBA ou HSLA des couleurs