Code couleur CSS : RGB, HEX et HSL | Tout comprendre

Choisir un code couleur CSS peut vite devenir un casse-tête quand on débute. Entre le format RGB, l’écriture HEX (hexadécimale) et le modèle HSL, difficile de savoir lequel utiliser et surtout pourquoi.

• Comprendre rapidement les différents formats de code couleur CSS (RGB, hexadécimal, HSL) pour choisir le plus adapté selon vos besoins
• Gagner en efficacité pour créer des designs cohérents, lisibles et professionnels sans tâtonner pendant des heures
• Maîtriser les bases essentielles pour manipuler les couleurs avec précision et améliorer l’expérience utilisateur sur vos projets web

Dans ce tutoriel, vous allez apprendre à maîtriser les codes couleur CSS comme un pro. RGB, hexadécimal, HSL… ces termes peuvent sembler techniques au début, mais rassurez-vous : on va tout décortiquer ensemble, simplement, avec des exemples concrets que vous pourrez réutiliser immédiatement.

Pourquoi les couleurs sont essentielles en CSS

Avant même de parler technique, prenons une seconde pour comprendre pourquoi c’est important.

Les couleurs ne servent pas seulement à “faire joli”. Elles influencent :

• la lisibilité de votre site
• l’émotion ressentie par l’utilisateur
• votre identité visuelle
• le taux de conversion (oui, même ça !)

Un bouton rouge attire plus l’attention qu’un bouton gris. Un fond mal choisi peut rendre un texte illisible.

• Bien gérer les couleurs en CSS, c’est déjà faire du bon webdesign.

Comment fonctionne un code couleur CSS ?

En CSS, une couleur est simplement une valeur que vous appliquez à une propriété. Par exemple, avec la propriété color pour la couleur d’un texte, ou les propriétés background ou background-color pour une couleur de fond :

color: red;
background-color: blue;

Ici, vous utilisez des noms de couleurs. C’est simple… mais très limité.

Très vite, vous aurez besoin de plus de précision. Et c’est là qu’entrent en jeu :

• le RGB
• le format hexadécimal ou HEX
• le HSL

Le format RGB : comprendre la base des couleurs

Le modèle RGB signifie :

• Red (rouge)
• Green (vert)
• Blue (bleu)

Ce sont les 3 couleurs de base utilisées par les écrans.

Comment ça fonctionne ?

Chaque couleur est définie par 3 valeurs allant de 0 à 255.

color: rgb(255, 0, 0); /* rouge */

• 255 rouge
• 0 vert
• 0 bleu

Résultat : rouge pur.

Quelques exemples concrets

color: rgb(0, 255, 0); /* vert */
color: rgb(0, 0, 255); /* bleu */
color: rgb(255, 255, 0); /* jaune */
color: rgb(0, 0, 0); /* noir */
color: rgb(255, 255, 255); /* blanc */

Plus les valeurs sont élevées, plus la couleur est lumineuse.

background-color: rgb(50, 50, 50); /* gris foncé */
background-color: rgb(200, 200, 200); /* gris clair */

Ajouter de la transparence avec RGBA

Le RGB peut être étendu avec une 4ème valeur : l’alpha.

background-color: rgba(255, 0, 0, 0.5);

• 0.5 = 50% de transparence

Très utile pour :

• les overlays
• les effets modernes
• les cartes ou fiche produits

Le format hexadécimal : le standard du web

Le format hexadécimal est probablement celui que vous verrez le plus souvent.

Il commence toujours par un # :

color: #ff0000;

Comment lire un code hexadécimal ?

Il est composé de 6 caractères :

#RRGGBB

Chaque paire correspond à :

• RR → rouge
• GG → vert
• BB → bleu

C’est le même principe que pour le RGB mais cette fois avec des chiffres et des lettres :

#ff0000 → rouge
#00ff00 → vert
#0000ff → bleu

Pourquoi “ff” ?

