Sélecteur de couleur : HEX, RGB, HSL et CMJN
Choisissez n’importe quelle couleur et copiez son code dans tous les formats courants. Prélevez des couleurs dans une photo ou directement à l’écran, trouvez des nuances plus claires et plus foncées, et vérifiez que le texte restera lisible.
----Nuances, du clair au foncé
Couleurs assorties: complémentaire, complémentaires adjacentes, analogues, triade
- Sur blanc
- -
- Sur noir
- -
Choisissez une couleur pour commencer.
Comment utiliser le sélecteur de couleur
Cliquez sur la case couleur pour ouvrir le sélecteur de votre appareil, ou tapez un code HEX comme #1E90FF dans le champ voisin. Le grand aperçu se met à jour et tous les codes en dessous changent avec lui. Appuyez sur Copier à côté d’un format pour le copier dans le presse-papiers, prêt à coller dans du CSS, une appli de design ou un document.
Pour reprendre une couleur d’une photo ou d’un logo, choisissez Prélever dans une image, chargez le fichier et touchez l’endroit voulu. L’image reste sur votre appareil. Dans Chrome et Edge sur ordinateur, vous avez aussi Prélever à l’écran, une pipette qui prélève n’importe quel pixel de l’écran, même hors du navigateur.
HEX, RGB, HSL et CMJN expliqués
- HEX est le code à six chiffres utilisé sur le web, comme #FF5733. Chaque paire de chiffres donne la quantité de rouge, vert et bleu, de 00 à FF.
- RGB donne ces trois mêmes quantités sous forme de nombres de 0 à 255. Les écrans créent chaque couleur en mélangeant de la lumière rouge, verte et bleue.
- HSL décrit une couleur par sa teinte (sa position sur la roue chromatique, de 0 à 360°), sa saturation (son intensité) et sa luminosité. C’est le format le plus simple pour éclaircir, foncer ou adoucir une couleur à la main.
- CMJN est le mélange d’encres cyan, magenta, jaune et noire utilisé en impression. Les valeurs ici sont une conversion directe ; les imprimeurs utilisent des profils de couleur, demandez donc une épreuve si la couleur exacte compte.
Nuances et couleurs assorties
La rangée Nuances garde la teinte et la saturation et fait varier la luminosité du très clair au très foncé, pratique pour les survols, bordures et fonds d’une même famille. La rangée Couleurs assorties applique les règles de la roue chromatique : la complémentaire opposée à votre couleur, les deux complémentaires adjacentes, deux voisines analogues et deux couleurs en triade, à un tiers de tour. Touchez une pastille pour en faire la couleur principale.
Contraste et lisibilité
Les cases de contraste indiquent la lisibilité de votre couleur en texte sur blanc et sur noir, selon le rapport de contraste WCAG. Un rapport de 4,5:1 valide le niveau AA pour le texte normal, 3:1 le niveau AA pour les grands textes comme les titres, et 7:1 le niveau plus strict AAA. Si la couleur de votre marque échoue sur blanc, prenez une nuance plus foncée pour le texte et gardez l’originale pour les boutons et accents.
Les couleurs selon les écrans
Un même code peut paraître légèrement différent d’un écran à l’autre, car luminosité, gamut et calibrage varient. Les téléphones à écran OLED grand gamut affichent souvent des couleurs plus vives qu’un moniteur de bureau. Si la fidélité des couleurs compte, vérifiez votre design sur plusieurs appareils.
Sélecteur de couleur : questions fréquentes
Comment trouver le code HEX d’une couleur ?
Choisissez la couleur avec la case couleur, ou chargez une image et touchez la couleur voulue. Le code HEX apparaît en haut de la liste, prêt à copier.
Puis-je prélever une couleur à l’écran ?
Oui, dans Chrome et Edge sous Windows, Mac et Linux. Appuyez sur Prélever à l’écran et cliquez sur n’importe quel pixel. Les autres navigateurs ne gèrent pas encore la pipette : utilisez Prélever dans une image.
Comment convertir HEX en RGB ?
Tapez ou collez le code HEX dans le champ. Les valeurs RGB, HSL et CMJN se mettent à jour aussitôt.
L’image que je charge reste-t-elle privée ?
Oui. L’image est lue dans votre navigateur et n’est jamais envoyée.
Quel contraste faut-il pour du texte ?
Au moins 4,5:1 pour le texte normal et 3:1 pour les grands textes pour respecter le niveau WCAG AA.
Les valeurs CMJN sont-elles exactes pour l’impression ?
Ce sont des conversions directes. Les imprimeurs ajustent selon le papier et l’encre avec des profils de couleur : demandez une épreuve quand la couleur exacte compte.