Tutoriel CSS3 - sommaire

CSS2 : Notation des couleurs

Trois techniques pour exprimer la couleur jusqu'à la spécification CSS 2

On peut argumenter 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 <!--Notation par mot clé de couleur--> ou background-color : #FFFF00 <!--Notation par mot code héxadécimal--> ou background-color : rgb(255,255,0) <!--Notation RGB--> ou background-color : rgb(100%,100%,0%) <!--Notation RGB variante -->

Le code hexadécimal d'une couleur peut être exprimée de façon abrégée ; dans ce format chaque chiffre est doublé !
Ainsi au lieu d'écrire "#FF88CC" on peut écrire plus simplement "#F8C".

Donc dans le cadre de la notation RGB (Red, Green, Blue) les trois valeurs sont comprises entre 0 et 255.
Mais on peut exprimer ces trois valeurs en pourcentages.
Exemples : Noir = rbg(0%,0%,0%) ; rouge pur = rgb(100%,0%,0%).

Les 16 couleurs de base

Pendant longtemps les navigateurs n'ont reconnu que 16 noms de 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 (F fois 16 = 256)
• 128 s'écrit 80 en hexadécimal (8 fois 16 = 128)
• 192 s'écrit C0 en hexadécimal (C fois 16 = 192)

Amusez vous à déterminer le code hexadécimal simplifié.

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

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

Autres couleurs nommées

Remarque : ce que je vais dire dans ce paragraphe n'est pas du CSS 2 mais du CSS 3.
Les navigateurs récents (qui ont implémenté le module de couleurs niveau 3) reconnaissent 147 noms de couleurs.
Autant dire qu'il n'est plus nécessaire d'encoder en hexadécimal les couleurs.
par exemple, pour le gris vous avez 13 nuances de gris : silver, gray, darkgray, dimgray, slategray, etc.

Ci-dessous une liste non exhaustive de noms de couleurs compris des différents navigateurs récents.

Les navigateurs modernes supportent 140 couleurs nommées.
Ci-dessous deux liens pour les retrouver :
-couleurs nommées classées par type
-couleurs nommées classées par nom