Parce qu’on est en base 16 (hexadécimal). La notation va de 0 à f : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F dans cet ordre, du plus foncé au plus clair.

• 00 = 0
• ff = 255

Donc :

#ffffff → blanc
#000000 → noir

Version courte du code hexadécimal

Certaines couleurs peuvent être raccourcies :

#ffffff → #fff
#000000 → #000

Pratique et très utilisé.

RGB vs Hexadécimal : que choisir ?

Bonne question… et réponse simple :

• RGB → plus lisible pour comprendre les valeurs
• Hexadécimal → plus compact et très utilisé en production

En pratique, les deux sont équivalents :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

color: rgb(255, 0, 0);
color: #ff0000;

Le format HSL : le plus intuitif

Et maintenant… le format préféré des développeurs modernes.

• HSL = Hue, Saturation, Lightness

• Hue (teinte) → couleur (0 à 360°)
• Saturation → intensité (0% à 100%)
• Lightness → luminosité (0% à 100%)

Par exemple :

color: hsl(0, 100%, 50%);

→ rouge

Pourquoi HSL est génial

Contrairement au RGB ou au HEX (hexadécimal), HSL est logique visuellement.

Vous voulez :

• une couleur plus claire → augmentez la luminosité
• une couleur plus douce → baissez la saturation

Exemple concret :

background-color: hsl(200, 100%, 50%); /* bleu */
background-color: hsl(200, 100%, 70%); /* bleu clair */
background-color: hsl(200, 50%, 50%); /* bleu désaturé */

Ajouter de la transparence avec HSLA

On peut également ajouter de la transparence avec HSL grâce au HSLA. C’est le même principe que RGBA :

background-color: hsla(200, 100%, 50%, 0.3);

Cas pratique : créer une palette cohérente

Imaginons que vous créez un site. Vous choisissez donc une couleur principale :

--primary: hsl(210, 100%, 50%);

Puis vous déclinez :

--primary-light: hsl(210, 100%, 70%);
--primary-dark: hsl(210, 100%, 30%);

Résultat :

• cohérence visuelle
• design propre
• maintenance facile

👉 Pour en savoir plus : Choisir sa palette de couleurs

Utiliser les variables CSS

:root {
  --main-color: #3498db;
}

button {
  background-color: var(--main-color);
}

Avantage :

• vous changez une seule valeur
• tout votre site s’adapte

👉 Pour tout comprendre : Les variables en CSS

Pièges fréquents à éviter

Ne mélanger pas trop de formats. Essayez de rester cohérent :

• soit RGB
• soit hexadécimal
• soit HSL

Sinon… bon courage pour maintenir votre code.

Utiliser un mauvais contraste. L’erreur classique :

color: #aaa;
background: #fff;

Ça vous donnera un résultat illisible. Pensez toujours à l’accessibilité (Accessibilité et daltonisme).

Copier-coller un code couleur CSS sans le comprendre. Inutile de trouvez une couleur sur internet si vous ne savez pas pourquoi elle marche. Prenez le temps de comprendre sa définition :

• saturation
• luminosité
• contraste

C’est là que vous progressez vraiment.

Outils utiles pour choisir ses couleurs

Quelques outils pratiques :

• Color Picker (Chrome DevTools)
• Coolors.co
• Adobe Color

Mais le plus important reste votre compréhension des codes couleur CSS.

---

Maîtriser les couleurs en CSS, ce n’est pas juste apprendre des formats comme le RGB ou l’hexadécimal. C’est comprendre comment une simple valeur peut transformer complètement l’expérience utilisateur.

Au début, vous allez tester, hésiter, tâtonner… et c’est parfaitement normal. Puis, petit à petit, vous allez développer un “œil” pour les bonnes combinaisons. Et là, tout change.

Alors amusez-vous avec les couleurs. Testez, cassez, recommencez. Parce qu’au final, coder du CSS… c’est aussi un peu faire de l’art.