60:30:10 Color Ratio Analyzer

What Is the 60:30:10 Color Ratio Analyzer?

The 60:30:10 Color Ratio Analyzer groups similar colors in an uploaded image so you can see which color family builds the base of the frame, which one works as the middle bridge, and which one creates the point of focus. Instead of simply picking the top three colors, it merges nearby shades into one family so the readout stays closer to the way the image actually feels.

The results show a fit score for the 60% dominant, 30% secondary, and 10% accent balance, plus which family is closest to 60, whether the accent is too weak or too strong, and whether it clusters in one area or spreads across the frame. It works well for presentations, thumbnails, illustrations, web UI, and scene-reference analysis.

Use It in These Situations

• Animation scene analysis — When you want to understand why a scene feels stable and where the point color is doing its work
• Brand or thumbnail reference breakdown — When you want to break down a reference image into numeric ratios and color families
• UI mockup review — When you need to check whether button accents spread too widely or whether dominant and secondary colors are not separated clearly enough
• Poster and banner design — When you want a quick read on whether background, support areas, and accent points are split appropriately
• Color-script study — When you want to record the color mix and placement pattern of a favorite image in reusable language

Key Features

• Automatic grouping of similar shades — Even subtle variations are grouped into one color family so the result stays closer to what your eye actually perceives.
• 60:30:10 fit score — Shows how close the real image ratio is to the ideal split with both a score and a short explanation.
• Dominant, secondary, and accent role cards — Each card combines a representative color, share, characteristics, and improvement hint for one role.
• Accent placement heatmap — Lets you see at a glance whether the accent color is concentrated in one place or scattered across the whole frame.
• Background-reduction mode — Helps rebalance the readout when a white background or another large neutral area would otherwise skew the dominant color.
• HEX/RGB/HSL code view — Lets you switch representative color codes to the format you want and copy them directly.

How to Use It

1. Upload an Image — Upload the scene, thumbnail, poster, or UI capture you want to analyze.
2. Choose an analysis mode — If the image has a large white or black background, it is usually best to keep the default Reduce Background Influence mode turned on.
3. Review the score and roles — Start with the fit score at the top and the dominant, secondary, and accent ratios.
4. Check the heatmap and insights — Read where the accent color gathers and whether the guide suggests reducing or increasing it.
5. Use the codes in your workflow — Use the HEX, RGB, or HSL values shown in the role cards and grouped families for design work.

How does the analysis work?

This tool downsamples the image, ignores transparent pixels, creates color clusters, and then merges nearby shades together. It uses those representative color groups to assign dominant, secondary, and accent roles and calculates how much area each group covers.

The accent color is not chosen by simply taking the third-largest color. Instead, the tool prioritizes groups that occupy a small area but have enough saturation and contrast to pull the eye. It then divides the image into a grid to measure where the accent appears and whether the point of focus is clustered or dispersed.

The result is an interpretation aid, not a final design judgment. It does not automatically understand story, lighting, depth, or brand intent, so you should review the output together with the context of the image.

Frequently Asked Questions