FAQ Convertisseur de couleurs (HEX, RGB, HSL)

Comment convertir un code HEX en RGB ?

Pour convertir un code couleur hexadécimal en RGB, divisez la chaîne hexadécimale de six caractères #RRGGBB en trois paires, puis convertissez chaque paire de l'hexadécimal (base 16) en décimal (base 10).

Exemple : #FF5733

• FF = 255 (Rouge)
• 57 = 87 (Vert)
• 33 = 51 (Bleu)
• Résultat : rgb(255, 87, 51)

Pour l'hexadécimal abrégé (#F53), développez d'abord chaque chiffre en une paire : #F53 devient #FF5533. Les chiffres doublent : F devient FF, 5 devient 55, 3 devient 33.

L'hexadécimal à huit chiffres (#RRGGBBAA) fonctionne de la même manière, mais avec une paire supplémentaire pour le canal alpha. #FF573380 ajoute 80 (128, soit environ 50 % d'opacité) pour le canal alpha.

Pour des conversions instantanées, utilisez notre convertisseur de couleurs. Il gère tous les formats, y compris l'hexadécimal court et long, avec et sans alpha.

Quelle est la différence entre RGB et RGBA ?

Le RGB définit une couleur à l'aide des canaux rouge, vert et bleu. Le RGBA est un RGB avec un canal Alpha supplémentaire qui contrôle l'opacité. La valeur alpha varie de 0,0 (entièrement transparent) à 1,0 (entièrement opaque).

rgb(255, 0, 0)         /* Rouge entièrement opaque */
rgba(255, 0, 0, 0.5)  /* Rouge à 50 % d'opacité */

Dans le CSS moderne (CSS Color Level 4), l'alias rgba() n'est plus nécessaire. La fonction rgb() accepte désormais un canal alpha optionnel :

rgb(255 0 0 / 0.5)  /* Syntaxe moderne, rouge à 50 % d'opacité */

Tous les navigateurs modernes prennent en charge cette syntaxe. La fonction héritée rgba() fonctionne partout et ne sera pas supprimée, mais l'utilisation de rgb() avec la syntaxe à barre oblique est l'approche recommandée pour le nouveau code.

Comment convertir le RGB en HSL ?

La conversion du RGB en HSL comporte trois étapes :

1. Normaliser les valeurs RGB sur la plage 0-1 (diviser par 255)
2. Trouver le min et le max des trois valeurs normalisées — la moyenne du min et du max est la luminosité (L)
3. Calculer la teinte et la saturation en fonction du canal qui est le max et de la différence entre le max et le min

La formule varie selon le canal de couleur dominant :

• Si le rouge est le maximum : teinte = (vert - bleu) / (max - min)
• Si le vert est le maximum : teinte = 2 + (bleu - rouge) / (max - min)
• Si le bleu est le maximum : teinte = 4 + (rouge - vert) / (max - min)
• La saturation dépend de la luminosité : si L > 0,5, saturation = (max - min) / (2 - max - min), sinon saturation = (max - min) / (max + min)

Le calcul est non trivial et facile à se tromper, donc l'utilisation d'un outil de conversion de couleurs est recommandée pour des résultats instantanés.

Pourquoi mes couleurs paraissent-elles différentes sur différents écrans ?

L'apparence des couleurs varie entre les écrans pour plusieurs raisons :

Étalonnage de l'écran — La plupart des écrans grand public ne sont pas étalonnés en couleur. Les réglages d'usine varient considérablement en luminosité, en contraste et en température de couleur.

Différences de gamme de couleurs — Différents écrans prennent en charge différentes plages de couleurs. Le sRGB est la norme web, mais de nombreux téléphones et ordinateurs portables modernes prennent en charge le DCI-P3 (25 % plus large). Une couleur hors de la gamme sRGB paraît correcte sur un écran à large gamme, mais est tronquée ou décalée sur un écran standard.

Technologie d'affichage — Les écrans OLED produisent des noirs plus profonds et des couleurs plus saturées que les écrans LCD. Les dalles IPS offrent une meilleure précision des couleurs que les dalles TN.

Angle de vision — Les couleurs se décalent lorsqu'on les regarde sous un angle, en particulier sur les écrans d'entrée de gamme.

Luminosité et lumière ambiante — Un écran à 50 % de luminosité dans une pièce sombre paraît différent du même écran à 100 % de luminosité en plein soleil.

Pour minimiser les différences : travaillez dans l'espace colorimétrique sRGB, étalonnez votre moniteur avec un étalonneur matériel et testez vos créations sur plusieurs appareils avant la publication.

À quoi sert le modèle de couleur HSL ?

Le HSL (Teinte, Saturation, Luminosité) est idéal pour la manipulation programmatique des couleurs. Son principal avantage est qu'un seul canal porte l'information « couleur » (la teinte), tandis que les deux autres contrôlent l'apparence indépendamment de la valeur de teinte.

Ce que le HSL rend facile :

• Palettes de couleurs — Conservez la même teinte, variez la luminosité et la saturation pour créer une échelle de couleurs complète
• États de survol et d'activation — Modifiez la luminosité d'un pourcentage fixe : hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
• Mode sombre — Réduisez la luminosité de toutes les couleurs : soustrayez 30 % à la luminosité de chaque couleur
• Thèmes — Échangez les valeurs de teinte pour générer des schémas de couleurs entièrement nouveaux à partir de la même structure de saturation/luminosité
• États désactivés — Réduisez la saturation pour désaturer les éléments : hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

Ce pour quoi le HSL n'est pas bon :

