Passer au contenu principal

Comprendre les couleurs Web 🎨

En créant un site Web, vous rencontrerez des codes étranges comme #FF5733, rgb(255, 87, 51). Ce sont tous des codes couleur ! Je vais vous expliquer de manière simple pour que même les débutants puissent comprendre.

Pourquoi utiliser des codes couleur ?​

Nous disons "rouge", "bleu", mais l'ordinateur a besoin de chiffres précis.

Par exemple :

  • Si on dit "rouge" : Quel rouge ? Rouge clair ? Rouge foncé ? 🤔
  • Si on dit #FF0000 : Rouge exact ! ✅

3 façons d'exprimer les couleurs sur le Web​

1. Couleur HEX (Hexadécimal) 🔢​

C'est le format le plus courant !

color: #FF5733;
background: #3498db;

Format :

  • Commence par le symbole #
  • 6 chiffres/lettres (0-9, A-F)
  • Par paires : #RRVVBB
    • RR = Rouge (Red)
    • VV = Vert (Green)
    • BB = Bleu (Blue)

Exemples :

#FF0000  →  Rouge (Red maximum)
#00FF00  →  Vert (Green maximum)
#0000FF  →  Bleu (Blue maximum)
#FFFFFF  →  Blanc (toutes les couleurs maximum)
#000000  →  Noir (toutes les couleurs 0)

2. Couleur RGB 🎨​

Exprimé en quantité de Rouge (Red), Vert (Green), Bleu (Blue) !

color: rgb(255, 87, 51);
background: rgb(52, 152, 219);

Format :

  • rgb(rouge, vert, bleu)
  • Chaque chiffre entre 0~255

Exemples :

rgb(255, 0, 0)     →  Rouge
rgb(0, 255, 0)     →  Vert
rgb(0, 0, 255)     →  Bleu
rgb(255, 255, 255) →  Blanc
rgb(0, 0, 0)       →  Noir
rgb(128, 128, 128) →  Gris

Ajout de transparence (RGBA) :

rgba(255, 0, 0, 0.5)  →  Rouge semi-transparent
             ↑
        0.0 ~ 1.0 (transparent ~ opaque)

3. Couleur HSL 🌈​

La façon la plus facile à comprendre pour les humains !

color: hsl(9, 100%, 60%);
background: hsl(204, 70%, 53%);

Format :

  • hsl(teinte, saturation, luminosité)
  • H (Hue) : Teinte (0~360 degrés)
  • S (Saturation) : Saturation (0~100%)
  • L (Lightness) : Luminosité (0~100%)

Roue des teintes (Hue) :

0° / 360°  →  Rouge
60°        →  Jaune
120°       →  Vert
180°       →  Cyan
240°       →  Bleu
300°       →  Magenta

Exemples :

hsl(0, 100%, 50%)    →  Rouge pur
hsl(120, 100%, 50%)  →  Vert pur
hsl(240, 100%, 50%)  →  Bleu pur
hsl(0, 0%, 50%)      →  Gris
hsl(0, 100%, 100%)   →  Blanc
hsl(0, 0%, 0%)       →  Noir

Comparaison des formats de couleur​

La même couleur exprimée de trois façons :

🔴 Rouge clair​

HEX:  #FF5733
RGB:  rgb(255, 87, 51)
HSL:  hsl(9, 100%, 60%)

🔵 Bleu​

HEX:  #3498db
RGB:  rgb(52, 152, 219)
HSL:  hsl(204, 70%, 53%)

🟢 Vert​

HEX:  #2ecc71
RGB:  rgb(46, 204, 113)
HSL:  hsl(145, 63%, 49%)

Quand utiliser quel format ?​

Utiliser HEX 📝​

  • Quand le designer donne des codes couleur (le plus courant)
  • Pour spécifier simplement des couleurs
  • Très utilisé dans les fichiers CSS
.button {
  background-color: #3498db;
  color: #ffffff;
}

