Color Basics for Beginners

The 60-30-10 ratio, three safe combos, and contrast checks. Pair with the palette generator and start pulling colors.

60-30-10: ratio before colors

Beginner palettes fail on ratio, not color choice. Memorize 60-30-10: 60% dominant (backgrounds), 30% secondary (sections, cards), 10% accent (buttons, highlights).

Pick the dominant color first (it sets the mood: blue = professional, green = natural, warm = energetic), then the secondary, then the accent. Pull a 5-color set from the generator and assign 3-1-1 for an instantly usable palette.

Three foolproof beginner combos

Monochrome: one hue, varied lightness only. Impossible to break — perfect for reports and formal docs. Analogous: two or three neighbors on the wheel (blue + green), soft and calm, great for blogs and slides.

Complementary accent: safe neutrals everywhere, contrast color only on buttons and highlights (white page + orange button). Contrast is seasoning, not the meal — past 10% it burns.

Contrast: legible beats pretty

Body text needs 4.5:1 contrast against the background, large headings 3:1 — hard WCAG floors. The classic mistake is light-gray text on white: fine in the mockup, invisible on a phone outdoors.

Dark mode is not inverted light mode: after deepening backgrounds and lightening text, re-verify contrast. Link and button colors usually need one step brighter on dark surfaces.

Where to steal inspiration

Nature is the best color teacher: beaches (blue + sand + white), forests (deep green + moss + beige), sunsets (orange + purple + navy) are ready-made 60-30-10s. Movie posters and great app screenshots work too.

For any design you like, ask three questions: what are the dominant, secondary, and accent? Rough ratio? Is the text contrast enough? Ten rounds of this builds your own instinct.

常見問題

I have zero design sense. Now what?

Replace taste with formula: monochrome + 60-30-10 + 4.5:1 contrast. All three together is a solid 70-point palette. The remaining 30 is talent you do not need daily.

My company already has a brand color. How do I match it?

Use it as the 60% dominant directly, then pull secondary and accent from the generator seeded with it. Logo colors usually work as accents only — never as backgrounds.

How do I handle dark mode?

Deep gray backgrounds, not pure black (too harsh); light gray text, not pure white. Brighten brand colors one step on dark surfaces and re-verify contrast before shipping.

Too many colors — help?

Cut to three: one dominant, one secondary, one accent, plus black-white-gray. Clutter always comes from the fourth color onward — turn them all grayscale and it cleans up instantly.