We're live on Product Hunt!Support us
ColorArchive

A curated color library with 5,000+ algorithmically generated colors. Browse, search, save favorites, and export palette tokens — no account required.

CollectionsFamiliesNotesGuidesFree ResourcesConvertColorblindAboutSupportUpdates
Ready for static export
Privacy·Terms·Refunds·Cookies·Commerce Disclosure
colorarchive.org · © 2026 ColorArchive
Skip to content
ColorArchive
ProLog in
ArchiveAll ColorsCollections
Issue 032
2026-06-25

The 60-30-10 ratio is a heuristic, not a law — but it points at something real

Interior designers talk about color distribution as 60% dominant, 30% secondary, 10% accent. The specific numbers are not sacred, but the underlying logic — that a small high-saturation color should be balanced by a large neutral — applies cleanly to interface design.

SystemsPaletteUI
Highlights
The 60-30-10 heuristic works because high-saturation colors are perceptually heavy — they attract attention regardless of size. A small accent dot can visually dominate a large neutral surface if the saturation gap is large enough.
In interface design, the ratio translates roughly to: background surfaces (60%), content surfaces and borders (30%), interactive and semantic accents (10%). Violations look like accent overuse — too much high-saturation color reduces its ability to signal importance.
The practical implication: if everything in the interface feels loud, the fix is rarely to reduce the accent color — it is to increase the neutral surface area so the accent has breathing room.

Why proportional color logic exists

Color has perceptual weight. A highly saturated color demands attention with a force disproportionate to its area — a small red button will draw the eye before a large gray panel, even though the panel occupies ten times the space. Proportional color logic exists to manage this asymmetry: by limiting the area of high-weight colors, designers preserve their ability to signal importance. When everything is saturated, nothing can signal importance. The 60-30-10 framework describes a distribution that preserves this signal — the 10% accent exists to be noticed precisely because 90% of the composition is quieter.

Translating the heuristic to interface design

The exact ratios shift between interior design and screen design, but the logic transfers. Backgrounds and large content surfaces should be low-saturation — near-white, warm gray, or deeply desaturated in dark themes. Secondary elements like cards, borders, dividers, and secondary text take a slightly more present tone, still restrained but visually distinct from the background. Interactive elements — buttons, links, highlights, status indicators — get the accent color, applied sparingly enough that every instance of it reads as intentional. The Quiet Luxury collection is designed around this distribution: a pale warm neutral anchors the surface, a muted mid-tone handles secondary depth, and a slightly richer warm accent provides the interactive signal without ever becoming loud.

Accent overuse and how to identify it

Accent overuse is easy to diagnose: convert the screen design to a hue map — a view that shows only the saturation and hue of each element, ignoring lightness. In a well-balanced design, most of the map will be gray or near-gray, with the accent color appearing in small, deliberate clusters around interactive elements. In an overloaded design, the saturated color will appear everywhere — in decorative backgrounds, illustration fills, progress indicators, chips, tags, and banners. Each individual use may seem justified, but the collective effect dilutes the accent's ability to guide attention. The fix is to reduce accent usage in decorative and non-interactive contexts, not to change the accent color itself.

Featured collection
Quiet Luxury

Soft neutrals and muted warm surfaces for editorial, beauty, and premium product work.

Open collectionSearch family
Open next
Open Quiet Luxury collectionExplore Brand Starter KitBrowse color collectionsJoin updates
Related guides
brand color palette ideas
Brand Color Palette Ideas That Hold Up Beyond the Launch
A practical guide to building a brand color palette that survives product growth, campaign work, and interface expansion without turning into disconnected swatches.
luxury neutral color palette
Luxury Neutral Color Palette Ideas Without Defaulting to Black and White
How to build a luxury-neutral color palette that feels premium, warm, and editorial rather than empty, flat, or aggressively minimal.
Newer issue
Value contrast does more work than hue contrast — and most palettes get this backwards
2026-06-18
Older issue
Why semantic color tokens are worth the extra naming effort
2026-07-02