Sélecteur de couleur : le code exact d’une couleur dans une image ou à l’écran

Comment utiliser le sélecteur de couleur

1. Chargez une image. Déposez un fichier, choisissez-en un ou collez une capture d’écran depuis le presse-papiers. PNG, JPEG, WebP, GIF, AVIF, BMP et SVG jusqu’à 40 Mo fonctionnent partout ; le HEIC seulement là où votre navigateur sait l’ouvrir, et un fichier qu’il ne sait pas ouvrir reçoit un message clair au lieu d’un écran vide. L’outil échantillonne le bitmap en pleine résolution, pas la copie réduite que vous voyez à l’écran. Seules les images de plus de 16,7 mégapixels sont lues à partir d’une copie réduite, et l’outil vous le signale. Il liste aussi les couleurs dominantes de l’image avec leur part.
2. Visez avec la loupe. La loupe montre la grille de pixels autour du pointeur de la souris ou de votre doigt, pour que vous voyiez si vous êtes sur une zone unie ou sur un bord lissé. Au clavier, les touches fléchées déplacent le point de prélèvement d’un pixel (Maj : dix) et Entrée le prélève.
3. Choisissez une taille d’échantillon. 1 pixel donne la valeur brute ; une moyenne 3×3 ou 5×5 lisse le bruit JPEG et le grain des photos. J’utilise 1 pixel pour les logos et les interfaces, une moyenne pour les photos.
4. Ou prélevez à l’écran. Dans les navigateurs Chromium sur ordinateur (Chrome, Edge, Opera), le bouton pipette permet de cliquer sur n’importe quel pixel de votre affichage, même hors de la fenêtre du navigateur. Firefox et Safari n’ont rien de tel ; l’outil vous le dit et vous renvoie vers la voie de l’image.
5. Ou saisissez un code. Collez #1d4ed8 (3, 4, 6 ou 8 chiffres), rgb(29 78 216), hsl(224 76% 48%), une valeur hsv(), oklch() ou cmyk(), ou un nom de couleur CSS, et tous les autres formats se mettent à jour. Un interrupteur bascule la sortie entre le CSS moderne, séparé par des espaces, et l’ancienne syntaxe à virgules.
6. Rassemblez et exportez. Ajoutez vos prélèvements à la palette, enregistrée dans votre navigateur, puis copiez-la ou téléchargez-la en propriétés personnalisées CSS, en SCSS, en JSON ou en simple liste HEX.

HEX, RGB, HSL, HSV et OKLCH : quel code choisir

L’OKLCH vient du module CSS Color niveau 4 et c’est la forme cylindrique de l’espace Oklab. Son axe L est conçu pour suivre la clarté apparente d’une couleur, ce que la luminosité HSL rate complètement. Le jaune pur et le bleu pur sont tous deux à L 50% en HSL, pourtant l’un est presque blanc pour l’œil et l’autre est sombre :

C’est pourquoi je construis chaque rampe de nuances en OKLCH : des paliers égaux en L paraissent égaux, d’une teinte à l’autre, et le contraste du texte devient bien plus prévisible.

Exemple détaillé : convertir #1D4ED8

De HEX à RGB. Découpez en paires et lisez chacune en base 16 :

De RGB à HSL. Ramenez à l’échelle de 0 à 1 : R = 0,1137, G = 0,3059, B = 0,8471. Max = 0,8471 (bleu), min = 0,1137, écart d = 0,7333.

De RGB à HSV. V = max = 84,7 % ; S = d / max = 0,7333 / 0,8471 = 86,6 % ; la teinte est la même, 224,3°, donc hsv(224.3 86.6% 84.7%).

De RGB à CMYK. K = 1 − max(R, G, B) = 1 − 0,8471 = 15,3 % ; puis C = (1 − R − K) / (1 − K) = 86,6 %, M = 63,9 %, Y = 0 %, affiché cmyk(87% 64% 0% 15%). C’est de l’arithmétique simple, pas un profil d’encre.