Utiliser RGB 🎨​

  • Quand la transparence (alpha) est nécessaire
  • Quand on calcule des couleurs avec JavaScript
  • Quand on change dynamiquement les couleurs
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* Noir semi-transparent */
}

Utiliser HSL 🌈​

  • Quand on veut changer seulement la teinte
  • Quand on veut ajuster seulement la luminosité
  • Pour créer des couleurs de tons similaires
.primary {
  background: hsl(200, 70%, 50%);
}
.primary-light {
  background: hsl(200, 70%, 70%); /* Luminosité seule changée */
}
.primary-dark {
  background: hsl(200, 70%, 30%); /* Plus sombre */
}

Exemples pratiques​

Exemple 1 : Couleur de bouton 🔘​

/* Bouton bleu */
.button {
  background-color: #3498db;
  color: #ffffff;
}

/* Au survol de la souris */
.button:hover {
  background-color: #2980b9; /* Bleu un peu plus foncé */
}

Exemple 2 : Fond dégradé 🌅​

.gradient-bg {
  background: linear-gradient(
    to right,
    #667eea,   /* Violet */
    #764ba2    /* Magenta */
  );
}

Exemple 3 : Overlay semi-transparent 👻​

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.7); /* Noir 70% opaque */
}

Utiliser les outils couleur​

Convertir les couleurs​

Dans Color Converter :

  • Conversion HEX → RGB → HSL
  • Sélection de couleur avec le sélecteur
  • Copie dans différents formats

Utilisation :

  1. Ouvrir Color Converter
  2. Sélectionner la couleur souhaitée avec le sélecteur
  3. Génération automatique des codes HEX, RGB, HSL !
  4. Copier et utiliser le format nécessaire

Créer un dégradé CSS​

Dans Gradient Generator :

  • Dégradé avec 2 couleurs ou plus
  • Réglage de la direction
  • Génération automatique du code CSS

Conseils pour choisir les couleurs 💡​

1. Harmonie des couleurs​

Couleurs complémentaires (opposées) :

Rouge(0°) ↔ Cyan(180°)
Bleu(240°) ↔ Jaune(60°)

Couleurs analogues (similaires) :

hsl(200, 70%, 50%)  Bleu
hsl(210, 70%, 50%)  Bleu un peu plus violet
hsl(190, 70%, 50%)  Bleu un peu plus cyan

2. Contraste de luminosité​

Pour que le texte soit bien visible :

/* Bon contraste ✅ */
.good-contrast {
  background: #000000;  /* Noir */
  color: #ffffff;       /* Blanc */
}

/* Mauvais contraste ❌ */
.bad-contrast {
  background: #cccccc;  /* Gris clair */
  color: #ffffff;       /* Blanc - Difficile à voir ! */
}

3. Maintenir la cohérence​

Utiliser des couleurs similaires pour des éléments similaires :

/* Série de couleurs Primary */
.primary       { background: hsl(200, 70%, 50%); }
.primary-light { background: hsl(200, 70%, 70%); }
.primary-dark  { background: hsl(200, 70%, 30%); }

/* Série de couleurs Success */
.success       { background: hsl(120, 60%, 50%); }
.success-light { background: hsl(120, 60%, 70%); }
.success-dark  { background: hsl(120, 60%, 30%); }

Codes couleur fréquemment utilisés​

Couleurs de base​

Rouge :   #FF0000  rgb(255, 0, 0)    hsl(0, 100%, 50%)
Vert :    #00FF00  rgb(0, 255, 0)    hsl(120, 100%, 50%)
Bleu :    #0000FF  rgb(0, 0, 255)    hsl(240, 100%, 50%)
Jaune :   #FFFF00  rgb(255, 255, 0)  hsl(60, 100%, 50%)
Magenta : #FF00FF  rgb(255, 0, 255)  hsl(300, 100%, 50%)
Cyan :    #00FFFF  rgb(0, 255, 255)  hsl(180, 100%, 50%)

Couleurs achromatiques​

Blanc :       #FFFFFF  rgb(255, 255, 255)
Gris clair :  #CCCCCC  rgb(204, 204, 204)
Gris :        #808080  rgb(128, 128, 128)
Gris foncé :  #333333  rgb(51, 51, 51)
Noir :        #000000  rgb(0, 0, 0)

