Les Formats de Couleur Expliqués : Guide de Conversion HEX, RGB, HSL

Chaque pixel de votre écran est défini par des nombres. Mais la même couleur peut être exprimée dans plusieurs formats — HEX, RGB, HSL, HSB et plus encore. Comprendre ces formats et quand utiliser chacun d'entre eux fait de vous un développeur et un designer plus efficace.

Les Modèles de Couleur

RGB (Rouge, Vert, Bleu)

RGB est un modèle de couleur additif basé sur le fonctionnement des écrans. Chaque pixel est une combinaison de lumière rouge, verte et bleue à des intensités variables.

color: rgb(59, 130, 246);       /* Bleu uni */
color: rgba(59, 130, 246, 0.5); /* Bleu 50% transparent */

Chaque canal va de 0 (aucun) à 255 (intensité maximale) :

• rgb(0, 0, 0) = Noir (pas de lumière)
• rgb(255, 255, 255) = Blanc (toute la lumière)
• rgb(255, 0, 0) = Rouge pur

Quand utiliser RGB : Manipulation programmatique des couleurs, opérations canvas, traitement d'images. RGB correspond directement au matériel, rendant les calculs simples.

HEX (Hexadécimal)

HEX est simplement RGB écrit en notation hexadécimale. Chaque paire de caractères représente un canal (00-FF) :

color: #3B82F6;   /* Même bleu que rgb(59, 130, 246) */
color: #3B82F680; /* Avec 50% d'alpha (hex à 8 chiffres) */

La conversion est directe : 3B = 59, 82 = 130, F6 = 246.

Abréviation : Quand chaque paire a des chiffres identiques, vous pouvez raccourcir : #AABBCC → #ABC

Quand utiliser HEX : Feuilles de style CSS (format le plus courant), transferts de design, chartes graphiques. HEX est compact et universellement compris.

HSL (Teinte, Saturation, Luminosité)

HSL représente les couleurs telles que les humains les perçoivent. Au lieu de mélanger des canaux de lumière, vous décrivez la couleur par ses propriétés :

• Teinte : L'angle de couleur sur le cercle chromatique (0-360°). 0° = rouge, 120° = vert, 240° = bleu
• Saturation : L'intensité de la couleur (0% = gris, 100% = couleur pleine)
• Luminosité : La clarté de la couleur (0% = noir, 50% = couleur pure, 100% = blanc)

color: hsl(217, 91%, 60%);       /* Même bleu */
color: hsla(217, 91%, 60%, 0.5); /* Avec alpha */

Quand utiliser HSL : Création de palettes de couleurs, ajustement programmatique des couleurs (par ex. création d'états de survol en ajustant la luminosité), design de couleurs accessibles. HSL est le format le plus intuitif pour le raisonnement humain sur la couleur.

HSB/HSV (Teinte, Saturation, Luminosité/Valeur)

HSB est similaire à HSL mais définit la luminosité différemment. À luminosité maximale, vous obtenez la couleur pure ; au minimum, vous obtenez du noir. Ce modèle est utilisé par les outils de design comme Figma, Sketch et Photoshop.

Différence clé avec HSL : En HSL, une luminosité de 50% donne la couleur pure. En HSB, une luminosité de 100% donne la couleur pure. Cela rend HSB plus intuitif pour certaines tâches mais moins utile en CSS (qui ne supporte pas nativement HSB).

Conversion Entre Formats

La conversion entre formats implique des mathématiques simples. Voici les relations clés :

HEX vers RGB

Divisez la chaîne hex en paires et convertissez chacune en décimal :

#3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB vers HSL

L'algorithme normalise les valeurs RGB entre 0 et 1, trouve les canaux max et min, puis calcule la teinte selon le canal dominant, la saturation à partir de la plage, et la luminosité à partir de la moyenne.

Plutôt que d'implémenter ces conversions manuellement, utilisez notre Convertisseur de Couleurs pour traduire instantanément entre tous les formats.

Applications Pratiques

Construction de Palettes de Couleurs avec HSL

HSL excelle dans la génération de palettes cohérentes. Gardez la teinte constante et variez la saturation et la luminosité :

:root {
  --blue-100: hsl(217, 91%, 95%);  /* Plus clair */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* Base */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* Plus sombre */
}

Cette approche garantit des étapes perceptuellement cohérentes. Vous créez une palette complète à la main ? Notre Générateur de Palette de Couleurs automatise ce processus.

États de Survol et de Focus

Avec HSL, créer des états interactifs est trivial :

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* 5% plus sombre */
}
.button:active {
  background: hsl(217, 91%, 50%); /* 10% plus sombre */
}

Accessibilité et Contraste

WCAG 2.1 exige un rapport de contraste minimum de 4,5:1 pour le texte normal et de 3:1 pour le texte large. La composante de luminosité en HSL vous donne un moyen intuitif d'assurer un contraste suffisant :

• Les arrière-plans clairs (luminosité > 90%) se marient bien avec le texte sombre (luminosité < 30%)
• Les arrière-plans sombres (luminosité < 20%) se marient bien avec le texte clair (luminosité > 80%)

Fonctions de Couleur CSS Modernes

CSS supporte désormais de puissantes fonctions de manipulation de couleurs :

/* Syntaxe de couleur relative (CSS Color Level 4) */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch - Espace colorimétrique perceptuellement uniforme */
color: oklch(0.7 0.15 250);

Le format oklch gagne en adoption car il est perceptuellement uniforme — des changements numériques égaux produisent des changements perçus égaux, contrairement à HSL où un changement de 10% de luminosité apparaît différemment à différentes valeurs de teinte.

FAQ

Quel format de couleur dois-je utiliser en CSS ?

Pour la plupart des projets, utilisez HEX pour les couleurs simples et HSL quand vous devez créer des variations ou manipuler les couleurs programmatiquement. HEX est le format le plus compact et le plus largement reconnu. HSL est plus lisible lors de la construction de systèmes de couleurs. Le CSS moderne supporte tous les formats de manière interchangeable.

Quelle est la différence entre HSL et HSB ?

HSL et HSB utilisent tous deux la teinte et la saturation, mais définissent la luminosité différemment. En HSL, une luminosité de 0% est noir, 50% est la couleur pure et 100% est blanc. En HSB, une luminosité de 0% est noir et 100% est la couleur pure (pas de chemin vers le blanc par la luminosité seule). CSS supporte HSL nativement ; HSB est principalement utilisé dans les outils de design comme Figma et Photoshop.

Ressources Connexes

• Convertisseur de Couleurs — Convertissez entre HEX, RGB, HSL et HSB instantanément
• Générateur de Palette de Couleurs — Générez des palettes de couleurs harmonieuses
• Guide des Dégradés CSS — Créez de beaux dégradés avec CSS