Couleur de Fond HTML

Sites Web d'aujourd'hui sont plus audacieux et plus brillante que jamais, et avec ce tutoriel rapide, vous pouvez aussi apprendre comment égayer votre site Web avec un certain HTML couleur de fond de magie, en utilisant des codes Hex de couleurs, des noms de couleur HTML, les valeurs RGB et HSL.

La couleur de fond en utilisant des codes de couleurs Hex

Coloriage un fond de page web est en fait assez simple. Le premier et le plus populaire moyen est d'utiliser un code de couleur Hex avec la propriété background-color. Ici, nous appliquons une couleur Hex directement sur le HTML <body> en utilisant l'attribut de style. 

HTML

<body style="background-color:#FF0000;">
</body>
Démo sur Codepen

Cette même méthode peut être utilisée pour coiffer à peu près tout élément HTML, mais garder à l'esprit leur comportement peut différer selon qu'ils sont des éléments en ligne ou niveau bloc. Utilisez nos sélecteur de couleur ou de tableaux de couleur pour trouver un code de couleur Hex.

La couleur de fond en utilisant des noms de couleur HTML

Codes de couleur Hex peut être le plus populaire, mais ils sont juste une des nombreuses méthodes disponibles pour colorer un élément HTML. Une deuxième façon consiste à utiliser un nom de couleur HTML; il suffit de remplacer le code Hex avec l'un des 140 noms de couleurs pris en charge et vous êtes bon pour aller. 

HTML

<body style="background-color:red;">
</body>
Démo sur Codepen

Voici une liste utile de toutes les 140 noms de couleur HTML noms avec leurs valeurs Hex et RGB correspondant pour référence.

La couleur de fond en utilisant les valeurs des couleurs RGB

Valeurs RGB peuvent également être utilisés pour ajouter une couleur de fond à éléments HTML. En utilisant le même attribut de style comme avant, remplacez le code Hex ou le nom de la couleur avec une valeur RGB correctement formaté (assurez-vous de l'entourer de parenthèses et précéder par une minuscule 'rgb'). 

HTML

<body style="background-color:rgb(255,0,0);">
</body>
Démo sur Codepen

Lorsque vous utilisez les valeurs RGB en HTML vous avez la possibilité supplémentaire de spécifier le niveau d'opacité. Avec le préfixe rgba() – le «a» se dresse pour l'alpha, le canal qui contrôle la transparence – vous pouvez insérer une quatrième valeur entre 0 et 1, 0 pour entièrement transparent et 1 pour totalement opaques (utilisation des valeurs décimales pour les niveaux entre les deux). 

HTML

<body style="background-color:rgba(255,0,0,0.5);">
</body>
Démo sur Codepen

La couleur de fond en utilisant des valeurs de couleur HSL

Moins populaire, mais tout aussi puissante, les valeurs HSL sont désormais pris en charge par de nombreux navigateurs modernes. Si vous n'êtes pas familier avec HSL (qui signifie Hue, saturation et luminosité) tête sur plus de Wikipédia pour un aperçu de pourquoi ils sont tellement génial. Si vous voulez juste de les utiliser pour une couleur d'arrière-plan HTML, suivez la même syntaxe que les valeurs RGB ci-dessus, mais en utilisant à la place le préfixe hsl(). 

HTML

<body style="background-color:hsl(0,100%,50%);">
</body>
Démo sur Codepen

Comme leurs frères RGB, HSL peut également être transmis d'un canal alpha pour contrôler l'opacité. Utilisez le préfixe hsla() et insérez une quatrième valeur entre 0 et 1. 

HTML

<body style="background-color:hsla(0,100%,50%,0.5);">
</body>
Démo sur Codepen