Analyseur de ratio de couleurs 60:30:10

Importez une image pour regrouper les couleurs proches, comparer l’équilibre dominant/secondaire/accent avec le 60:30:10 et vérifier la répartition de l’accent dans la composition.

Dernière mise à jour : 2026/04/02

Analyseur de ratio de couleurs 60:30:10

Importer une image
Glissez l’image ici ou cliquez pour l’importer
PNG, JPG, GIF, WebP · 10 Mo max. · Analyse uniquement dans le navigateur
Aperçu de l’image importée
Nom du fichier
Taille
Dimensions
Options d’analyse
Si l’image contient de grandes zones neutres, comme un fond blanc ou noir, le poids est ajusté pour ne pas fausser la lecture de la couleur dominante.
Afficher les codes couleur
Vérifiez immédiatement votre équilibre 60:30:10

Importez une image pour regrouper les teintes proches et analyser les proportions dominante, secondaire et accent, ainsi que la place de l’accent.

Analyse des familles de couleurs et de leur répartition…
Analyse en attente Ajustement 60:30:10
0 pt

Importez une image pour voir quelle famille se rapproche le plus du 60 et si la couleur d’accent est suffisamment présente.

Dominante en attente Secondaire en attente Accent en attente
Aperçu de l’analyse Image importée d’origine
Importez une image pour afficher ici la vue représentative.
Image analysée
Répartition cible vs réelle
Analyse réelle
Dominante Secondaire Accent
Objectif 60:30:10
60% 30% 10%
Dominante 0%
Secondaire 0%
Accent 0%
Impact des neutres 0%
Diagnostic de la couleur d’accent
Concentration En attente
Résumé

Après l’analyse, vous verrez si la couleur d’accent se concentre sur une zone ou se disperse largement.

La carte thermique de l’accent apparaîtra ici.
Familles de couleurs par rôle
Dominante 60%
Aperçu de la carte dominante

Après l’import, la famille qui couvre la plus grande surface s’affichera ici.

En attenteDominante
Secondaire 30%
Aperçu de la carte secondaire

Après l’import, la famille qui joue le rôle de couche intermédiaire apparaîtra ici.

En attenteSecondaire
Accent 10%
Aperçu de la carte d’accent

Après l’import, la famille focale et sa tendance de placement apparaîtront ici.

En attenteAccent
Groupes de couleurs proches
Une palette organisée par familles de teintes proches apparaîtra ici.
Interprétation et pistes d’amélioration
  • Importez une image et l’outil résumera automatiquement les ajustements pour se rapprocher du 60:30:10.
Tableau d’analyse
Rôle Nom de la famille Proportion Code principal Commentaire
Le tableau se remplira après l’analyse.
Ce que l’outil observe
  • Dominante 60 % — La plus grande famille, celle qui pose le ton de base de l’image
  • Secondaire 30 % — La couche intermédiaire qui relie la couleur dominante à l’accent
  • Accent 10 % — Une couleur de petite surface mais forte comme point focal
  • Concentration visuelle — Si la couleur d’accent se concentre en un point ou se disperse dans toute l’image

Cet outil analyse l’image uniquement dans le navigateur. La règle 60:30:10 n’est pas une loi absolue, mais une heuristique de design pour lire l’équilibre visuel ; selon l’intention de la scène, une autre répartition peut mieux convenir.

Qu’est-ce que l’analyseur de ratio de couleurs 60:30:10 ?

L’analyseur de ratio de couleurs 60:30:10 regroupe les teintes proches d’une image importée pour montrer quelle famille pose la base visuelle, laquelle joue le rôle intermédiaire et laquelle crée le point d’attention. Il ne se contente pas de retenir les trois plus grandes couleurs : il rassemble les nuances proches dans une même famille pour coller davantage à la perception réelle de l’image.

Le résultat affiche un score d’ajustement par rapport à la répartition 60 % dominante, 30 % secondaire et 10 % d’accent. Il précise aussi quelle famille se rapproche le plus du 60, si la couleur d’accent manque ou déborde, et si elle se concentre sur une zone ou se disperse dans toute l’image. Cela s’utilise aussi bien pour des présentations, des miniatures, des illustrations, des interfaces web ou l’analyse de références visuelles.

Quand utiliser cet outil

  • Analyse de scènes d’animation — Quand vous voulez comprendre pourquoi une scène paraît stable et où agit la couleur focale
  • Décomposition de références de marque ou de miniature — Quand vous devez décomposer rapidement la structure colorée d’une référence en pourcentages et en familles
  • Relecture de maquettes UI — Quand vous voulez vérifier si la couleur d’accent d’un bouton s’étale trop ou si la séparation entre dominante et secondaire reste trop faible
  • Design d’affiches et de bannières — Quand vous cherchez à valider rapidement la répartition entre fond, zones de soutien et points d’accent
  • Étude de color scripts — Quand vous voulez décrire la combinaison de couleurs et le schéma de placement d’une image dans un langage réutilisable

