Couleur en CSS

9.1 Méthodes pour définir la couleur en CSS

La couleur joue un rôle important dans le design et le développement web. En CSS, il existe plusieurs façons de définir la couleur qui permettent aux développeurs de créer des interfaces attrayantes et intuitives. Ci-dessous, nous examinerons les différentes méthodes pour définir les couleurs en CSS, y compris les modèles de couleurs, la transparence, les dégradés et les fonctions standard pour travailler avec la couleur.

Méthodes pour définir la couleur en CSS :

• Couleurs nommées
• Couleurs hexadécimales
• RGB et RGBA
• HSL et HSLA
• Dégradés
• Transparence

9.2 Modèle de couleur RGB

Le modèle RGB (Red Green Blue) définit la couleur par le mélange de rouge, vert et bleu. Chaque couleur est attribuée une valeur de 0 à 255.

Syntaxe :

    
      color: rgb(255, 0, 0); /* Rouge */
      color: rgb(0, 255, 0); /* Vert */
      color: rgb(0, 0, 255); /* Bleu */
    
  

Exemple :

    
      body {
        background-color: rgb(240, 248, 255); /* Couleur de fond : aliceblue */
      }
    
  

9.3 Modèle de couleur HEX

HEX (Hexadecimal) représente la couleur en utilisant des valeurs hexadécimales. Chaque valeur (RR, GG, BB) peut varier de 00 à FF.

Syntaxe :

    
      color: #ff0000; /* Rouge */
      color: #00ff00; /* Vert */
      color: #0000ff; /* Bleu */
    
  

Exemple :

    
      h1 {
        color: #4CAF50; /* Vert */
      }
    
  

9.4 Modèle de couleur HSL

HSL (Hue, Saturation, Lightness) représente la couleur en termes de teinte, saturation et luminosité. La teinte (Hue) est mesurée en degrés (0-360), la saturation (Saturation) et la luminosité (Lightness) sont mesurées en pourcentages (0%-100%).

Syntaxe :

    
      color: hsl(0, 100%, 50%); /* Rouge */
      color: hsl(120, 100%, 50%); /* Vert */
      color: hsl(240, 100%, 50%); /* Bleu */
    
  

Exemple :

    
      p {
        color: hsl(210, 100%, 50%); /* Bleu */
      }
    
  

9.5 Transparence : RGBA et HSLA

Pour ajouter de la transparence aux couleurs, on utilise les modèles RGBA et HSLA. Ces modèles ajoutent un quatrième paramètre — le canal alpha (Alpha), qui détermine le niveau de transparence de 0 (complètement transparent) à 1 (complètement opaque).

1. RGBA (Red, Green, Blue, Alpha):

Syntaxe :

    
      color: rgba(255, 0, 0, 0.5); /* Rouge semi-transparent */
      color: rgba(0, 255, 0, 0.3); /* Vert semi-transparent */
      color: rgba(0, 0, 255, 0.7); /* Bleu semi-transparent */
    
  

Exemple :

    
      div {
        background-color: rgba(255, 99, 71, 0.6); /* Couleur tomate semi-transparente */
      }
    
  

2. HSLA (Hue, Saturation, Lightness, Alpha):

Syntaxe :

    
      color: hsla(0, 100%, 50%, 0.5); /* Rouge semi-transparent */
      color: hsla(120, 100%, 50%, 0.3); /* Vert semi-transparent */
      color: hsla(240, 100%, 50%, 0.7); /* Bleu semi-transparent */
    
  

Exemple :

    
      span {
        color: hsla(210, 100%, 50%, 0.8); /* Bleu semi-transparent */
      }