HEX vs RGB vs HSL : quel format de couleur devriez-vous utiliser ?

HEX vs RGB vs HSL : quel format de couleur devriez-vous utiliser ?

Le CSS offre plusieurs façons de définir des couleurs, mais les trois formats les plus courants sont HEX, RGB et HSL. Chaque format a des forces distinctes, et savoir quand utiliser chacun peut considérablement améliorer la maintenabilité de vos feuilles de style et votre capacité à créer des systèmes de couleurs dynamiques. Ce guide détaille chaque format afin que vous puissiez choisir le bon pour toute situation.

Le format de couleur HEX : la norme de l'industrie

Les couleurs HEX (hexadécimales) sont le format le plus largement utilisé en conception web. Une couleur hexadécimale s'écrit comme un # suivi de six chiffres hexadécimaux représentant les valeurs rouge, verte et bleue dans cet ordre.

#FF5733

• #FF — Rouge (255 en décimal)
• #57 — Vert (87 en décimal)
• #33 — Bleu (51 en décimal)

Variantes de l'HEX

L'HEX prend en charge plusieurs notations pour différents besoins :

/* Hexadécimal standard à six chiffres */
color: #FF5733;

/* Forme abrégée — les paires identiques se réduisent à trois chiffres */
color: #F53; /* Se développe en #FF5533 */

/* Hexadécimal à huit chiffres avec canal alpha */
color: #FF573380; /* 50 % d'opacité */

L'HEX abrégé fonctionne lorsque chaque paire utilise des caractères identiques : #AABBCC devient #ABC. C'est purement une convention d'économie d'espace prise en charge par tous les navigateurs.

L'HEX à huit chiffres (#RRGGBBAA) a ajouté la transparence alpha. La valeur alpha varie de 00 (entièrement transparent) à FF (entièrement opaque). La prise en charge des navigateurs pour l'hexadécimal à huit chiffres est excellente dans tous les navigateurs modernes.