Fonctionnalités principales

  • Regroupement automatique des teintes proches — Même les variations subtiles sont réunies dans une même famille, pour se rapprocher davantage de ce que perçoit l’œil.
  • Score d’ajustement 60:30:10 — Donne une note et une phrase courte pour indiquer à quel point l’image se rapproche de la répartition idéale.
  • Cartes des couleurs dominante, secondaire et accent — Chaque carte réunit la couleur représentative, la proportion, les caractéristiques et une piste d’ajustement.
  • Carte thermique de la couleur d’accent — Permet de voir d’un coup d’œil si la couleur d’accent se concentre en un point ou se disperse dans toute l’image.
  • Mode de réduction de l’influence du fond — Sert à corriger la lecture quand un fond blanc ou une grande zone neutre déséquilibre l’analyse.
  • Consultation des codes HEX/RGB/HSL — Faites passer le code couleur représentatif au format souhaité et copiez-le immédiatement.

Mode d’emploi

  1. Importer une image — Importez la scène, la miniature, l’affiche ou la capture UI que vous voulez analyser.
  2. Choisir le mode d’analyse — Si l’image comporte un grand fond blanc ou noir, il vaut mieux conserver le mode par défaut de réduction de l’influence du fond.
  3. Vérifier le score et les rôles — Commencez par le score affiché en haut et par les proportions dominante, secondaire et accent.
  4. Lire la carte thermique et les conseils — Regardez où l’accent se concentre et si le guide suggère de le réduire ou de le renforcer.
  5. Réutiliser les codes — Reprenez les valeurs HEX, RGB ou HSL affichées dans les cartes et les familles pour votre travail de design.

Comment fonctionne l’analyse ?

L’outil réduit d’abord l’image pour l’échantillonner, ignore les pixels transparents, crée des groupes de couleurs puis fusionne les nuances proches. À partir de ces groupes représentatifs, il répartit les rôles dominante, secondaire et accent, et calcule la surface occupée par chacun.

La couleur d’accent n’est pas choisie simplement comme la troisième couleur la plus grande. L’outil privilégie les groupes plus petits mais assez saturés et contrastés pour attirer le regard. Ensuite, il découpe l’image en grille pour mesurer où cet accent apparaît et si le point focal reste concentré ou dispersé.

Le résultat sert d’aide à l’interprétation. Il ne comprend pas automatiquement la narration, la lumière, la profondeur ou l’intention de marque ; le jugement final doit donc rester lié au contexte réel.

Questions fréquentes

Faut-il respecter la règle 60:30:10 à la lettre ?

Non. La règle 60:30:10 est une heuristique pour juger rapidement l’équilibre visuel. Selon l’intention de la scène, une répartition comme 70:20:10 ou 50:35:15 peut mieux fonctionner. Utilisez-la comme repère, pas comme règle absolue.

Pourquoi regrouper les couleurs proches au lieu de garder simplement les trois plus grandes ?

Dans une image réelle, une même famille chromatique contient souvent de nombreuses variantes de luminosité et de saturation. Si l’on garde seulement les trois couleurs les plus grandes, un bleu ciel et un bleu gris peuvent sembler jouer des rôles distincts alors qu’ils appartiennent au même bloc visuel. L’outil regroupe donc les teintes proches pour une lecture plus naturelle.

Le résultat peut-il sembler étrange sur une image à fond blanc ?

Oui. Un fond blanc, noir ou toute grande zone neutre peut donner l’impression que la couleur dominante prend plus de place qu’en réalité. Dans ce cas, le mode par défaut qui réduit l’influence de l’arrière-plan rapproche le résultat du ressenti visuel réel.

Comment interpréter la carte thermique de la couleur d’accent ?

La carte thermique montre où la couleur d’accent se concentre le plus. Si elle se regroupe d’un côté ou autour d’un point focal, la direction du regard paraît souvent plus nette. Si elle se répartit uniformément sur toute l’image, le point d’attention peut se diluer. Dans les images fondées sur des motifs ou des textures, une certaine dispersion peut rester naturelle ; il faut donc lire le résultat avec son contexte.

L’image importée est-elle stockée sur le serveur ?

Non. L’analyse s’exécute uniquement dans le navigateur et l’image importée n’est pas stockée sur le serveur. Cela permet de vérifier plus sereinement des visuels internes ou des brouillons sensibles.

Avis anonyme 1

Les commentaires pouvant gêner d’autres utilisateurs ou répéter le même message peuvent être masqués ou supprimés selon nos règles de modération.

Caractères restants: 120

Aucun commentaire pour le moment. Laissez le premier avis.