Calculateur de couleurs

Un calculateur de couleurs convertit les valeurs, vérifie le contraste, compare les différences, génère des palettes, mélange des couleurs et crée des dégradés CSS.

Un projet numérique utilise souvent plusieurs modèles. Une charte fournit des codes HEX, un logiciel affiche HSL ou Lab, le CSS moderne accepte OKLCh et un imprimeur demande du CMJN. Le calculateur regroupe ces besoins tout en indiquant les limites d’une conversion purement mathématique.

Fonctions principales

• conversion entre HEX, RGB, HSL, HSV, HWB et CMJN ;
• calcul de CIE XYZ, Lab et LCh avec un blanc D65 ;
• conversion vers OKLab et OKLCh ;
• gestion de la transparence alpha ;
• contrôle du gamut sRGB ;
• comparaison avec Delta E 76 et Delta E 2000 ;
• vérification du contraste WCAG ;
• recommandation d’un texte noir ou blanc ;
• génération de palettes harmonieuses ;
• mélange en sRGB, RGB linéaire ou OKLab ;
• création de dégradés CSS linéaires, radiaux et coniques ;
• export CSV.

HEX et RGB codent les canaux sRGB

La notation HEX écrit les canaux rouge, vert et bleu en hexadécimal. Dans #5869FF, les paires 58, 69 et FF correspondent aux valeurs décimales suivantes :

#5869FF = rgb(88, 105, 255).

Un code HEX à huit caractères ajoute le canal alpha. La fin 80 dans #5869FF80 représente environ 50% d’opacité. La couleur visible dépend alors du fond.

HSL, HSV et HWB proposent des contrôles distincts

HSL sépare la teinte, la saturation et la luminosité. Il facilite les variations rapides, mais une luminosité HSL identique ne garantit pas une luminosité perçue identique. Le jaune paraît souvent beaucoup plus clair que le bleu au même niveau HSL.

HSV, également appelé HSB, utilise la teinte, la saturation et la valeur. Les sélecteurs de couleur l’emploient fréquemment. HWB exprime une teinte avec une quantité de blanc et de noir.

Le CMJN reste approximatif sans profil ICC

Le CMJN décrit le cyan, le magenta, le jaune et le noir. Une formule simple fournit une estimation, mais elle ne connaît ni la presse, ni le papier, ni les encres, ni l’intention de rendu.

La gestion professionnelle utilise des profils ICC. Ils décrivent le comportement colorimétrique des périphériques d’entrée, d’affichage et de sortie, puis permettent une conversion via un espace de connexion indépendant du périphérique.

Le résultat CMJN du calculateur convient à la préparation ou à la communication. Une séparation prête à imprimer exige le profil demandé par l’imprimeur et une épreuve adaptée.

CIE XYZ sert de référence de conversion

CIE XYZ fournit une base indépendante du périphérique. Le calculateur transforme d’abord les canaux sRGB en lumière linéaire, puis applique la matrice de conversion sRGB vers XYZ.

Le blanc de référence D65 correspond à celui du sRGB. La composante Y se rapporte à la luminance, tandis que X et Z complètent la description chromatique.

Lab et LCh facilitent la comparaison

CIE Lab utilise L pour la clarté et deux axes opposés a et b. LCh représente la même couleur sous forme polaire :

Chroma = √(a² + b²).

Teinte = atan2(b, a).

La spécification CSS Color du W3C définit les fonctions Lab et LCh et documente leur conversion. Lab reflète mieux les écarts visibles qu’une distance RGB brute, sans être parfaitement uniforme.

OKLab et OKLCh améliorent les palettes numériques

OKLab vise des opérations plus proches de la perception, notamment l’interpolation et l’ajustement de clarté. OKLCh exprime la clarté, le chroma et l’angle de teinte. Le W3C inclut ces deux modèles dans CSS Color Module Level 4.

Modifier la clarté en OKLCh crée souvent une progression plus régulière qu’en HSL. Des valeurs de chroma élevées peuvent toutefois sortir du gamut sRGB. Le calculateur détecte ce cas et limite l’aperçu aux canaux affichables.

Comprendre l’avertissement de gamut

Un gamut représente l’ensemble des couleurs qu’un espace peut coder. Lab et OKLCh peuvent décrire des couleurs impossibles à afficher en sRGB. La conversion produit alors un canal RGB linéaire négatif ou supérieur à un.

Le calculateur limite les canaux pour l’aperçu. Cette opération évite des valeurs invalides, mais elle peut modifier la teinte, le chroma ou la clarté. Un flux avancé peut employer un véritable algorithme de gamut mapping.

