Les couleurs

Nous allons maintenant voir comment modifier la couleur des textes.

Les couleurs par mot-clé

La première méthode consite à entrer le nom de couleur, avec un mot clé.
C'est celle que j'utilise depuis le début du cours pour mes exemples :

				
					p{
						color: red;
					}
				
			

Cette méthode est limitée aux mots-clés déinis par le W3C et n'est donc pas très précise. En tant que graphiste, nous n'allons pas beaucoup l'utiliser.

Les couleurs hexadécimales

La seconde méthode consiste à entrer la valeur d'une couleur en hexadécimal.
Elle consiste en une série de 6 chiffres ou lettres, précédée par un # :

				
					p{
						color: #007890;
					}
				
			

Le bleu PUShAUNE

Avec cette méthode, nous avons donc 16 777 216 couleurs disponibles, ce qui est bien mieux :)

Les couleurs rgb() et rgba()

La troisième méthode consiste à entrer directement les valeurs RGB (Red, Green, Blue) :

				
					p{
						color: rgb(0, 120, 144);
					}
				
			

Le bleu PUShAUNE en RGB

Il est possible d'ajouter une valeur de transparence, comprise entre 0 et 1.
Pour cela, il faut ajouter un a au rgb() et ajouter un quatrième chiffre :

				
					p{
						color: rgba(0, 120, 144, 0.78);
					}
				
			

Le bleu PUShAUNE en RGB avec 78% d'opacité

Les couleurs hsl() et hlsa()

Enfin, pour ceux qui sont plus à l'aise avec le HLS, il est possible de l'utiliser de la même manière que le RGB :

				
					/* HLS sans opacité */
					p{
						color: hls(0, 120, 144);
					}
					/* HLS avec opacité */
					p{
						color: hlsa(0, 120, 144, 0.78);
					}