Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Choisit une couleur sur un champ OKLCH : la luminosité monte le long du champ, le chroma le traverse, et la teinte est la bande en dessous. Cette disposition est tout l’intérêt — dans le carré HSV familier, « la même couleur, un peu moins saturée » est un déplacement en diagonale que personne ne trouve, et ici c’est un déplacement horizontal. Il prend aussi une couleur à l’écran là où le navigateur le permet, et sur une image que vous déposez, ce qui marche partout.
Choisir
La luminosité monte dans le champ, le chroma le traverse, et la teinte est la bande du dessous. Les hachures veulent dire que la couleur existe mais que sRGB ne sait pas l’afficher.
Cette couleur
L
62,3
C
0,1880
H
259,8°
Notations
- hex
#3b82f6 - rgb
rgb(59 130 246) - hsl
hsl(217.22 91.22% 59.8%) - hwb
hwb(217.22 23.14% 3.53%) - lab
lab(54.619% 8.763 -65.791) - lch
lch(54.619% 66.372 277.59) - oklab
oklab(62.308% -0.0332 -0.1851) - oklch
oklch(62.308% 0.188 259.81) - named
#3b82f6
Prélever dans une image
Déposez une capture d’écran ou une photo
Cliquez n’importe où dessus pour prendre ce pixel.
Tout reste dans cet onglet. Utile quand l’API EyeDropper manque, c’est-à-dire dans la plupart des navigateurs.
Convertir des notations en série ? Le convertisseur de couleurs s’en charge. Construire une palette entière à partir de celle-ci ? Le générateur de palettes la fait tourner en OKLCH.
Comment s’en servir
Réglez d’abord la teinte, puis déplacez-vous sur le champ
La bande choisit la teinte ; le champ montre ensuite toutes les luminosités et tous les chromas disponibles à cette teinte. Faire l’inverse revient à courir après la couleur, parce que changer la teinte redessine le champ entier.
Ou prenez-en une à l’écran
« Prélever à l’écran » ouvre la pipette du navigateur et lit n’importe quel pixel du bureau, y compris dans d’autres applications. Elle n’existe que dans les navigateurs fondés sur Chromium ; ailleurs, le bouton le dit au lieu d’échouer en silence.
Ou déposez une capture d’écran et cliquez dedans
Le panneau image en bas accepte n’importe quelle image et vous rend le pixel exact que vous cliquez. C’est le chemin qui marche dans tous les navigateurs, et celui à employer quand la pipette manque.
Copiez dans la notation que le code attend
Toutes les notations sont listées d’un coup, chacune avec son bouton de copie. Prenez l’hexadécimal pour une feuille de style qui doit marcher partout, et la valeur `oklch()` quand la couleur compte plus que la compatibilité — l’hexadécimal est une approximation ramenée dans le gamut dès que l’échantillon sort du sRGB.
Gardez celles que vous comparez
« Garder celle-ci » conserve jusqu’à douze échantillons dans une rangée où vous pouvez revenir. Ils ne vivent que dans la page : un rechargement les efface.
Questions fréquentes
Le bouton de pipette à l’écran ne fait rien d’utile. Pourquoi ?
Il a besoin de l’API EyeDropper, que seuls les navigateurs fondés sur Chromium ont livrée — Chrome, Edge, Arc, Brave. Firefox et Safari ne l’ont pas, et il n’existe aucun polyfill parce que lire des pixels arbitraires de l’écran est un privilège qu’une page ne peut pas s’accorder elle-même. Chargez plutôt une capture d’écran dans le panneau image ; elle donne la même réponse.
Pourquoi une grande partie du champ est-elle hachurée ?
Ces combinaisons de luminosité et de chroma existent en OKLCH mais le sRGB ne sait pas les afficher à cette teinte. C’est une propriété réelle de l’espace, pas un bug, donc la région est hachurée au lieu d’être peinte avec la couleur la plus proche affichable — un mur de couleur uni y serait un mensonge sur ce que votre écran sait faire. « Ramener dans le sRGB » réduit le chroma jusqu’à ce que la couleur tienne, en gardant la luminosité et la teinte.
La pipette conserve-t-elle la précision d’un gamut large ?
Non. L’API rend une chaîne hexadécimale sRGB, donc une couleur Display P3 affichée à l’écran a déjà été convertie au moment où cette page la voit. Pour une couleur P3 dont vous connaissez la valeur, tapez la forme `oklch()` ou `color(display-p3 ...)` dans le convertisseur de couleurs.
L’image que je dépose est-elle envoyée quelque part ?
Non. Elle est décodée dans un canvas de cet onglet et lue pixel par pixel là. Rien ne quitte le navigateur, et fermer l’onglet la jette.
À alimenter depuis
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.
Générateur de palette
Palette Generator
Construit une palette harmonieuse à partir d’une couleur de base, selon les règles complémentaire, triadique et analogue.
Générateur de dégradé CSS
CSS Gradient Builder
Compose des dégradés linéaires, radiaux et coniques avec des arrêts déplaçables et rend le CSS, en sRGB ou en OKLCH.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Échelle de teintes et de nuances
Tint & Shade Scale
Produit une échelle de luminosité de 50 à 950 à partir d’une seule couleur, à pas perceptuellement réguliers, prête à servir de jetons de design.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.
Extraire la palette d’une image
Palette Extractor
Tire d’une image une palette du nombre de couleurs voulu et l’exporte en hexadécimal, en variables CSS ou en nuancier ASE.
Générateur de palette
Palette Generator
Construit une palette harmonieuse à partir d’une couleur de base, selon les règles complémentaire, triadique et analogue.
Calculateur de format d’image
Aspect Ratio Calculator
Trouve la dimension manquante pour un rapport visé et liste les tailles normalisées qui lui correspondent.