Couleurs HTML | RVB, Hex, HSL a expliqué

Les couleurs HTML améliorent l'apparence de la page Web. Dans les couleurs HTML peut être spécifiée pour n'importe quel élément utilisant l'attribut de style. Lorsque nous parlons de couleurs HTML, le «couleur" et "Couleur de l'arrière plan«Les propriétés sont utilisées assez souvent dans l'attribut de style HTML pour définir la couleur du texte et la couleur d'arrière-plan d'un élément HTML.

Cet article montrera comment ajouter des couleurs à un élément / document HTML. Il fournira un aperçu général des conventions en couleur de base comme «noms de couleurs», «valeurs RVB», «valeurs hexadécimales», etc. Alors, commençons!

Noms de couleurs HTML

La première façon d'implémenter les couleurs HTML est simplement d'utiliser le nom de couleur i.e. Mots anglais pour la couleur comme le vert, le jaune, le rouge, etc. HTML prend en charge plus d'une centaine de noms de couleurs standard.

Exemple

Supposons que nous ayons un paragraphe dans notre HTML:

Un paragraphe

Pour lui donner une couleur, disons le vert, nous pouvons faire ceci:

Un paragraphe

Couleur hexadécimale HTML

HTML prend en charge une autre façon d'ajouter des couleurs I.e. les valeurs hexadécimales. Les valeurs hexadécimales peuvent être écrites à l'aide de seize chiffres 0-9 et A-F. Il est déterminé par un «#”Symbole suivi de trois ou six chiffres. Par exemple: #Rrggbb. Ici, les deux premiers emplacements représentent le rouge, les deux emplacements adjacents montrent le vert et les deux derniers montrent la valeur bleue.

Exemple

Supposons que nous ayons un paragraphe dans notre HTML:

Un paragraphe

Cette fois, nous essaierons de définir la couleur d'arrière-plan de

Tag à gris à l'aide de valeurs hexadécimales et nous pouvons le faire en utilisant le code HTML de ligne suivant:

Un paragraphe

Dans le code ci-dessus, «# e3e3e3» est le code hexagonal de couleur gris.

Les valeurs hexadécimales peuvent être écrites en utilisant seulement trois chiffres au lieu de six chiffres. Par exemple, la valeur hexadécimale # F00 produira la même couleur que # FF0000.

Couleurs HTML RVB

Une autre méthode la plus fréquemment utilisée pour les couleurs est les valeurs RVB. Il faut trois valeurs i.e. Rouge, vert et bleu. Au lieu d'utiliser les étranges numéros hexadécimaux, la propriété RVB utilise des nombres de 0 à 255. Ces nombres déterminent l'intensité de chaque paramètre de couleur, par exemple, pour utiliser la couleur noire définir tous les paramètres sur 0 i.e. RVB (0, 0, 0). Le RVB (0, 0, 255) affichera la couleur bleue et ainsi de suite.

Exemple

Prenons le même paragraphe:

Un paragraphe

Maintenant, nous allons essayer de définir sa couleur d'arrière-plan sur Orange en utilisant les valeurs RVB et nous pouvons le faire en utilisant le code HTML de ligne suivant:

Un paragraphe

Dans le code ci-dessus, «RVB (255, 165, 0)» est les valeurs RVB pour la couleur orange.

Couleurs HTML RGBA

Les valeurs RGBA sont une extension des valeurs de couleur RGB où «UN»Représente le canal alpha qui spécifie l'opacité d'une couleur. Un paramètre alpha est un nombre entre 0 (transparent) et 1 (opaque).

Exemple

Cet exemple montre comment le paramètre alpha "UN«Sera spécifié:

Un paragraphe

Le code donné ci-dessus a implémenté le paramètre alpha sur

élément. Maintenant, le résultat sera en fonction de la quantité de transparence comme indiqué dans la sortie suivante:

Couleurs HTML HSL

HTML fournit une autre convention de couleur I.E HSL détermine une couleur avec sa teinte, sa saturation et sa lumière. Éventuellement, il peut également avoir un paramètre alpha.

• Le terme teinte détermine un ange dans la roue chromatique e.g. 0 ou 360 degrés représentent la couleur rouge, de même, les couleurs restantes sont séparées autour du cercle. Par exemple, le vert est égal à 120 degrés, le cyan est égal à 180 degrés, etc.
• Tandis que la deuxième valeur en HSL est la saturation qui détermine l'intensité de la couleur et est représentée par un% de signe.
• La troisième valeur est la légèreté qui détermine les niveaux de légèreté représentés par le signe%.

Par exemple, cent pour cent signifie la pleine lumière i.e. blanc tandis que zéro pour cent signifie pas de lumière i.e. noir, et ainsi de suite.

Exemple

Le script ci-dessous implémentera la convention HSL Color sur différents éléments HTML:

Un paragraphe

Nous obtiendrons la sortie suivante pour le code ci-dessus:

Conclusion

HTML fournit plusieurs conventions en couleur pour définir la couleur du texte, la couleur d'arrière-plan, etc. Il existe quatre façons de colorer un élément HTML: nom de couleur, valeurs RVB, valeurs hexadécimales et valeurs HSL. Pour définir la couleur à l'aide de «Nom de couleur», spécifiez le nom de la couleur i.e. Rouge, Vert. Pour RVB, combinez les valeurs de couleur rouge, vert et bleu entre 0 et 255. Pour la couleur hexadécimale, écrivez un code couleur à trois ou six chiffres. Pour HSL, définissez les valeurs de teinte, de saturation et de lumière.