Sélecteur de couleur en ligne

Un sélecteur de couleur et un générateur de palette

Ce sélecteur de couleur (ou color picker) sert à trouver une teinte et à récupérer son code couleur dans toutes les notations utiles : HEX, RGB, HSL et CMJN. Il affiche aussi le nom CSS le plus proche, un nuancier de neuf teintes, les harmonies de la couleur, son contraste avec le blanc et le noir, et il compose une palette de couleurs de cinq tons assortis.

Comment choisir une couleur

1. Cliquez ou faites glisser dans le carré « Saturation et luminosité », puis réglez le curseur « Teinte ». Les flèches du clavier fonctionnent aussi. Le « Sélecteur du navigateur » et, dans Chrome ou Edge sur ordinateur, le bouton « Pipette » complètent le tout.
2. Ou saisissez un code dans le champ HEX, RGB ou HSL : tapez rgb(0,128,0) et vous obtenez #008000, que le CSS appelle green. Chaque ligne a son bouton « Copier ».
3. Sous « Nuances » et « Harmonies de couleurs », un clic sur une pastille la sélectionne et copie son code.
4. « Générer une palette » (ou la barre d'espace) tire cinq couleurs. Cochez « Verrouiller » sous celles que vous gardez, puis relancez. « Copier les codes HEX », « Copier en variables CSS » et « Enregistrer la palette » font le reste : dix palettes au plus restent sur l'appareil.

La couleur courante s'inscrit dans l'adresse de la page, après le signe #. Envoyez cette adresse à quelqu'un : il verra la même couleur. Elle est aussi retenue pour votre prochaine visite.

HEX, RGB, HSL : quelle notation utiliser ?

Les trois décrivent exactement les mêmes couleurs d'écran. HEX est la plus compacte : #1f5fe0 tient en sept caractères, c'est celle que l'on colle dans une feuille de style ou un logiciel de dessin. RGB donne les doses de rouge, de vert et de bleu de 0 à 255 : rgb(31, 95, 224). HSL sépare la teinte (un angle de 0 à 360°), la saturation et la luminosité : hsl(220, 76%, 50%). C'est la plus commode pour modifier une couleur de tête : on éclaircit en montant le dernier chiffre, on change de couleur en tournant le premier. Le site propose aussi des convertisseurs dédiés à chaque paire de formats, par exemple HEX en RGB.

Choisir des couleurs qui vont ensemble

Imaginez toutes les teintes rangées sur un cercle : rouge à 0°, vert à 120°, bleu à 240°. Les harmonies sont de simples écarts d'angle. Partons du bleu #1f5fe0, teinte 220° :

• Complémentaire (220 + 180 = 40°) : l'orangé #e0a01f.
• Analogues (190° et 250°) : #1fc0e0 et #401fe0.
• Triade (340° et 100°) : #e01f5f et #5fe01f.

L'outil ajoute la tétrade (tous les 90°) et les complémentaires adjacentes (±150°). Pour doser, les décorateurs et les graphistes s'appuient souvent sur le repère 60-30-10 : 60 % de couleur dominante (murs, fond de page), 30 % de couleur secondaire (mobilier, encadrés), 10 % de couleur d'accent (coussins, boutons).

Lisibilité : le contraste d'abord

Un texte se lit bien quand sa luminosité tranche avec celle du fond. Les règles d'accessibilité WCAG mesurent cet écart par un rapport allant de 1:1 à 21:1 (noir sur blanc). Elles demandent au moins 4,5:1 pour un texte normal, niveau AA, parce qu'en dessous les personnes dont la vue baisse, ou toute personne lisant en plein soleil, peinent à déchiffrer. Un grand texte (24 px, ou 18,66 px en gras) se contente de 3:1. Le niveau AAA exige 7:1 et 4,5:1.

Deux gris presque identiques montrent la limite : #767676 sur blanc donne 4,54:1 et passe, #777777 donne 4,47:1 et échoue. Le jaune #ffff00 sur blanc tombe à 1,07:1 : illisible.

Pensez aussi au daltonisme, qui touche environ 8 % des hommes et 0,5 % des femmes : rouge et vert peuvent se confondre. Ne transmettez jamais une information par la couleur seule. Un champ en erreur doit porter un message ou une icône, pas seulement un liseré rouge.

Écran et impression

Un écran émet de la lumière et mélange du rouge, du vert et du bleu (RVB). Une imprimante dépose des encres cyan, magenta, jaune et noire (CMJN) sur du papier. Les couleurs très vives d'un écran n'existent pas en encre : un bleu électrique sortira plus terne. Le code CMJN affiché ici est une conversion théorique, sans profil colorimétrique.

Codes des couleurs courantes

Questions fréquentes

Comment trouver le code couleur d'une image ou d'un site ?

Avec le bouton « Pipette », quand votre navigateur le propose : cliquez dessus, puis sur le point de l'écran qui vous intéresse. Son code s'affiche aussitôt dans les quatre notations.

Que signifie « Nom CSS le plus proche » ?

Le CSS connaît 140 couleurs par leur nom anglais, de aliceblue à yellowgreen. L'outil cherche celle dont les valeurs RGB sont les plus voisines de votre couleur et précise « correspondance exacte » quand les codes sont identiques.

Comment sont calculées les nuances ?

Le nuancier garde la teinte et la saturation de votre couleur et fait varier la luminosité HSL de 90 % à 10 %, par pas de 10. Pour #1f5fe0, la plus claire est #d2dff9, la plus foncée #06132d.

Comment garder une couleur dans la palette ?

Cochez « Verrouiller » sous cette couleur. À la prochaine génération, elle reste à sa place et les autres sont tirées autour de sa teinte. Les palettes enregistrées restent dans votre navigateur, sur cet appareil seulement.