De RGB à OKLCH. Chaque canal est linéarisé (on annule la courbe gamma sRGB), converti en Oklab par deux matrices fixes avec une racine cubique entre les deux, puis a et b deviennent la chroma et la teinte. Le résultat est oklch(48.82% 0.2172 264.38), que le CSS accepte aussi sous la forme oklch(0.4882 0.2172 264.38). La teinte OKLCH (264°) diffère de la teinte HSL (224°) parce que les roues chromatiques sont construites différemment.

Pourquoi une couleur prélevée peut s’écarter de quelques unités

Deux personnes qui prélèvent la même couleur de marque peuvent obtenir #1D4ED8 et #1E4FD6 sans que l’un des outils se trompe :

• La compression JPEG stocke la couleur à résolution réduite et par blocs de 8×8, si bien que des pixels voisins dans une zone unie varient de quelques unités. Si neuf valeurs de rouge donnent 27, 29, 31, 28, 30, 29, 26, 32, 29, leur moyenne est 261 ÷ 9 = 29, la valeur que le graphiste a très probablement utilisée.
• Les captures d’écran redimensionnées mélangent les pixels. Une capture Retina réduite de moitié mélange chaque bloc de 2×2, si bien que le texte fin et les bords deviennent des couleurs intermédiaires.
• L’anticrénelage sur les bords et le texte crée des pixels de transition qui n’appartiennent à aucune des deux couleurs. Prélevez au milieu d’un aplat, jamais sur la bordure.
• La pipette d’écran renvoie ce qui est affiché, après la gestion des couleurs et des fonctions comme Night Shift ou True Tone, et elle donne un HEX sRGB. La valeur du fichier peut différer ; pour des valeurs exactes, prélevez dans l’image elle-même.

Transparence. Dans #1D4ED880, la dernière paire est l’alpha : 80 en hexadécimal = 128, et 128 ÷ 255 = 0,502, soit environ 50 % d’opacité. En CSS, l’alpha vient en dernier ; l’ARGB d’Android le place en premier, une confusion fréquente. Ce que vous voyez dépend du fond : sur du blanc, chaque canal devient 0,502 × couleur + 0,498 × 255, ce qui donne à peu près #8EA6EB. L’outil conserve l’alpha des PNG, WebP et autres formats qui en ont, et vous prévient quand le pixel prélevé n’est pas totalement opaque. Un pixel entièrement transparent est signalé comme transparent au lieu d’être pris à tort pour du noir, et les moyennes sont pondérées par l’alpha pour que les pixels translucides n’entraînent pas le résultat vers le noir.

Tons clairs, tons foncés et palettes

Classiquement, un ton clair est une couleur mélangée avec du blanc, un ton foncé une couleur mélangée avec du noir et un ton grisé une couleur mélangée avec du gris. Un mélange en RGB donne des paliers inégaux ; la rampe de l’outil conserve donc la teinte et la chroma en OKLCH et fait varier la luminosité en dix paliers égaux, de L 96 % à 24 %, en réduisant la chroma seulement quand une couleur sortirait du gamut sRGB ; le palier le plus proche de votre couleur est repéré. Les rangées de tons clairs, de tons foncés et de tons grisés sont de simples mélanges sRGB avec du blanc, du noir et du gris moyen par paliers de 10 %, pratiques pour des états de survol et de désactivation rapides. Vous pouvez copier la rampe en variables CSS ou poursuivre directement en CSS avec la syntaxe de couleur relative, par exemple oklch(from var(--brand) calc(l + 0.15) c h).

