Comment utiliser le sélecteur de couleur
- Choisissez une couleur avec la case de couleur, qui ouvre le sélecteur de votre appareil, ou collez un code dans le champ texte : HEX avec ou sans
#(3, 4, 6 ou 8 chiffres),rgb()etrgba(),hsl()ethsla()avec virgules ou espaces, une simple liste comme31, 78, 121, ou l’un des 148 noms de couleur CSS (en anglais :teal,tomato,navy…). - Prélevez sur une image : chargez, déposez ou collez une photo, un logo ou une capture d’écran, puis cliquez ou touchez l’endroit voulu ; une loupe montre les pixels autour. Dans Chrome, Edge et Opera sur ordinateur, Pipette sur l’écran lit n’importe quel pixel affiché.
- Copiez le format qu’il vous faut. Chaque pastille de la palette copie son code HEX quand vous la touchez.
L’image est lue sur votre appareil et n’est jamais envoyée.
Les formats de couleur expliqués
| Format | Exemple | Utilisé dans |
|---|---|---|
| HEX | #1f4e79 | CSS, HTML, logiciels de design, chartes graphiques |
| RGB (RVB) | rgb(31, 78, 121) | CSS, écrans, retouche photo |
| HSL (TSL) | hsl(209, 59%, 30%) | CSS ; pratique pour éclaircir ou foncer à la main |
| HSV / HSB | hsv(209, 74%, 47%) | Sélecteurs de Photoshop, Figma et logiciels similaires |
| CMJN (CMYK) | cmyk(74%, 36%, 0%, 53%) | Impression (comme simple point de départ) |
Les logiciels en français écrivent souvent RVB (rouge, vert, bleu) pour RGB et CMJN (cyan, magenta, jaune, noir) pour CMYK ; le HSL est parfois appelé TSL (teinte, saturation, luminosité). Les valeurs sont les mêmes, seules les lettres changent.
Le HEX est du RGB écrit en base 16 : chaque paire de chiffres est un canal de 00 à ff (0 à 255), donc 1f = 1 × 16 + 15 = 31. Un septième et un huitième chiffre ajoutent la transparence (alpha), et #abc est l’abréviation de #aabbcc.
Le HSL et le HSV partent de la même teinte, l’angle sur le cercle chromatique (0° rouge, 120° vert, 240° bleu), avec R, V et B ramenés entre 0 et 1. La luminosité vaut L = (max + min) / 2 et la saturation HSL (max − min) / (1 − |2L − 1|). En HSV, la valeur vaut simplement V = max et la saturation (max − min) / max. Voilà pourquoi un rouge pur s’écrit hsl(0, 100%, 50%) mais hsv(0, 100%, 100%).
Le CMJN affiché ici est la conversion des manuels : K = 1 − max, puis C = (1 − R − K) / (1 − K), et de même pour M et J. Les imprimeurs convertissent avec des profils ICC adaptés à leur papier et à leurs encres ; leurs chiffres seront différents.
Le nom CSS le plus proche est trouvé en convertissant les deux couleurs en CIELAB et en prenant la plus petite distance (écart ΔE, CIE76) ; un ΔE d’environ 2,3 est souvent cité comme la plus petite différence perceptible.
Exemple : #1f4e79
Le bleu marine par défaut se découpe en 1f, 4e et 79, soit RGB 31, 78, 121. Le bleu est le canal le plus fort (121 / 255 = 0,475) et le rouge le plus faible (0,122) : V = 47 %, saturation HSV = (121 − 31) / 121 = 74 %, luminosité = (0,475 + 0,122) / 2 = 30 % et saturation HSL = 59 %. Sa teinte vaut 208,7°, affichée 209. Sa luminance relative est de 0,0712 : il atteint un contraste de 8,66:1 avec du texte blanc (AAA), mais seulement 2,42:1 avec du noir. Le nom CSS le plus proche est steelblue, à un ΔE de 21 : le nom ne donne qu’une idée approximative.
Contraste et accessibilité (WCAG 2.2, RGAA)
Le contrôle suit les définitions des Règles pour l’accessibilité des contenus Web (WCAG) 2.2 du W3C. Chaque canal est linéarisé (c / 12,92 jusqu’à 0,04045, sinon ((c + 0,055) / 1,055)2,4), la luminance relative vaut L = 0,2126 R + 0,7152 V + 0,0722 B, et le rapport de contraste (Lclair + 0,05) / (Lfoncé + 0,05), de 1:1 à 21:1.
| Niveau | Texte normal | Grand texte |
|---|---|---|
| AA (critère 1.4.3) | 4,5:1 | 3:1 |
| AAA (critère 1.4.6) | 7:1 | 4,5:1 |
Un grand texte mesure au moins 18 points (24 pixels CSS), ou 14 points en gras (environ 18,7 pixels). En France, le RGAA (référentiel général d’amélioration de l’accessibilité), que doivent respecter les sites publics, reprend les seuils du niveau AA dans son critère 3.2 sur le contraste du texte. Les rapports sont tronqués, jamais arrondis, à deux décimales : 4,499:1 n’apparaît jamais comme conforme, et une couleur transparente est d’abord mélangée au blanc ou au noir avec lequel on la compare.
Nuances et harmonies
Les nuances claires mélangent la couleur avec du blanc par pas de 20 %, les nuances foncées avec du noir : une gamme toute prête pour les survols, les bordures et les fonds. Les harmonies gardent la saturation et la luminosité et font tourner la teinte : la complémentaire est à 180°, les couleurs analogues à 30° de part et d’autre, la triade à 120° d’écart, et les complémentaires adjacentes à 150° et 210°.
Conseils
- Un même code HEX peut sembler différent sur deux écrans (luminosité, mode nuit, écrans à gamut étendu), mais les chiffres restent les mêmes.
- Une photo a rarement une couleur uniforme : cochez Moyenne sur 5 × 5 pixels ou comparez plusieurs points.
- Pour des lettres stylisées, essayez le générateur de police ; pour un code à scanner, le générateur de code-barres ou le générateur de QR code.
Questions fréquentes
Comment convertir un code HEX en RGB ?
Découpez les six chiffres en trois paires et lisez chaque paire comme un nombre en base 16 : #1f4e79 → 1f = 31, 4e = 78, 79 = 121, soit rgb(31, 78, 121). Collez n’importe quel code HEX ci-dessus pour obtenir d’un coup RGB, HSL, HSV et CMJN.
Quelle différence entre HSL et HSV (HSB) ?
Les deux utilisent le même angle de teinte. Le HSL place les couleurs pures à 50 % de luminosité, 100 % donnant toujours du blanc ; le HSV les place à 100 % de valeur, et on obtient le blanc en baissant la saturation. Le CSS utilise le HSL ; les sélecteurs de Photoshop et Figma utilisent le HSV, qu’ils appellent HSB.
La valeur CMJN est-elle prête pour l’impression ?
Non. Elle vient de la formule de conversion simple, qui ignore votre papier, vos encres et votre presse. L’impression professionnelle convertit avec un profil colorimétrique ICC : donnez à votre imprimeur la valeur RGB ou HEX et demandez une épreuve, ou utilisez la référence Pantone ou CMJN de votre charte graphique.
Comment prélever une couleur sur une image ou sur l’écran ?
Appuyez sur Pipette sur une image, choisissez un fichier (ou déposez-le, ou collez une capture d’écran), puis cliquez ou touchez l’endroit voulu ; image sélectionnée, les flèches déplacent le repère et Entrée prélève. Pipette sur l’écran fonctionne dans Chrome, Edge et Opera sur ordinateur ; Firefox, Safari et les navigateurs mobiles ne le permettent pas encore, le bouton y est donc masqué.
Mon image est-elle envoyée quelque part ?
Non. Votre navigateur la décode et la lit ; rien n’est envoyé à un serveur.
Dernière mise à jour : 15 octobre 2026