Couleurs et images : conversion, contraste, palettes

Cinq panneaux partagent un même moteur de couleur : Convertir (HEX, RGB, HSL, HSV, CMYK, LAB, LCH), Contraste (le ratio WCAG avec pastilles AA/AAA), Palettes (six schémas d'harmonie, teintes et nuances, aperçus de daltonisme), Image (couleur moyenne, palette dominante, histogramme RVB d'un fichier) et Photographie (profondeur de champ, exposition, astro, sortie). Chaque panneau a sa propre adresse — /life/color/convert, /life/color/contrast, /life/color/image, /life/color/photo — et s'exécute dans le navigateur.

更新 2026-10-015 个来源约 5 分钟读完

Mode d'emploi

Convertir une couleur.Réglez le sélecteur ou saisissez une valeur HEX, ou faites glisser les curseurs R/G/B et H/S/L ; huit cartes se mettent à jour ensemble, chacune copiable, et la couleur CSS nommée la plus proche indique sa distance ΔE₇₆.
Vérifier le contraste.Choisissez premier plan et arrière-plan : un ratio, quatre pastilles (AA/AAA, texte normal et grand) et un échantillon en direct. Si AA normal échoue, cliquez sur la nuance suggérée pour appliquer une correction de luminosité seule atteignant 4.5 : 1.
Construire une palette.Six lignes — complémentaire, complémentaire divisée, triadique, tétradique, analogue, monochrome — suivent la couleur de base, puis une bande de 13 niveaux de teintes et nuances ; chaque échantillon se copie en HEX. L'aperçu du daltonisme montre un schéma choisi en protanopie, deutéranopie et tritanopie.
Lire une image.Un fichier choisi est décodé localement et réduit à 480 px de large au maximum. Cliquez un pixel pour HEX, RGB et HSL ; le panneau ajoute la couleur moyenne, jusqu'à six couleurs dominantes issues d'un median cut et un histogramme RVB à 64 classes.
Planifier une prise de vue.Les onglets Photographie couvrent la profondeur de champ, l'exposition (EV, échelle d'obturation, filtres ND et compte à rebours, sunny-16, flash), l'astro (règles 500 et NPF, filés d'étoiles, phase lunaire) et la sortie (taille d'impression, estimation de fichier, time-lapse).

Exemples calculés

Sorties issues des valeurs par défaut de cette page.

Vous saisissez	La page affiche
`#4a90e2`	hsl(212, 72%, 59%), hsv(212, 67%, 89%), cmyk(67%, 36%, 0%, 11%), lab(58.87 3.995 -48.11), lch(58.87 48.27 274.7), luminance 0.2689, plus proche cornflowerblue · #6495ed · ΔE₇₆ = 6.26
`#999999` sur blanc	2.85 : 1 — les quatre pastilles échouent ; le premier plan suggéré #757575 donne 4.61 : 1
`#767676`, puis `#777777`, sur blanc	4.54 : 1 passe AA normal et les deux pastilles de grand texte ; 4.48 : 1 échoue AA normal de 0.02
Base de palette `#4a90e2`	triadique #4a90e2 / #e24a90 / #90e24a ; teintes et nuances #e5effb → #0b1520 ; paire complémentaire en deutéranopie #6b66ce / #cbd06b
Photo : 50 mm, f/8, 3 m, plein format ; f/8, 1/250 s, ISO 100	proche 2.36 m, loin 4.12 m, total 1.76 m, hyperfocale 10.88 m ; EV 13.97 ; ND1000 sur 1/125 s donne 8.2″
Photo : 24 mm, f/2.8, 24 MP, déclinaison 0° ; 6000 × 4000 px à 300 dpi	règle 500 20.8 s, NPF 11.6 s, filé 6.1 px ; impression 50.8 × 33.9 cm, Excellent, RAW 14 bits 24.8 MB

Les chiffres WCAG derrière les pastilles

Chaque canal sRGB est linéarisé (÷12.92 sous le point de rupture 0.04045, sinon ((v + 0.055) / 1.055)²·⁴), la luminance relative vaut L = 0.2126 R + 0.7152 G + 0.0722 B, et le ratio de contraste vaut (L_light + 0.05) / (L_dark + 0.05) — noir sur blanc 21.00 : 1, couleurs égales 1.00 : 1. Seuils : AA normal 4.5, AA grand 3.0, AAA normal 7.0, AAA grand 4.5. Les cartes de conversion suivent sRGB → RVB linéaire → XYZ (D65) → CIELAB → LCH ; la carte du nom le plus proche utilise ΔE₇₆ face aux 148 mots-clés CSS.

Hypothèses et limites

sRGB uniquement.: Ni profil d'écran ni contrôle de gamut ; la carte CMYK est une simple soustraction c/m/y/k — une valeur de dialogue, pas une épreuve d'impression.
Arrondi d'affichage.: LAB et LCH affichent quatre chiffres significatifs et les ratios deux décimales ; les verdicts comparent la valeur non arrondie.
Analyse, pas édition.: Le panneau Image n'écrit jamais de pixels : ni recadrage, ni redimensionnement, ni filtre, ni conversion de format, ni export. La planification de prise de vue appartient au panneau Photographie, les heures du ciel au panneau Astronomie Soleil et l'empaquetage binaire des couleurs au calculateur programmeur.

Le piège du seuil de grand texte

La pastille que l'on lit mal est AAA grand : elle exige 4.5 : 1, comme AA normal, et non le 3 : 1 que permet AA grand — réussir le « grand texte » en AA ne garantit rien en AAA. Sur blanc, #767676 donne 4.54 : 1 et passe AA normal plus les deux pastilles de grand texte (AAA normal exige 7.0), tandis que #777777 donne 4.48 : 1 et échoue AA normal de deux centièmes. « Grand » signifie 18 pt normal ou 14 pt gras, et le ratio est symétrique : échanger texte et fond ne change rien.

Où elle aide

Travail d'interface et de marque

Vérifiez le corps de texte et les boutons sur les deux fonds, gardez une paire de mode sombre honnête, tirez une harmonie de six couleurs d'un logo et voyez si une palette d'état rouge/vert survit à la deutéranopie.

Photographie et travail d'image

Échantillonnez la couleur moyenne et les couleurs dominantes d'une photo avant de choisir une teinte de superposition, puis vérifiez si 50 mm à f/8 tient un sujet à 3 m dans 1.76 m, jusqu'où ND1000 étire 1/125 s, ou combien de vues 24 MP remplissent un time-lapse de 100 s.

La couleur dans le code et l'impression

Transmettez à un développeur la chaîne exacte hsl(212, 72%, 59%) ou LAB, vérifiez un hex marketing sur une page blanche ou contrôlez une lecture CMYK avant d'envoyer un visuel à un imprimeur.

Références

W3C, WCAG 2.2 — Contrast (Minimum) and Contrast (Enhanced), w3.org （访问日期：2026-10-01）— les seuils 4.5 : 1, 3 : 1 et 7 : 1 et la définition du grand texte.
W3C, WCAG 2.2 — relative luminance, w3.org （访问日期：2026-10-01）— les coefficients et l'offset de 0.05 derrière chaque ratio.
Wikipedia, CIELAB color space, en.wikipedia.org （访问日期：2026-10-01）— la transformation XYZ vers Lab et la forme polaire LCH des cartes de résultat.
Wikipedia, Median cut, en.wikipedia.org （访问日期：2026-10-01）— l'algorithme de couleur dominante derrière les six échantillons d'image.
Wikipedia, Depth of field, en.wikipedia.org （访问日期：2026-10-01）— la distance hyperfocale et les limites proche et lointaine que rapporte l'onglet Photo.