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

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

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

Message par Shadow Ven 20 Fév 2015 - 15:38

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

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

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

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

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

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

Shadow
Modéractive
Modéractive

Féminin
Messages : 24354
Inscrit(e) le : 30/03/2007

Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum