Div Background Color – Comment modifier la couleur d’arrière-plan en CSS

Maël
Posted by Maël 20 mars 2022

Si vous travaillez sur un projet de développement Web, la définition d’une belle couleur d’arrière-plan peut donner au site Web un aspect plus attrayant.

Pour définir une couleur d’arrière-plan pour un div ou un élément connexe en CSS, vous utilisez la propriété background-color.

Lorsque vous définissez cette couleur d’arrière-plan, votre créativité est votre limite pour aller jusqu’au bout.

Dans cet article, je vais donc vous montrer comment vous pouvez définir cette couleur d’arrière-plan.

Comment définir la couleur d’arrière-plan avec des couleurs nommées

Avec les couleurs nommées, vous pouvez définir la couleur d’arrière-plan en faisant intervenir la propriété background-color et en lui attribuant une valeur exprimée par un nom de couleur comme rouge, vert, bleu, etc.

 div {
      fond : vert ;
    }

ss-1-1

Vous pouvez utiliser les styles suivants pour améliorer l’apparence de la page Web. Il suffit de définir une largeur et une hauteur pour la division, afin que la couleur d’arrière-plan prenne effet :

body {
   display : flex ;
   align-items : center ;
   justify-content : center ;
   hauteur : 100vh ;
   background-color : #d3d3d3 ;
 }

div {
   background : green ;
 }

Les navigateurs modernes reconnaissent environ 147 couleurs, vous êtes donc encore un peu limité.

Comment définir la couleur d’arrière-plan avec des couleurs hexadécimales ?

Avec les valeurs hexadécimales, vous pouvez définir une couleur d’arrière-plan pour un div ou tout autre élément avec un total de 6 caractères.

Les couleurs hexadécimales commencent par le signe dièse (#), un nombre quelconque de 0 à 9, et enfin une lettre quelconque de A à F.

Les deux premières valeurs représentent le rouge, les deux suivantes le vert et les deux dernières le bleu.

Avec les valeurs hexadécimales, vous pouvez vous plonger dans la roue des couleurs et même utiliser des couleurs que personne n’a jamais utilisées.

div {
   background : #2ecc71 ;
 }

ss-2-1

Vous pouvez en savoir plus sur les couleurs hexagonales ici.

Comment définir la couleur d’arrière-plan avec les couleurs RVB

RVB signifie rouge, vert et bleu.

Pour définir la couleur d’arrière-plan avec RGB, vous spécifiez la quantité de rouge, de vert et de bleu que vous souhaitez avec des nombres compris entre 0 et 255.

div {
      background : rgb(220, 20, 60) ;
    }

ss-3

RGB a également une variante appelée RGBA. Le dernier A signifie alpha et vous permet de déterminer le degré d’opacité de la couleur.

L’alpha prend une valeur comprise entre 0,0 et 1,0. 0.0 signifie une opacité de 0 %, 0,5 une opacité de 50 % et 1,0 une opacité de 100 %.

div {
    background : rgb(220, 20, 60, 0.6) ;
 }

ss-4

Vous pouvez en savoir plus sur les couleurs RVB ici.

Comment définir la couleur d’arrière-plan avec les couleurs HSL

HSL est l’abréviation de Hue, Saturation et Lightness. Il s’agit de la méthode la plus dynamique pour définir une couleur d’arrière-plan pour une division ou d’autres éléments.

    • Lateinte

représente la roue des couleurs sur 360°. 0° correspond au rouge, 120° au vert et 240° au bleu

    • Lasaturation

est la quantité de gris dans la couleur exprimée en pourcentages. 0% est la nuance de gris et 100% est la couleur elle-même.

  • Comme son nom l’indique, la clarté

est la quantité d’obscurité et de clarté dans la couleur exprimée en pourcentage. 0% est le noir et 100% le blanc.

div {
   background : hsl(16, 100%, 50%) ;
 }

ss-5

Conclusion

Puisque vous pouvez appliquer des couleurs de 4 manières différentes, vous devez vous demander laquelle vous devez utiliser.

Lorsque vous utilisez des couleurs nommées, vous êtes en quelque sorte limité dans l’application de différentes nuances de couleurs.

Chaque couleur comme le rouge, le vert, le bleu, le jaune ou toute autre couleur a beaucoup de variations auxquelles vous n’aurez pas accès avec les couleurs nommées.

Vous ne pouvez accéder qu’à environ 147 couleurs prédéfinies reconnues par les navigateurs.
Les couleurs hexadécimales, en revanche, sont très dynamiques. Elles sont surtout utilisées par les développeurs, et la créativité est la limite. Ces couleurs hexadécimales vous permettent d’utiliser différentes nuances d’une même couleur.

Les couleurs RVB sont aussi dynamiques que les couleurs hexadécimales. Vous pouvez spécifier la quantité de rouge, de vert et de bleu de 0 à 255, et vous pouvez également utiliser la valeur alpha ajoutée pour spécifier la transparence de la couleur.

HSL est le plus dynamique de tous. Vous pouvez spécifier exactement la couleur de 0 à 360 degrés dans la roue chromatique, définir la saturation et l’obscurité en pourcentage, et définir l’opacité à n’importe quelle valeur entre 0,0 et 1,0.

Le choix entre les couleurs nommées, hexagonales, RVB et LSH dépend donc de vous, de votre créativité et des besoins de votre projet.

Merci de votre lecture.