6. Les Couleurs¶

Nous allons maintenant voir comment modifier la couleur des textes. Mais cela s'applique globalement à tous les éléments avec la propriété color:.

Les couleurs par mot-clé¶

La première méthode consiste à 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éfinis 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;
}

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);
}

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);
}

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);
}