Mesurer la différence avec Delta E

Delta E quantifie l’écart entre deux couleurs. Delta E 76 calcule la distance euclidienne dans Lab :

ΔE76 = √((ΔL)² + (Δa)² + (Δb)²).

Delta E 2000 ajoute des corrections liées à la clarté, au chroma et à la teinte. Il correspond généralement mieux à la perception dans les zones où Lab se comporte de manière inégale.

Aucun seuil universel ne convient à tous les secteurs. Un faible écart peut rester discret en interface, alors que l’impression, la peinture, le textile ou le contrôle qualité imposent d’autres tolérances.

Le contraste WCAG utilise la luminance relative

Le calculateur applique :

Rapport = (luminance la plus claire + 0,05) ÷ (luminance la plus sombre + 0,05).

WCAG 2.2 demande au moins 4,5:1 pour le texte normal au niveau AA et 3:1 pour le grand texte. Pour le niveau AAA, les rapports passent à 7:1 et 4,5:1. Le grand texte commence à 18 points, ou 14 points en gras; les équivalents web courants sont 24 pixels CSS ou environ 18,66 pixels en gras.

Le calculateur compose d’abord un texte transparent avec son fond. Il compare ensuite le noir et le blanc et peut ajuster la clarté du premier plan pour viser AA ou AAA.

La couleur ne doit pas transmettre seule une information

Un bon contraste ne résout pas toute l’accessibilité. WCAG demande aussi de ne pas utiliser la couleur comme unique moyen visuel pour communiquer une information.

Un message de réussite vert et une erreur rouge doivent inclure du texte, une icône, une forme ou un autre repère. Cette précaution aide les personnes qui distinguent difficilement certaines teintes.

Construction des harmonies

• Complémentaire : environ 180 degrés d’écart ;
• Analogue : teintes voisines ;
• Triadique : environ 120 degrés entre les couleurs ;
• Complémentaire divisée : une base et deux teintes autour de son opposée ;
• Tétradique et carrée : quatre positions ;
• Monochromatique : une teinte avec des clartés variées ;
• Ombres, éclaircissements et tons : mélanges avec noir, blanc ou gris.

Une harmonie mathématique sert de point de départ. Le système final doit encore définir la hiérarchie, les états interactifs, les erreurs, le focus et les contrastes.

Pourquoi l’espace de mélange change le résultat

Le mélange sRGB direct moyenne des canaux déjà corrigés par gamma. Le RGB linéaire décode d’abord les canaux, moyenne les valeurs lumineuses, puis réapplique l’encodage. Le milieu paraît souvent plus clair.

OKLab interpole des coordonnées perceptuelles et produit souvent une transition numérique plus régulière. Il ne simule toutefois ni un mélange de pigments ni un dispositif physique de lumière.

Créer des dégradés CSS

Le mode dégradé génère des versions linéaires, radiales et coniques. Chaque point possède une couleur et une position entre 0% et 100%. Les versions linéaire et conique acceptent aussi un angle.

Après le calcul, l’outil affiche un aperçu et fournit la déclaration CSS complète. Un écran à faible profondeur de couleur ou une image compressée peut néanmoins montrer des bandes dans les transitions subtiles.

Erreurs fréquentes

• confondre luminosité HSL et luminosité perçue ;
• mesurer une distance RGB au lieu d’un Delta E adapté ;
• tester le contraste sans le vrai fond ;
• ignorer la transparence alpha ;
• supposer que toute couleur Lab ou OKLCh tient dans sRGB ;
• envoyer un CMJN générique directement en production ;
• oublier les états interactifs ;
• communiquer un statut uniquement par la teinte ;
• attendre le même rendu sur tous les écrans.

Vérifier le résultat

Pour le web, contrôlez le CSS final dans les navigateurs visés et testez les vrais arrière-plans. Les états focus, survol, désactivé et erreur nécessitent des mesures distinctes.

Pour l’impression ou une couleur de marque, utilisez un écran calibré, le profil ICC demandé et une épreuve. Lorsque vous transmettez Lab ou XYZ, précisez toujours l’espace et le blanc de référence.

Questions fréquentes

Sources techniques officielles

• W3C CSS Color Module Level 4
• W3C Web Content Accessibility Guidelines 2.2
• Technique W3C G18 sur le contraste du texte
• W3C : contraste des éléments non textuels
• W3C : utilisation de la couleur
• International Color Consortium : format des profils ICC

Sources vérifiées : 21 juin 2026.