Modifier la couleur d'un texte ou d'un élément

[Shadow]

Modifier la couleur d'un texte ou d'un élément

La personnalisation d'un thème de forum Forumactif passe nécessairement par la gestion des couleurs. Dans cette astuce, nous présentons différentes méthodes pour changer la couleur d'un texte ou d'un élément. Le nom des couleurs La première méthode (le plus simple) pour changer la couleur d'un texte ou d'un élément est d'utiliser son nom. Actuellement, 140 couleurs sont référencées par un nom et supportées par les navigateurs récents [source]. Toutefois, cette méthode est limitée en termes de teintes disponibles. Démonstration de noms de couleurs démo Red démo Yellow démo Green démo Blue . . . démo FireBrick démo Gold démo Teal démo SkyBlue . . . . . . . . . . . . . . . . . .  Liste détaillée des noms de couleurs Exemple n°1 en BBcode : Code: [color=teal]Forumactif[/color] Exemple n°2 en HTML : Code: <span style="color:blue">Forumactif</span> Exemple n°3 en CSS : Code: .classe {   color: red; } Le code hexadécimal des couleurs Les couleurs peuvent être définies par un code hexadécimal (HEX) composé du caractère # suivi de trois nombres encodés en base hexadécimale (un octet en base 16, ce qui équivaut à 256 valeurs possibles, de 00 à FF -ce qui équivaut à 0 à 255 en base 10 "classique") représentant respectivement les niveaux de rouge, vert et bleu de la couleur. Ainsi, la syntaxe de codage d'une couleur HEX est la suivante : #XXXXXX Démonstration des codes HEX des couleurs démo #FF0000 démo #FFFF00 démo #008000 démo #0000FF . . . démo #B22222 démo #FFD700 démo #008080 démo #87CEEB . . . . . . . . . . . . . . . . . .  Liste détaillée des noms de couleurs  Sélecteur de couleurs Exemple n°1 en BBcode : Code: [color=#008080]Forumactif[/color] Exemple n°2 en HTML : Code: <span style="color:#0000FF">Forumactif</span> Exemple n°3 en CSS : Code: .classe {   color: #FF0000; } Au total, la notation hexadécimale permet donc de définir une couleur parmi 16 777 216 possibilités (256 au cube). C'est pourquoi de nombreux sélecteurs de couleur sont disponibles. Le code RGB et RGBA des couleurs Le code RGB des couleurs A l'instar du code hexadécimal des couleurs, le code RGB (Red, Green, Blue) ou RVB en français (Rouge, Vert, Bleu) se définit sous la forme des trois nombres compris entre 0 et 255, représentant le niveau de chacune des trois couleurs primaires (dans l'ordre, rouge, vert, et bleu) afin d'obtenir la couleur désirée. Démonstration des codes RGB des couleurs démo rgb(255, 0, 0) démo rgb(255, 255, 0) démo rgb(0, 128, 0) démo rgb(0, 0, 255) . . . démo rgb(178, 34, 34) démo rgb(255, 215, 0) démo rgb(0, 128, 128) démo rgb(135, 206, 235) . . . . . . . . . . . . . . . . . .  Liste détaillée des noms de couleurs  Sélecteur de couleurs Exemple n°1 en BBcode :  L'utilisation du code RGB n'est pas possible avec les balises BBcodes. Exemple n°2 en HTML : Code: <span style="color:rgb(0, 0, 255);">Forumactif</span> Exemple n°3 en CSS : Code: .classe {   color: rgb(255, 0, 0); } A noter qu'il est possible de convertir une couleur RGB en code couleur HEX (et vice-versa). De nombreux sélecteurs permettent de le faire comme celui-ci. Le code RGBA des couleurs Le code couleur RGBA se présente de la même manière que le code couleur RGB en gérant en plus, la transparence (Alpha en anglais). La transparence est gérée par une valeur comprise entre 0 (transparent) et 1 (opaque). Exemple n°1 en BBcode :  L'utilisation du code RGBA n'est pas possible avec les balises BBcodes. Exemple n°2 en HTML : Code: <span style="color:rgba(0, 0, 255, 0.2);">Forumactif</span> Exemple n°3 en CSS : Code: .classe {   color: rgba(255, 0, 0, 0.7); } Le code HSL et HSLA des couleurs Le code HSL des couleurs Similaire à la syntaxe du code RGB des couleurs, le code HSL (Hue (Teinte), Saturation (Saturation), Lightness (Luminosité)) se définit sous la forme de trois couples de nombres. La teinte est une valeur comprise entre 0 et 360 alors que la saturation et la luminosité sont des valeurs comprises entre 0 et 100, exprimées en pourcentage. Démonstration des codes HSL des couleurs démo hsl(0, 100%, 50%) démo hsl(60, 100%, 50%) démo hsl(120, 100%, 25%) démo hsl(240, 100%, 50%) . . . démo hsl(0, 68%, 42%) démo hsl(51, 100%, 50%) démo hsl(180, 100%, 25%) démo hsl(197, 71%, 73%) . . . . . . . . . . . . . . . . . .  Liste détaillée des noms de couleurs  Sélecteur de couleurs Exemple n°1 en BBcode :  L'utilisation du code HSL n'est pas possible avec les balises BBcodes. Exemple n°2 en HTML : Code: <span style="color:hsl(240, 100%, 50%);">Forumactif</span> Exemple n°3 en CSS : Code: .classe {   color: hsl(0, 100%, 50%); } Le code HSLA des couleurs A l'instar du code couleur RGB, il est possible de gérer la transparence (Alpha en anglais). La transparence est gérée par une valeur comprise entre 0 (transparent) et 1 (opaque). Exemple n°1 en BBcode :  L'utilisation du code HSLA n'est pas possible avec les balises BBcodes. Exemple n°2 en HTML : Code: <span style="color:hsla(240, 100%, 50%, 0.2);">Forumactif</span> Exemple n°3 en CSS : Code: .classe {   color: hsla(0, 100%, 50%, 0.5); } Le code HWB des couleurs Le code couleur HWB (Hue (Teinte), White (Blanc), Black (Noir)) se définit sous la forme de trois couples de nombres. La teinte est une valeur positive (ou négative) d'une unité d'angle du cercle chromatique des couleurs. Le blanc et le noir sont des valeurs comprises entre 0 et 100, exprimées en pourcentage (le symbole pourcentage est obligatoire même si la valeur est égale à 0). A noter que les couples de nombres ne sont pas séparés par des virgules. Démonstration des codes HWB des couleurs démo hwb(0 0% 0%) démo hwb(60 0% 0%) démo hwb(120 0% 50%) démo hwb(240 0% 0%) . . . démo hwb(0 13% 30%) démo hwb(51 0% 0%) démo hwb(180 0% 50%) démo hwb(197 53% 8%) . . . . . . . . . . . . . . . . . .  Convertir une couleur HEX en HWB  Convertir une couleur RGB en HWB Exemple n°1 en BBcode :  L'utilisation du code HWB n'est pas possible avec les balises BBcodes. Exemple n°2 en HTML : Code: <span style="color:hwb(0 0% 0%);">Forumactif</span> Exemple n°3 en CSS : Code: .classe {   color: hwb(240 0% 0%); } Il est également possible de gérer la transparence de la couleur en ajoutant un quatrième couple de valeur, compris entre 0 (transparence) et 1 (opacité). A noter qu'il est possible d'exprimer la transparence en pourcentage (0% - transparence et 100% (opacité). Cette quatrième valeur doit être précédée d'ne barre oblique / si elle est fournie. Exemple n°1 en HTML : Code: <span style="color:hwb(0 0% 0% / 0.5);">Forumactif</span> Exemple n°2 en CSS : Code: .classe {   color: hwba(240 0% 0% / 10%); }

Cette astuce a été rédigée par l'équipe Forumactif. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.