Après l’import, la famille qui couvre la plus grande surface s’affichera ici.
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.
Analyseur de ratio de couleurs 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.
Importez une image pour voir quelle famille se rapproche le plus du 60 et si la couleur d’accent est suffisamment présente.
Après l’analyse, vous verrez si la couleur d’accent se concentre sur une zone ou se disperse largement.
Après l’import, la famille qui joue le rôle de couche intermédiaire apparaîtra ici.
Après l’import, la famille focale et sa tendance de placement apparaîtront ici.
- Importez une image et l’outil résumera automatiquement les ajustements pour se rapprocher du 60:30:10.
| Rôle | Nom de la famille | Proportion | Code principal | Commentaire |
|---|---|---|---|---|
| Le tableau se remplira après l’analyse. | ||||
- 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
- Importer une image — Importez la scène, la miniature, l’affiche ou la capture UI que vous voulez analyser.
- 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.
- Vérifier le score et les rôles — Commencez par le score affiché en haut et par les proportions dominante, secondaire et accent.
- 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.
- 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.
Aucun commentaire pour le moment. Laissez le premier avis.