La forme abrégée à quatre chiffres (#RGBA) existe également : #F538 se développe en #FF553388.

Quand utiliser l'HEX

• Copier-coller depuis des outils de conception — Figma, Sketch et Adobe XD produisent tous de l'hexadécimal par défaut
• Couleurs de marque codées en dur — L'hexadécimal est sans ambiguïté et compact pour les valeurs qui ne changent jamais
• Documentation et maquettes — L'hexadécimal est le format le plus reconnaissable parmi les concepteurs et les développeurs
• Propriétés personnalisées CSS — Stocker les jetons de marque en hexadécimal est une pratique courante

Quand éviter l'HEX

• Manipulation programmatique des couleurs — Ajuster des canaux individuels nécessite l'analyse de chaînes
• Création de systèmes de couleurs — Générer des variantes plus claires ou plus foncées implique des calculs non triviaux
• Communiquer l'intention de couleur — L'hexadécimal ne donne aucune information sémantique sur la couleur

Le format de couleur RGB : contrôle des canaux

RGB signifie Rouge, Vert, Bleu (Red, Green, Blue). En CSS, il s'écrit comme une fonction avec des valeurs de 0 à 255 ou des pourcentages (0 % à 100 %).

/* Syntaxe héritée à virgules */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* Syntaxe moderne séparée par des espaces */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* Valeurs en pourcentage */
color: rgb(100% 34% 20%);

Améliorations de la syntaxe RGB moderne

La spécification CSS Color Level 4 a modernisé la fonction rgb() de deux manières importantes :

1. Valeurs séparées par des espaces — Les virgules ne sont plus nécessaires, ce qui rend la syntaxe plus propre
2. Alpha séparé par une barre oblique — L'alias rgba() n'est plus nécessaire ; rgb() accepte désormais un canal alpha optionnel

Les syntaxes héritée et moderne sont toutes deux entièrement prises en charge, mais la syntaxe moderne est recommandée pour le nouveau code.

Quand utiliser le RGB

• Canvas et WebGL — Les API de données d'image renvoient les valeurs de pixels en RGB
• Ajustements numériques des couleurs — Lorsque vous avez des valeurs rouge, verte et bleue stockées comme variables séparées
• Traduction depuis des spécifications de conception — Certains systèmes de conception spécifient les couleurs comme des triplets RGB
• Travailler avec des sélecteurs de couleurs — De nombreuses interfaces de sélecteur de couleurs utilisent des curseurs 0-255

Quand éviter le RGB

• Créer des palettes de couleurs cohérentes — Ajuster les trois canaux indépendamment rend les ajustements cohérents difficiles
• Lisibilité humaine — rgb(123, 45, 67) ne donne aucune idée immédiate de la couleur qu'il représente

Le format de couleur HSL : des couleurs conviviales

HSL signifie Teinte, Saturation et Luminosité (Hue, Saturation, Lightness). Ce format est plus intuitif pour les humains car il sépare la couleur elle-même (teinte) de son intensité (saturation) et de sa luminosité (clarté).

/* Syntaxe héritée */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* Syntaxe moderne */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

Comprendre les canaux HSL

Teinte (0-360) — L'angle de couleur sur la roue chromatique. C'est le composant « de quelle couleur s'agit-il » :

| Valeur de teinte | Couleur | |-----------|---------| | 0 ou 360 | Rouge | | 30 | Orange | | 60 | Jaune | | 120 | Vert | | 180 | Cyan | | 240 | Bleu | | 300 | Magenta |

Saturation (0-100 %) — L'intensité ou la vivacité de la couleur. 0 % produit une nuance de gris ; 100 % est la version la plus pure de la teinte.

Luminosité (0-100 %) — La clarté ou l'obscurité de la couleur. 0 % est toujours le noir, 50 % est la version « normale » de la teinte, et 100 % est toujours le blanc.

Pourquoi le HSL est supérieur pour les systèmes de couleurs

Le HSL rend trivialement simples des tâches difficiles en HEX ou RGB :

/* Couleur de marque principale */
--brand: hsl(220, 80%, 50%);

/* État de survol — légèrement plus clair */
--brand-hover: hsl(220, 80%, 60%);

/* État d'activation — légèrement plus foncé */
--brand-active: hsl(220, 80%, 40%);

/* État désactivé — désaturé */
--brand-disabled: hsl(220, 30%, 70%);

/* Teinte d'arrière-plan — très claire */
--brand-bg: hsl(220, 40%, 95%);

Avec le HSL, chaque variante est une modification d'une seule variable. C'est impossible avec l'HEX et lourd avec le RGB.

Quand utiliser le HSL

• Créer des palettes de couleurs — Le HSL est la norme de facto pour la génération de jetons de conception
• Thèmes et mode sombre — Échangez les valeurs de luminosité pour créer des variantes de mode sombre
• États de survol et de focus — Ajustez la luminosité d'un pourcentage fixe
• Ajustements d'accessibilité — Augmentez le contraste de luminosité sans changer la couleur
• Sélecteurs de couleurs interactifs — Les curseurs HSL sont plus intuitifs que les curseurs RGB

Tableau de comparaison rapide

| Fonctionnalité | HEX | RGB | HSL | |---------|-----|-----|-----| | Lisibilité au niveau pixel | Faible | Modérée | Bonne | | Sémantique des canaux | Opaque | Numérique | Perceptive | | Ajustement programmatique | Difficile | Modéré | Facile | | Transparence alpha | Hex à 8 chiffres | rgb(R G B / A) | hsl(H S% L% / A) | | Prise en charge des navigateurs | Excellente | Excellente | Excellente | | Syntaxe moderne | Non | Oui | Oui | | Défaut des outils de conception | Oui | Courant | Rare | | Adéquation aux systèmes de couleurs | Faible | Acceptable | Excellente |

Prise en charge des navigateurs : les trois sont sûrs

HEX, RGB et HSL bénéficient d'une prise en charge identique des navigateurs. Les trois fonctionnent dans tous les navigateurs publiés depuis Internet Explorer 9. La syntaxe moderne séparée par des espaces (rgb(255 0 0 / 0.5)) est prise en charge dans tous les navigateurs publiés depuis 2020. Il n'y a aucune raison de compatibilité de choisir l'un plutôt que l'autre.

Cadre de décision pratique

Choisissez votre format en fonction de ce que vous faites :

1. Vous copiez depuis une maquette de conception ? Utilisez l'HEX — c'est ce que produisent les outils de conception.
2. Vous construisez un système de jetons de conception ? Utilisez le HSL — il rend la génération de palettes triviale.
3. Vous travaillez avec canvas ou des données d'image ? Utilisez le RGB — les API de pixels utilisent nativement le RGB.
4. Vous écrivez une règle de style ponctuelle ? Utilisez l'HEX — c'est le plus compact.
5. Vous créez des transitions de couleurs dynamiques ? Utilisez le HSL — interpoler la teinte crée des effets arc-en-ciel ; interpoler le RGB crée des intermédiaires boueux.

Convertir entre n'importe quel format

Utilisez notre convertisseur de couleurs en ligne gratuit pour convertir instantanément entre HEX, RGB, HSL et d'autres formats de couleur CSS. Fini le calcul manuel ou les recherches dans les DevTools du navigateur.