KivTools

Trouver les couleurs dominantes et leurs codes HEX

Choisissez ou collez une image, sélectionnez de 4 à 12 couleurs et extrayez la palette. Cliquez sur une nuance pour copier son code HEX ; les teintes représentent approximativement les couleurs dominantes.

Fonctionne localement dans votre navigateur
Voir la catégorie: Frontend et design (34)
Les pixels sont échantillonnés et réduits dans ce navigateur uniquement. L'image n'est jamais publiée sur KivTools ou sur un service d'imagerie.
Source des images

Déposez une image ici, collez-en une ou choisissez un fichier local

Options des palettes

Les pixels transparents sont ignorés. Les grandes images sont sous-échantillonnées avant analyse afin que le navigateur reste réactif ; les échantillons représentent les régions de couleur dominantes, et non les pixels exacts.

Utilisez la palette

Cliquez sur n’importe quel échantillon pour copier sa valeur hexadécimale. Associez les choix de premier plan et d’arrière-plan avec l’auditeur d’accessibilité pour vérifier le contraste WCAG.

Vérificateur de contraste ouvert
Palette extraite

Choisissez une image pour extraire une palette de couleurs locale.

Trouvez des couleurs utilisables sans envoyer un élément de conception

L'extracteur échantillonne un canevas réduit dans le navigateur et conserve le fichier original sur votre appareil. Pour un travail d'interface utilisateur accessible, validez chaque paire finale texte/arrière-plan séparément au lieu de vous fier uniquement à une palette.

Comment extraire une palette de couleurs d’une image

L’extracteur de couleurs construit une palette pratique à partir d’une image locale : déposez-la, collez-la ou choisissez un fichier, sélectionnez de 4 à 12 couleurs et copiez les valeurs HEX directement dans votre CSS.

L’image est échantillonnée sur un canevas réduit dans cet onglet : rien n’est envoyé. Le résultat approche les couleurs dominantes ; ce n’est pas une pipette qui relève chaque pixel exact.

  1. Ajoutez une image : déposez-la dans la zone prévue, collez-la quand la page a le focus, ou choisissez un fichier local — PNG, JPEG, WebP, GIF, AVIF ou BMP, jusqu’à 40 Mo.
  2. Choisissez le nombre de couleurs à conserver : 4, 5, 6, 8, 10 ou 12. La valeur par défaut est 6.
  3. Cliquez sur Extraire les couleurs. Les pixels dont l’alpha est inférieur à 90 sont ignorés : la palette ne provient donc que des zones opaques.
  4. Cliquez sur une nuance pour copier son code HEX ; chaque nuance affiche aussi la valeur rgb() et sa part des pixels échantillonnés. Charger un exemple synthétique utilise une image de test intégrée de 960 × 560.
  5. Effacer réinitialise l’image et les résultats. Pour vérifier un couple texte/fond issu de la palette, poursuivez dans l’Auditeur d’accessibilité.

Comment la palette est calculée et ce que signifient les pourcentages

Des groupes dominants, pas des pixels exacts

L’image est dessinée sur un canevas dont le plus grand côté est ramené à 420 pixels, puis lue sur une grille qui échantillonne au plus environ 140 000 pixels. Les couleurs sont réparties en groupes de 4 bits par canal ; les groupes sont classés par nombre de pixels, et les couleurs distantes de moins de 28 sont fusionnées avant le choix final de 4 à 12.

Chaque nuance est la moyenne de son groupe : le résultat résume donc des régions dominantes. Dégradés fins, trames, traits d’un pixel et bords adoucis peuvent disparaître à la réduction — considérez ces valeurs comme des points de départ, pas comme des mesures fidèles.

Lire les nuances

Le pourcentage sous une nuance correspond à la part des pixels opaques échantillonnés tombés dans ce groupe ; le total approche 100 %. Le nombre choisi est un maximum : une image unie donne une seule nuance à 100 %, et une image à peu de couleurs distinctes en donne moins.

Une image entièrement transparente indique 0 couleur dominante et n’affiche aucune nuance. Les nuances sont de vrais boutons, accessibles au clavier, et chaque copie est confirmée dans la ligne d’état — ou signalée comme bloquée si le navigateur refuse le presse-papiers.

Traitement local et limites pratiques

L’analyse se déroule entièrement dans l’onglet : le navigateur décode le fichier, le canevas est lu via les API de pixels, et aucune donnée d’image n’est transmise, l’outil fonctionne donc aussi hors ligne. Lors d’un test sur Chrome pour ordinateur, une photo de 4000 × 3000 a été analysée en environ 0,2 seconde.

La limite de 40 Mo existe parce que le décodage a lieu dans le navigateur. Pour l’accessibilité, validez chaque couple final texte/fond dans le vérificateur de contraste plutôt que de considérer la palette comme une garantie WCAG.

Outils récents :