Pour chaque couleur, l’outil nomme aussi la plus proche parmi les 148 couleurs nommées CSS, toutes en sRGB, en mesurant la distance dans l’espace OKLab, et vous dit si la correspondance est exacte (#663399 est exactement rebeccapurple, #808080 est gray, aussi écrit grey) ou seulement la plus proche (#1D4ED8 est le plus proche de royalblue).

Six harmonies de couleurs sont construites par rotation de la teinte : complémentaire, analogue, triadique, complémentaire divisée, tétradique et carré. Le tétradique est ici le rectangle (+60°, +180°, +240°), qui n’est pas le carré (+90°, +180°, +270°). Pour #1D4ED8, le complément est #D8A71D, la deuxième couleur tétradique est #A71DD8 et la deuxième couleur du carré est #D81DAC. Chaque jeu se copie en variables CSS.

Vérifier le contraste selon les WCAG

Le rapport de contraste WCAG vaut (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre. La luminance vaut 0,2126 R + 0,7152 G + 0,0722 B sur les canaux sRGB linéarisés, ce qui explique que le vert compte dix fois plus que le bleu.

• AA : 4,5:1 pour le texte normal, 3:1 pour le grand texte (au moins 18 pt, ou 14 pt en gras).
• AAA : 7:1 pour le texte normal, 4,5:1 pour le grand texte.
• Contraste des éléments non textuels pour les icônes, les bordures de champs et les anneaux de focus : 3:1.

Les WCAG précisent que le rapport calculé ne doit pas être arrondi : 4,499:1 échoue donc à 4,5:1. Le cas classique, ce sont deux gris voisins sur du blanc. Pour #767676 : 76 en hexadécimal = 118, 118 ÷ 255 = 0,4627, linéarisé ((0,4627 + 0,055) / 1,055)^2,4 = 0,1812, rapport 1,05 / 0,2312 = 4,54:1. Pour #777777 : valeur linéaire 0,1845, rapport 1,05 / 0,2345 = 4,48:1.

Le vérificateur de l’outil utilise exactement cette formule. Il affiche le rapport, cinq pastilles conforme ou non conforme (AA et AAA pour le texte normal et le grand texte, plus 3:1 pour les éléments d’interface et les icônes), une jauge et un aperçu en direct. Le rapport a deux décimales, mais quand l’arrondi franchirait un seuil, il en montre trois : #007BC8 sur blanc s’affiche donc 4,499:1 et échoue, au lieu d’un trompeur 4,50. Le texte semi-transparent est mélangé au fond avant la mesure. Quand une paire échoue à l’AA, l’outil propose la couleur conforme la plus proche : il garde la teinte et la chroma OKLCH et ne déplace que la luminosité, si bien que #777777 sur blanc devient #767676.

Notre bleu d’exemple #1D4ED8 sur blanc donne 6,70:1 : suffisant pour le texte courant en AA, mais en dessous de l’AAA. Dans mon propre travail, je vise 4,5:1 pour tout texte, même les grands titres, parce que la marge couvre les écrans bon marché et les pièces très lumineuses.

Comment fonctionne le sélecteur de couleur et comment il est vérifié

Les images sont décodées dans un canvas sur votre appareil et lues pixel par pixel ; rien n’est envoyé à un serveur, et votre palette (jusqu’à 48 couleurs) ne vit que dans votre navigateur. La pipette d’écran utilise l’API EyeDropper, qui exige une page sécurisée (HTTPS) et un clic pour démarrer, et ne fonctionne que dans les navigateurs basés sur Chromium ; dans Firefox et Safari, passez par l’image. Les conversions suivent les formules de CSS Color 4 pour sRGB, HSL, HSV et OKLCH. Les valeurs ne sont arrondies que pour l’affichage (HSL et HSV à une décimale ; luminosité OKLCH en pourcentage à deux décimales, chroma à quatre et teinte à deux) ; la conformité du contraste est décidée sur le rapport non arrondi. Le CMYK utilise la formule simple K = 1 − max(R, G, B) sans profil ICC : considérez-le comme approximatif.

Aller plus loin

• Comment prélever une couleur dans une image
• HEX, RGB, HSL et OKLCH expliqués
• Le contraste des couleurs pour l’accessibilité