Sélecteur de couleur

Comment utiliser le sélecteur de couleur

1. Cliquez sur la pastille sous Choisir une couleur pour ouvrir le sélecteur de votre navigateur, puis choisissez une teinte. Vous pouvez aussi saisir ou coller une valeur dans le champ Code couleur : un code HEX comme #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) ou un nom CSS comme tomato.
2. Le grand aperçu se met à jour aussitôt, avec le code HEX écrit en noir ou en blanc selon ce qui se lit le mieux sur ce fond.
3. Sous Codes couleur, copiez le format voulu avec le bouton Copier placé à côté : HEX, RGB, HSL, HSV ou CMJN (CMYK).
4. Cliquez sur Couleur aléatoire pour trouver l’inspiration, ou sur Pipette à l’écran (dans les navigateurs qui la prennent en charge, comme Chrome et Edge) pour relever n’importe quel pixel de l’écran, y compris dans une autre fenêtre.

Tout se passe dans votre navigateur : aucune couleur ni image n’est envoyée.

Ce que signifie chaque code couleur

• HEX est la notation hexadécimale à six chiffres utilisée en HTML et en CSS. Chaque paire correspond à un canal (rouge, vert, bleu) de 00 à FF : #1E90FF signifie rouge 30, vert 144, bleu 255.
• RGB (ou RVB) donne les trois mêmes canaux en nombres décimaux de 0 à 255. C’est le format attendu par la plupart des logiciels de graphisme et des bibliothèques de programmation.
• HSL (TSL en français : teinte, saturation, luminosité) décrit une couleur par un angle sur le cercle chromatique, de 0° à 360°, puis par sa saturation et sa luminosité. Pratique pour éclaircir ou foncer une couleur en ne changeant qu’un chiffre.
• HSV (ou HSB, TSV en français) utilise la teinte, la saturation et la valeur (la brillance). C’est le modèle des carrés de couleur de Photoshop, Figma et de nombreux éditeurs.
• CMYK (CMJN : cyan, magenta, jaune, noir) exprime la couleur en pourcentages d’encre.

À propos des valeurs CMJN

Le CMJN affiché est une conversion simplifiée : K = 1 − max(R, V, B), puis C = (1 − R − K) / (1 − K), et de même pour M et J. C’est la formule classique des manuels, mais elle n’utilise aucun profil ICC. Le rendu imprimé dépend de la presse, du papier et des encres : votre imprimeur convertira les couleurs avec son propre profil et le résultat pourra différer. Servez-vous de ces valeurs comme point de départ, pas comme épreuve d’impression.

Lire les rapports de contraste

Sous le code HEX, l’aperçu indique le Contraste sur blanc et le Contraste sur noir, calculés avec la formule de luminance relative des WCAG 2. Il faut un rapport d’au moins 4,5:1 pour du texte courant au niveau AA, et de 3:1 pour du grand texte et les éléments d’interface. Si votre couleur n’atteint que 3:1 sur blanc, réservez-la aux grands titres ou aux icônes et choisissez une nuance plus foncée pour le texte.

Astuces

• Vous pouvez coller un code HEX sans le # : 1e90ff fonctionne aussi, tout comme les formes courtes telles que f60.
• Les valeurs avec transparence, comme rgb(0 0 0 / 50%), sont acceptées ; l’outil affiche la couleur opaque.
• La fenêtre de couleur du navigateur varie selon le système. Pour une valeur précise, la saisie dans le champ Code couleur reste toujours exacte.