Methodology
Méthodologie des couleurs
sRGB partout. HEX, RGB, HSL, HSV sont des étiquettes différentes pour la même couleur.
By Buğra SözeriPublished
Le cluster Couleur gère les conversions entre quatre représentations de la même couleur sous-jacente : HEX (#FF6B35), RGB (255, 107, 53), HSL (16°, 100%, 60%) et HSV (16°, 79%, 100%). Les quatre décrivent une couleur dans le même espace colorimétrique — sRGB — donc les conversions sont des réétiketages algébriques, pas des remappages perceptuels.
sRGB comme ancre universelle
sRGB (Standard RGB) est l’espace colorimétrique par défaut du web, défini par la norme IEC 61966-2-1 en 1999. Il spécifie les primaires rouge, vert et bleu exacts qui se combinent pour produire toute couleur affichable, plus une courbe gamma non linéaire approximant la réponse d’un moniteur CRT typique. Les LCD et OLED modernes émulent cette courbe.
Chaque couleur HEX, chaque valeur rgb(…), chaquehsl(…) CSS par défaut suppose sRGB sauf indication contraire. Les formats à gamut étendu plus récents (Display P3, Rec.2020) existent mais nécessitent un opt-in explicite via color(display-p3 …) ou similaire — hors de portée de ce cluster.
Les mathématiques de conversion
HEX ↔ RGB
Conversion de base directe : chaque paire de chiffres hexadécimaux est un octet (0-255). #FF6B35↔ rgb(255, 107, 53) exactement, sans perte de précision. L’hex à trois chiffres (#F63) est l’abréviation de #FF6633.
RGB → HSL
Convertir R, G, B dans la plage [0, 1]. Trouver les canaux maximum et minimum. Luminosité L = (max + min) / 2. La saturation dépend de si L < 0,5 ou non. La teinte est calculée à partir du canal maximum et des différences relatives entre canaux.
La formule complète est standard et est implémentée exactement dans notre bibliothèque. La teinte est exprimée en degrés [0, 360°) ; la saturation et la luminosité en pourcentage [0, 100].
RGB → HSV
Logique similaire. Valeur V = max. Saturation S = (max − min) / max quand max ≠ 0. La teinte est identique à la teinte HSL.
HSL et HSV divergent sur l’axe de saturation. Une couleur à 100 % de saturation HSV est entièrement saturée ; à 100 % de saturation HSL, elle n’est entièrement saturée qu’à L = 0,5. Les designers préfèrent HSL pour ajuster les teintes et les nuances ; les éditeurs d’image exposent souvent HSV (Photoshop l’appelle “HSB” pour “brightness”).
Précision aller-retour
HEX ↔ RGB est exact au bit près. Dans les deux sens, le voyage aller-retour est sans perte.
RGB ↔ HSL / RGB ↔ HSV impliquent une arithmétique en virgule flottante. La précision aller-retour est limitée par la sortie RGB 8 bits — le pire cas arrondit un canal de ±1 sur 255 (environ 0,4 %). Visuellement c’est invisible ; pour un travail critique sur les couleurs, évitez l’aller-retour si possible.
Détails de l’algorithme : HSL et HSV en détail
La bibliothèque de conversion intègre ces formules telles quelles ; elles sont reproduites ici pour que l’algèbre soit visible. Entrées normalisées R, G, B ∈ [0, 1] avec M = max(R, G, B), m = min(R, G, B), chroma C = M − m :
L = (M + m) / 2S_HSL = C / (1 − |2L − 1|) si C ≠ 0, sinon 0V = MS_HSV = C / M si M ≠ 0, sinon 0
La teinte est le même axe dans les deux modèles :
H = 60° × ((G − B) / C mod 6) si M = RH = 60° × ((B − R) / C + 2) si M = GH = 60° × ((R − G) / C + 4) si M = B
La linéarisation sRGB, appliquée lors du calcul de luminance pour le contraste ou de l’interpolation perceptuelle, est la fonction de transfert par morceaux de l’IEC 61966-2-1 : linéaire = c/12,92 si c ≤ 0,04045, sinon ((c + 0,055)/1,055)^2,4. L’aller-retour à travers le linéaire et le retour est exact au bit pour la grille sRGB 8 bits car l’inverse par morceaux est bien défini.
Sources & références
Chaque formule de cette page provient d’une spécification primaire ou d’une publication évaluée par les pairs : primaires sRGB et gamma depuis l’IEC 61966-2-1, syntaxe CSS hex/rgb/hsl depuis le W3C CSS Color Module Level 4, conversion RGB↔HSV depuis l’article de Smith de 1978, formule de contraste depuis WCAG 2.2. Le bloc Sources au bas de cette page liste les versions publiquement disponibles utilisées comme référence lors des tests de la bibliothèque.
Hypothèses & limites
- sRGB partout.Les entrées sans étiquette d’espace colorimétrique explicite sont supposées sRGB. Les entrées P3 / Rec.2020 / Adobe RGB ne sont pas auto-détectées et seraient mal interprétées si passées comme RGB brut.
- RGB entier 8 bits.L’entrée HEX est limitée à [0, 255] par canal. Les pipelines HDR 10 ou 12 bits nécessitent un format plus large que #RRGGBB.
- HSL/HSV sont des reparamétrages de commodité, pas des espaces perceptuels. Des changements numériques égaux en H, S ou L ne correspondent pas à des changements perceptuels égaux — utilisez OKLCH ou CIELAB pour un travail perceptuellement uniforme.
- Pas d’adaptation chromatique.Convertir entre espaces avec des points blancs différents (D65 ↔ D50) nécessite une transformation Bradford ou CAT02 que nous n’appliquons pas.
- CMYK nécessite des profils ICC.Les approximations algébriques CMYK ≈ RGB sur le web sont uniformément incorrectes pour l’impression ; nous n’émettons pas de valeur CMYK du tout.
- L’alpha est passthrough, non pré-multiplié.L’aller-retour via HSL/HSV préserve le canal alpha mais n’applique pas l’alpha aux composantes de couleur.
Ce que nous ne gérons pas
- Les espaces à gamut étendu (P3, Rec.2020) — hors de portée.
- Les espaces perceptuellement uniformes (Lab, LCH, Oklab) — parfois demandés ; l’algèbre est plus complexe. Pourrait être disponible comme outil séparé plus tard.
- CMYK — espace colorimétrique spécifique à l’impression ; les conversions nécessitent des profils ICC, pas seulement de l’algèbre. Voir notre comparaison RGB vs CMYK.
- Alpha — RGB→HSL/HSV préserve l’alpha comme passthrough. HEX avec alpha (#RRGGBBAA) est supporté.
Frequently asked questions
- Quel espace colorimétrique Convertitive utilise-t-il ?
- Toutes les conversions utilisent sRGB (IEC 61966-2-1:1999) comme espace colorimétrique canonique. HEX, RGB, HSL et HSV sont tous des représentations de coordonnées différentes du même gamut sRGB — les convertir entre eux est sans perte. Les espaces à gamut étendu (Display P3, Rec. 2020) ne sont pas actuellement supportés ; les valeurs sont toujours supposées être en sRGB.
- Quelle formule Convertitive utilise-t-il pour la conversion RGB ↔ HSL ?
- L’algorithme standard de Foley & van Dam (Computer Graphics: Principles and Practice, 1990). Avec RGB normalisé (r, g, b ∈ [0,1]) : L = (max + min) / 2 ; S = (max − min) / (1 − |2L − 1|) quand L ≠ 0 ou 1 ; H est calculé à partir du canal maximum et des distances relatives entre canaux. L’inverse utilise le même terme de chroma c = (1 − |2L − 1|) × S et le mapping hue-vers-RGB en six secteurs.
- Quelle est la précision de la conversion HEX ↔ RGB ?
- Exacte et sans perte. Un code HEX comme #FF6B35 correspond à rgb(255, 107, 53) par simple décodage base-16 de chaque paire d’octets — sans virgule flottante impliquée. La seule perte de précision survient lors de la conversion en HSL ou HSV, qui utilisent une division en virgule flottante et reviennent à des entiers 8 bits avec une erreur d’arrondi de ±1 unité dans des cas extrêmes.
- Quelles sont les limites du convertisseur de couleur ?
- Trois limites principales : (1) sRGB uniquement — les valeurs Display P3 ou OKLCH à gamut étendu ne sont pas supportées ; (2) 8 bits par canal — les représentations HDR ou 10 bits sont hors plage ; (3) HSL/HSV sont achromatiques (teinte indéfinie) quand S = 0, donc le convertisseur affiche H = 0 pour les gris, conformément au CSS Color Level 4 §4.2.
- D’où vient la formule de luminance relative ?
- La formule de luminance relative L = 0,2126 R + 0,7152 G + 0,0722 B (avec linéarisation via la fonction de transfert sRGB) est définie dans WCAG 2.2 §1.4.3 (et sa référence normative ICC.1:2010). Elle est utilisée en aval pour calculer les ratios de contraste WCAG. Les coefficients reflètent la sensibilité du système visuel humain aux primaires sRGB tels que définis dans ICC.1:2010.
Related
- Sélecteur de couleur
- Tous les convertisseurs de couleur
- Formats de couleur CSS : hex, RGB, HSL, OKLCH
- Contraste de couleur pour l’accessibilité
- DPI vs PPI vs densité
- RGB vs CMYK
- Glossaire : sRGB
- Glossaire : Gamma
- Glossaire : Chroma
- Glossaire : Température de couleur
- Glossaire : Delta E
- Glossaire : Profil ICC
- Glossaire : Gamut
- Glossaire : P3
Published May 14, 2026