Couleurs dans CSS

Les couleurs jouent un rôle très important dans la conception d'une page Web. Dans les couleurs CSS, sont les plus fréquemment utilisés pour colorer l'arrière-plan, le texte et la bordure. Ici, le point est de savoir comment définir / définir la couleur dans CSS?

Bien! Dans les couleurs CSS, peuvent être définies à travers diverses méthodes telles que l'utilisation de noms de couleurs prédéfinis, de valeurs hexadécimales, etc. Cet article discutera des méthodes suivantes pour définir la couleur d'arrière-plan, la couleur du texte et les couleurs de la bordure:

• Noms de couleur prédéfinis tels que le rouge, le vert, l'orange, etc.
• Valeurs de couleurs hexadécimales telles que #rrggbb, # 00FF00, etc.
• Valeurs de couleur RVB telles que RVB (255, 0, 0); RVB (0, 255, 255), etc.
• Valeurs de couleurs RGBA telles que RVB (255, 255, 0, 0.7), RVB (255, 0, 0, 0.1), etc.
• Valeurs de couleur HSL telles que HSL (0, 100%, 50%), HSL (240, 100%, 50%), etc
• Valeurs de couleurs HSLA telles que HSL (0, 100%, 50%, 0.5), HSL (240, 100%, 50%, 0.2), etc

Toutes les conventions de couleurs mentionnées ci-dessus seront discutées avec des exemples. Alors, commençons ce voyage avec les noms de couleurs prédéfinies.

Noms de couleurs prédéfinies CSS

CSS fournit de nombreux noms de couleurs prédéfinis par exemple rouge, jaune, vert, etc. Ces noms de couleurs peuvent être utilisés pour styliser l'arrière-plan, le texte, etc.

Comprenons le concept des noms de couleurs prédéfinis en utilisant l'exemple donné ci-dessous

Exemple

Disons que nous avons un

élément et nous voulons styliser sa couleur de texte en utilisant des valeurs de couleur prédéfinies:

Html

Bienvenue à Linuxhint.com

CSS

p
Couleur bleue;

Attribuez simplement le nom de couleur à la propriété Color et en conséquence vous obtiendrez la sortie suivante:

Couleur hexadécimale CSS

Les couleurs hexadécimales sont définies par un «#”Symbole avec code à six chiffres. Il prend des valeurs de 0 à 15, mais les 10 seront représentés avec A, 11 avec B, et ainsi de suite jusqu'à 15 qui seront spécifiés avec F.

Puisque l'hexadécimal est un code à six chiffres I.E # E3E3E3, les deux premières créneaux pour la couleur rouge, les deux suivants pour le vert et les deux derniers pour la couleur bleue. La combinaison de ces six chiffres spécifie une nouvelle couleur e.g. # FFFF00 représente la couleur jaune.

Exemple

Les lignes fournies ci-dessous définiront la couleur du fond vert sur

élément utilisant des valeurs hexadécimales:

Html

Bienvenue à Linuxhint.com

CSS

p
Color d'arrière-plan: # 00FF00;

Le code ci-dessus fournit la sortie suivante:

Couleur CSS RVB

La couleur RVB est une combinaison de rouge, vert et bleu. La fonction RGB () prend des valeurs de 0 à 255. La spécification des différentes valeurs dans la fonction RGB () se traduit par diverses combinaisons de couleurs. Par exemple, RVB (255, 0, 0) générera la couleur rouge.

Exemple

Le morceau de code suivant spécifie la valeur RVB pour définir la couleur du texte gris du paragraphe:

Html

Bienvenue à Linuxhint.com

CSS

p
Color en arrière-plan: RVB (128, 128, 128);

La sortie définit la couleur de l'arrière-plan gris:

Couleur CSS RGBA

Le facteur de transparence peut être ajouté aux couleurs RVB en ajoutant la valeur alpha. Le paramètre alpha prend les valeurs entre 0 et 1. La valeur inférieure rend la couleur transparente tandis que la valeur supérieure rend la couleur opaque. Par exemple, ajoutant 0.0 rendra la couleur transparente, tandis que 1.0 rendra la couleur entièrement opaque.

Exemple

Ajoutons le paramètre alpha dans l'exemple ci-dessus.

Html

Bienvenue à Linuxhint.com

CSS

p
Color en arrière-plan: RGBA (128, 128, 128, 0.2);

Dans le code ci-dessus 0.2 est ajouté comme la valeur du paramètre alpha qui rend la couleur d'arrière-plan transparente:

Couleur CSS HSL

HSL est un acronyme de teinte, de saturation et de légèreté.

• Le terme teinte définit l'ange à l'intérieur de la roue chromatique.
• La saturation définit l'intensité de la couleur.
• La légèreté spécifie les niveaux de légèreté.

La légèreté et la saturation seront représentées par le signe%.

Exemple

Colorons l'arrière-plan de

élément utilisant des valeurs de couleur HSL.

Html

Bienvenue à Linuxhint.com

CSS

p
Color en arrière-plan: HSL (334, 80%, 56%);

Le code ci-dessus définira l'arrière-plan rose du

élément.

Couleur CSS HSLA

La convention HSL Color peut être étendue au HSLA. Le A représente le paramètre alpha qui est utilisé pour ajouter les effets de transparence sur la couleur.

Exemple

Étendons un peu l'exemple précédent et ajoutons également le paramètre alpha:

Html

Bienvenue à Linuxhint.com

CSS

p
Color en arrière-plan: HSL (334, 80%, 56%, 0.3);

Le code ci-dessus affichera la sortie suivante:

Conclusion

CSS fournit plusieurs couleurs et méthodes pour définir la couleur d'un élément comme les noms de couleur prédéfinis, la combinaison de valeurs comprises entre 0 et 255 dans le RGB (), ou les valeurs pour la teinte, la saturation et la lumière peuvent être utilisées. De plus, un paramètre alpha peut être utilisé avec RVB et HSL pour ajouter l'effet de transparence sur la couleur. Cet article a présenté un aperçu complet et élaboré des couleurs CSS et différentes méthodes pour définir les couleurs dans CSS.