Le HSL n'est pas perceptivement uniforme. Deux couleurs ayant la même valeur de luminosité (par exemple, hsl(60, 100%, 50%) — jaune vif et hsl(240, 100%, 50%) — bleu pur) ont des luminosités perçues très différentes. Pour une manipulation perceptivement uniforme des couleurs, utilisez plutôt l'OKLCH.

Que signifie le # dans les couleurs hexadécimales ?

Le préfixe # (signe dièse) indique à l'analyseur CSS que les caractères suivants représentent une valeur de couleur hexadécimale. C'est la notation standard en CSS et en HTML pour les codes couleur hexadécimaux.

Le format complet est #RRGGBB ou #RRGGBBAA :

| Composant | Signification | Exemple (#FF5733) | |-----------|---------|---------------------| | # | Préfixe hex | Indicateur requis | | RR | Canal rouge | FF (255) | | GG | Canal vert | 57 (87) | | BB | Canal bleu | 33 (51) |

En HTML, le # est également utilisé pour les liens d'ancrage (<a href="#section">), mais dans un contexte CSS ou un attribut style, il indique toujours une couleur hexadécimale. Le HTML prend également en charge les « couleurs nommées » héritées (140 noms prédéfinis comme red, blue, rebeccapurple) qui ne nécessitent pas le #.

Qu'est-ce que la gamme de couleurs et pourquoi est-ce important ?

La gamme de couleurs est l'ensemble des couleurs qu'un appareil peut afficher ou qu'un espace colorimétrique peut représenter. Considérez-la comme le « vocabulaire » des couleurs disponibles pour un écran ou un format de fichier.

Gammes de couleurs courantes, de la plus petite à la plus large :

| Espace colorimétrique | Taille relative | Où c'est utilisé | |-------------|--------------|------------| | sRGB | Référence | Norme web, la plupart des moniteurs, tous les navigateurs | | Adobe RGB | ~50 % plus large | Photographie professionnelle, impression | | DCI-P3 | ~25 % plus large | Téléphones modernes, Mac, de nombreux ordinateurs portables | | Rec. 2020 | ~75 % plus large | Télévision HDR, écrans haut de gamme |

Pourquoi c'est important : une couleur hors de la gamme d'un écran ne peut pas être affichée avec précision. L'appareil tronquera la couleur à la valeur la plus proche dans la gamme, ou l'approximera. C'est pourquoi un rouge profond et éclatant dans un fichier de conception peut paraître terne ou boueux sur un écran d'ordinateur portable standard.

Pour la conception web : concevez toujours en sRGB ou vérifiez que vos couleurs sont compatibles sRGB. L'OKLCH et l'espace colorimétrique display-p3 vous permettent de cibler des gammes plus larges, mais vous devez fournir une solution de repli sRGB pour les écrans standard.

Quelle est la différence entre l'hexadécimal et l'hexadécimal avec alpha ?

L'hexadécimal standard (#FF5733) utilise six chiffres et n'a pas de canal alpha — la couleur est toujours entièrement opaque. L'hexadécimal avec alpha (#FF573380) utilise huit chiffres, ajoutant deux chiffres hexadécimaux supplémentaires à la fin pour le canal alpha (opacité).

Valeurs alpha en hexadécimal :

| Paire hex | Décimal | Opacité | |----------|---------|---------| | 00 | 0 | Entièrement transparent | | 80 | 128 | ~50 % d'opacité | | FF | 255 | Entièrement opaque |

Exemples :

#FF5733     — Rouge-orange uni, sans transparence
#FF5733FF   — Même couleur, entièrement opaque (FF redondant)
#FF573380   — Même couleur, transparent à 50 %
#FF573300   — Même couleur, complètement invisible

Il existe également l'hexadécimal abrégé à quatre chiffres avec alpha : #F538 devient #FF553388 (50 % d'opacité).

Prise en charge des navigateurs : l'hexadécimal à huit chiffres est pris en charge par tous les navigateurs modernes. Pour la prise en charge des navigateurs hérités (Internet Explorer), utilisez plutôt rgba().

Comment choisir des couleurs accessibles pour mon site web ?

Suivez ce processus étape par étape pour construire un système de couleurs accessible :

1. Commencez par une couleur de marque principale. Choisissez une teinte qui représente votre marque, puis utilisez HSL ou OKLCH pour créer une échelle complète, du très clair (arrière-plans) au très foncé (texte).

2. Réglez votre texte sur un noir approchant. Le texte du corps sur fond blanc doit être entre #1A1A1A et #333333. N'utilisez jamais le noir pur (#000000) sur blanc pur — cela provoque une fatigue visuelle chez certains lecteurs. Le gris foncé sur blanc offre une meilleure lisibilité.

3. Vérifiez chaque paire avant-plan/arrière-plan. Chaque combinaison de texte et d'arrière-plan doit respecter les normes WCAG :

• Texte normal : minimum 4,5:1 (WCAG AA)
• Texte large : minimum 3:1 (WCAG AA)
• Visez 7:1 pour le texte du corps (WCAG AAA)

4. N'utilisez jamais la couleur comme seul différenciateur. Les liens doivent avoir des soulignements (pas seulement une couleur différente). Les états d'erreur doivent inclure des icônes ou du texte. Les graphiques doivent utiliser des motifs ou des étiquettes.

5. Testez avec des simulateurs de daltonisme. La deutéranopie (rouge-vert) est le type le plus courant. Assurez-vous que votre conception fonctionne sans perception des couleurs.

6. Vérifiez en niveaux de gris. Si votre conception perd son sens une fois convertie en niveaux de gris, vous comptez trop sur la couleur pour transmettre l'information.

Utilisez notre convertisseur de couleurs pour vérifier instantanément les rapports de contraste entre deux couleurs quelconques.