Gérer la couleur des éléments CSS2 : fond, bordure, texte, etc.

Saisie manuelle d'une valeur

Si vous connaissez la valeur d'une couleur, vous pouvez l'entrer directement dans le champs de saisie :

une valeur hexa (ex : #00ff55 ➔ entrer #00ff55 ou #0f5) ;
un triplet RGB (ex : 0,150,255 ➔ entrer 0,150,255 ou rgb(0,150,255)) ;
une valeur RGBA : identique au mode RGB, mais avec une 4^e valeur précisant l'opacité alpha de la couleur.
(ex : rgba(0,150,255,0.6) ➔ entrer 0,150,255,0.6 ou rgb(0,150,255,0.6) ou rgba(0,150,255,0.6))
Remarque: vous pouvez également entrer une valeur RGBA sous la forme valeur hexa,opacité alpha : #00ff55,0.6.
une valeur HSL ou HSLa (ex : hsl(9,100%,64%)) ;

Choix du système de codage des couleurs

Passez par les préférences pour déterminer le mode d'enregistrement des couleurs : valeur hexadécimale, RGB ou HSL.

exemples rgba

texte bleu opaque sur fond jaune opacité 20%

texte opaque sur fond opaque

Saisie par un sélecteur de couleurs

Le bouton : choix des couleurs est divisé en 3 zones appelant des sélecteurs de couleur différents.

1 Palette HTML Styles

HTML Styles offre une palette de couleurs restreinte ^(*), mais permet d'accéder à toutes les valeurs nécessaires : cliquer une case colorée pour sélectionner une couleur, entrer une valeur hexa ou RGB dans le champs de saisie, modifier une couleur avec les curseurs RGB.

Il permet aussi de spécifier les 3 valeurs spéciales :

transparent : l'élément est invisible;
inherit : hériter couleur de l'élément parent;
none : aucune couleur.

(*) Il s'agit des couleurs Netscape, ensemble de couleurs conçu dans les années 90 pour être rendues de la même manière par tous les navigateurs et sur tous les systèmes. Chaque couleur possède un nom standard utilisable en lieu et place de son équivalent hexadécimal ou RGB. Les noms de couleur n'étant plus supportés par les outils de validation de feuilles de styles, HTML Styles traduit systématiquement le nom d'une couleur Netscape dans la valeur hexadécimale correspondante.

2 Sélecteur couleurs système

La zone appelle le sélecteur couleurs système :
Vous retrouvez les colorpickers Apple classiques : roue chromatique, crayons de cire, etc. Le sélecteur Windows NT: plus rudimentaire, tu meurs. Le sélecteur d'Ubuntu, pour les forts en maths.
Les valeurs de couleur spéciales (transparent, none, inherit) doivent être entrées manuellement.

3 Sélection d'un point d'image

HTML Styles affiche dans une fenêtre l'image choisie : cliquez alors le point de l'image dont vous voulez prélever la couleur.