Tutoriel CSS - sommaire

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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 -->

Pendant longtemps les navigateurs ne connaissaient que 16 mots clés de couleurs. Maintenant c'est 148 !

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

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 que vous révisiez le code HTML relatif aux tableaux de données.

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

Les navigateurs récents reconnaissent 148 mots clés de couleurs.

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

Vous trouverez dans ce même tuto toutes les nouveautés apportées par la version 3 en matière de notation des couleurs : RGBA, HSL et HSLA.