Sélecteur de couleur en ligne

La pipette de la page d'accueil part d'une photo : vous chargez une image et vous y prélevez des pixels. Cette page part d'une valeur de couleur. Utilisez-la quand vous connaissez déjà le code hexadécimal (tiré d'une charte graphique, d'une capture d'écran ou transmis par un collègue) et qu'il vous faut les conversions, les déclinaisons, les contrôles d'accessibilité et les extraits de code qui vont avec.

L'hexadécimal à trois, quatre, six ou huit chiffres, avec ou sans dièse ; rgb() et rgba(), avec des virgules ou des espaces ; hsl() et hsla() ; et n'importe lequel des 148 mots-clés de couleur CSS, comme rebeccapurple ou cornflowerblue. Une saisie illisible laisse la couleur en cours inchangée au lieu de la réinitialiser.

HSL n'est pas perceptuellement uniforme : deux couleurs de même clarté HSL peuvent sembler de luminosité très différente, d'où des palettes HSL irrégulières. OKLCH corrige ce défaut et il est pris en charge par tous les navigateurs actuels. C'est pourquoi les déclinaisons, les harmonies et la couleur accessible suggérée sur cette page sont toutes calculées en OKLCH.

C'est la formule standard non calibrée, celle qu'emploient la plupart des outils web, et elle donne une bonne idée générale. Ce n'est pas une conversion avec gestion des couleurs : un vrai travail d'impression demande un profil ICC pour la presse et le papier employés. Prenez la valeur CMYK d'ici comme un point de départ à transmettre à votre imprimeur, pas comme une spécification définitive.

C'est la distance CIEDE2000 entre deux couleurs, une mesure de l'écart que l'on perçoit. En dessous de 1, personne ne voit la différence. Autour de 2, un œil attentif la voit en plaçant les couleurs côte à côte. Au-delà de 10, elles paraissent différentes. Elle reflète ce que l'on voit bien mieux qu'une comparaison des valeurs RGB.

Par la formule des WCAG 2.1 : la luminance relative de chaque couleur en lumière linéaire, puis (la plus claire + 0,05) / (la plus foncée + 0,05). Le niveau AA exige 4,5:1 pour le corps de texte et 3:1 pour le grand texte ou les composants d'interface ; le niveau AAA exige 7:1 et 4,5:1. Le rapport ignore totalement la teinte, ce qui explique que deux couleurs puissent paraître très différentes et échouer quand même.

Non. La page embarque les calculs colorimétriques en JavaScript et les exécute entièrement dans votre navigateur. Changer de couleur ne déclenche aucun appel d'API, rien n'est journalisé, et une fois chargée, la page fonctionne même hors connexion.

Oui. Une valeur de couleur n'est pas protégeable par le droit d'auteur et rien ici n'est soumis à licence. Les échelles, harmonies et extraits de code générés sont à vous, pour n'importe quel projet. Attention toutefois : une couleur précise peut faire partie d'une marque déposée lorsqu'elle est associée à un logo ou à une catégorie de produits. Copier la couleur exacte d'un concurrent relève donc du droit plutôt que de la technique.

Collez le code HEX dans le champ en haut de cette page. Il est converti aussitôt en RGB, HSL, HSV, CMYK, OKLCH et 28 autres formats, et chaque valeur se copie d'un clic. Les six chiffres HEX forment trois paires, rouge, vert et bleu, qui vont de 00 à FF, soit de 0 à 255 en RGB.

Pour un texte courant, le niveau AA des WCAG demande au moins 4,5:1 entre le texte et le fond, et le niveau AAA demande 7:1. Un grand texte (24 px, ou environ 19 px en gras) demande 3:1 pour le niveau AA. Saisissez vos deux couleurs dans le vérificateur de contraste de cette page pour voir le ratio et les niveaux atteints.

Utilisez le simulateur de daltonisme de cette page. Il montre votre couleur telle que la voient les personnes atteintes de protanopie, de deutéranopie, de tritanopie ou d'achromatopsie, et liste des couleurs proches qui leur paraîtraient identiques. Si deux états ne se distinguent que par le rouge et le vert, ajoutez aussi une forme, une icône ou un libellé.