Sélecteur de couleur et extracteur de palette : prélevez des couleurs depuis une image

Importez n'importe quel JPG, PNG, WebP ou GIF et cliquez où vous voulez sur l'image affichée — le pixel exact sous votre curseur est échantillonné et affiché en HEX, RGB et HSL, avec copie en un clic pour chaque format. Parfait pour retrouver la couleur d'une marque, prélever une teinte sur une photographie ou récupérer des tons d'accent sur une maquette de design.

Cliquez sur n'importe quel pixel et cet outil de sélection de couleur affiche son code couleur HEX (par exemple #FF6B35) aux côtés des valeurs RGB et HSL — les mêmes codes couleur HTML/CSS que vous collez directement dans une feuille de style, un design token ou un attribut HTML. Cliquez sur Copier pour récupérer le code hexadécimal en un clic.

L'image est réduite à 320 pixels sur son côté le plus long, puis chaque pixel est regroupé selon ses 4 bits de poids fort par canal. Les groupes les plus peuplés sont ramenés en moyenne à une couleur complète sur 8 bits, triés par fréquence, et renvoyés sous forme de palette. Le résultat compte généralement de 5 à 24 couleurs dominantes qui résument visuellement l'image.

Oui. Les boutons de téléchargement produisent deux formats : un bloc de variables CSS prêt à coller dans un sélecteur :root (--color-1, --color-2…), et un fichier JSON contenant le code hexadécimal, les composantes RGB et le pourcentage de poids de chaque couleur. Les deux formats s'intègrent proprement aux design tokens, aux configurations Tailwind et aux bibliothèques de palettes.

Non — la sélection de couleurs et l'extraction de palette se déroulent entièrement dans votre navigateur grâce à l'API canvas HTML. L'image reste sur votre appareil, ce qui rend l'outil sûr pour des photos de produits non publiés, des maquettes provisoires et des ressources de marque sous accord de confidentialité.

Pour un travail d'identité de marque, 5 à 8 couleurs constituent le compromis idéal : cela capture le thème dominant sans diluer les choix de couleurs d'accentuation. Pour la visualisation de données, nous recommandons 10 à 16 couleurs afin de disposer d'assez de teintes catégorielles. Le curseur vous permet de choisir entre 5 et 24.

Les pixels dont la valeur alpha est inférieure à 128 sont ignorés, si bien que les fonds transparents ne polluent pas la palette avec des couleurs « d’arrière-plan ». La pipette à couleurs d’image est donc particulièrement efficace pour les détourages de produits, les visuels de stickers et les sujets isolés.

Le HEX (#RRGGBB) est le plus compact et c'est celui qu'utilisent par défaut CSS, Figma et Sketch. Le RGB affiche les trois valeurs de composantes de 0 à 255 — pratique pour manipuler des données d'image par programmation. Le HSL (teinte, saturation, luminosité) est intuitif pour ajuster les couleurs : décalez la teinte pour changer de famille de couleurs, ajustez la luminosité pour les nuances claires et foncées.

Oui. Gratuit, sans compte requis, sans limite de taille d'image ni de nombre de palettes extraites. Rien à installer : l'outil tient entièrement sur une seule page web.

Aucune image n'est nécessaire. Le sélecteur de couleur et la roue chromatique en haut fonctionnent à eux seuls — faites glisser le carré saturation/luminosité et le curseur de teinte, ou saisissez une valeur HEX, RGB ou HSL pour régler une couleur précise. L'import d'une image est facultatif, uniquement pour prélever des couleurs sur une photo à la pipette.

Choisissez votre couleur de base et le panneau Harmonies de couleurs construit instantanément des combinaisons complémentaires, analogues, triadiques, complémentaires divisées, tétradiques et monochromatiques selon la théorie de la roue chromatique. Cliquez sur un échantillon pour copier son code HEX.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Cliquez sur Aléatoire dans le Sélecteur de couleur et roue chromatique pour passer à une nouvelle couleur, puis utilisez le panneau Harmonies de couleurs juste en dessous pour voir les palettes complémentaires, analogues, triadiques et autres combinaisons construites à partir de cette couleur — un moyen rapide de trouver un point de départ lorsque vous créez à partir de rien plutôt que d'échantillonner une image existante.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.