Couleurs populaires​

Bleu ciel : #87CEEB  rgb(135, 206, 235)
Rose :      #FFC0CB  rgb(255, 192, 203)
Orange :    #FFA500  rgb(255, 165, 0)
Violet :    #800080  rgb(128, 0, 128)
Or :        #FFD700  rgb(255, 215, 0)

Code HEX abrégé​

Si les mêmes chiffres se répètent, on peut abréger :

#FF0000  →  #F00   (Rouge)
#00FF00  →  #0F0   (Vert)
#0000FF  →  #00F   (Bleu)
#FFFFFF  →  #FFF   (Blanc)
#000000  →  #000   (Noir)
#CCCCCC  →  #CCC   (Gris)

Utiliser les noms de couleurs​

En CSS, on peut aussi utiliser des noms de couleurs :

color: red;
color: blue;
color: green;
color: white;
color: black;

Mais il vaut mieux utiliser des codes couleur précis !

Considérer l'accessibilité ♿​

Vérifier le rapport de contraste​

  • Texte normal : minimum 4.5:1
  • Texte grand : minimum 3:1

Bon exemple :

background: #000000;  /* Noir */
color: #FFFFFF;       /* Blanc - Contraste 21:1 */

Mauvais exemple :

background: #777777;  /* Gris */
color: #888888;       /* Gris légèrement plus clair - Contraste trop faible */

Pratique : Expérimenter avec les couleurs​

Pratique 1 : Même couleur, luminosité différente​

.color-1 { background: hsl(200, 70%, 20%); } /* Très sombre */
.color-2 { background: hsl(200, 70%, 40%); } /* Sombre */
.color-3 { background: hsl(200, 70%, 60%); } /* Normal */
.color-4 { background: hsl(200, 70%, 80%); } /* Clair */

Pratique 2 : Même luminosité, couleur différente​

.color-1 { background: hsl(0, 70%, 50%); }   /* Rouge */
.color-2 { background: hsl(120, 70%, 50%); } /* Vert */
.color-3 { background: hsl(240, 70%, 50%); } /* Bleu */
Astuce

Expérimentez en changeant directement les couleurs dans Color Converter !

Foire aux questions (FAQ)​

Q1 : Que signifient les chiffres et lettres dans HEX ?​

R : On utilise le système hexadécimal.

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
                                ↑
                        A=10, B=11 ... F=15

Q2 : Pourquoi RGB va jusqu'à 255 ?​

R : L'ordinateur exprime chaque couleur en 8 bits (0~255).

0 = Minimum (pas de couleur)
255 = Maximum (plein de couleur)

Q3 : Comment créer une couleur transparente ?​

R : Utilisez RGBA ou HSLA :

rgba(255, 0, 0, 0.5)   /* Rouge semi-transparent */
hsla(0, 100%, 50%, 0.5) /* Rouge semi-transparent */

Q4 : Comment créer un dégradé ?​

R : Utilisez Gradient Generator ou :

background: linear-gradient(to right, #667eea, #764ba2);

Prochaines étapes 🚀​

Maintenant que vous comprenez les couleurs :

  1. ✅ Color Converter - Pratiquer la conversion de couleurs
  2. ✅ Gradient Generator - Créer des dégradés
  3. ✅ Shadow Generator - Créer des ombres colorées
  4. ✅ Border Radius Generator - Créer des coins arrondis

Conclusion​

Les couleurs Web ne sont pas difficiles !

Points à retenir :

  • HEX : #RRVVBB - Le plus courant
  • RGB : rgb(rouge, vert, bleu) - Peut ajouter la transparence
  • HSL : hsl(teinte, saturation, luminosité) - Facile à comprendre pour les humains

En expérimentant souvent avec l'outil Color Converter, vous vous y habituerez rapidement ! 🎨

La couleur est un élément important qui détermine l'ambiance du site Web. Essayez différentes couleurs !