配色是设计里回报率最高的基本功。本文讲清色轮的三个基本属性、互补/类似/三角/分裂互补/单色五种经典方案、60-30-10 比例法则，以及如何免费在线从一张图提取主色并生成协调配色——纯浏览器本地处理。
色轮与颜色的三个属性
聊配色之前先统一语言。任何一种颜色都可以用三个属性描述：
- 色相（Hue）：颜色的「名字」——红、橙、黄、绿、蓝、紫，也就是色轮上 0–360° 的位置。配色方案的本质，就是在色轮上按几何关系挑选色相。
- 饱和度（Saturation）：颜色的「浓淡」。高饱和鲜艳夺目，低饱和接近灰调、更显高级。
- 明度（Lightness）：颜色的「深浅」。加入白色变浅、加入黑色变深。同一色相的不同明度层次，是单色配色的核心手法。
把 12 个基本色相排成一个圆环，就得到色轮。下面所有经典配色方案，都是在这个环上按固定角度取色的。
五种经典配色方案
没有绝对最好的方案，只有适合场景的方案。五种常用方案一览：
| 方案 | 取色方式 | 观感 | 典型场景 |
|---|
| 互补 | 色轮上相隔 180° 的两色（如蓝+橙） | 对比最强、互相衬托 | 强调按钮、行动号召、运动品牌 |
| 类似 | 相邻的 2–3 个色相（如蓝+蓝绿+绿） | 和谐自然、过渡柔和 | 自然系网页、插画、氛围场景 |
| 三角 | 色轮上均分 120° 的三色 | 活泼平衡、色彩丰富但不乱 | 儿童品牌、创意海报、游戏 |
| 分裂互补 | 主色的互补色两侧相邻色 | 有对比但比互补更柔和 | 博客、落地页，比互补更易驾驭 |
| 单色 | 单一色相的不同明度/饱和度 | 极简统一、高级感 | 极简 UI、财报图表、奢侈品牌 |
新手建议：从类似色或单色起步最不容易出错；需要突出某个行动按钮时，再用互补色做点缀——记住「小面积强对比，大面积弱对比」这条铁律。
60-30-10 比例法则
选好了颜色，怎么分配面积？设计行业通用 60-30-10 法则：
- 60% 主导色：页面背景、大面积底色。通常选低饱和的中性色（白、米、浅灰、深灰）；
- 30% 辅助色：次级区块、卡片、分隔区域。用主配色方案的第二个颜色；
- 10% 强调色：按钮、链接、状态提示。用饱和度最高、最抓眼的那一个。
比例悬殊恰恰是画面「稳」的原因——大面积保持安静，小面积制造焦点。常见的新手错误是三种颜色平均使用，页面立刻变得杂乱。
什么时候用哪种方案
按品牌气质选：
- 科技 / 金融 / 专业服务 → 蓝色单色或类似色（可靠、冷静）；
- 健康 / 环保 / 有机 → 绿色类似色（自然、生长）；
- 餐饮 / 促销 / 运动 → 互补色点缀（红橙+蓝绿，制造食欲与紧迫感）；
- 儿童 / 创意 / 娱乐 → 三角配色（活泼、丰富）；
- 奢侈 / 极简 / 作品集 → 单色 + 大留白（克制、高级）。
按使用媒介选：网页与 App 界面优先低饱和背景 + 高饱和强调色；海报与插画可以整体提高饱和度；图表和数据可视化用单色阶区分系列，比随机多色更易读。
实操：从图片提取主色并生成配色
与其凭空硬凑，不如让工具帮你把理论落地。本站 配色 / 调色板生成器 全程在浏览器本地完成，图片不上传：
- 上传参考图：点击或拖入一张你喜欢的风格参考图（照片、海报、截图都可以），一次最多 20 张。
- 提取主色：工具用中位切分法统计像素，自动提取 4/6/8/10 个主色，按占比排序，并显示每个颜色的面积占比。
- 生成配色方案：一键得到互补色（180°）、类似色（±32°）、三角配色（120°）、单色阶（明度阶梯）四种协调方案。
- 导出使用：点击色块复制单个 HEX，或一键复制全部 HEX / CSS 变量，也可以下载 PNG 色卡留给团队。
提取出的统计主色通常会略微发灰，实际使用时可适度提高饱和度，并按 60-30-10 分配面积——这套流程五分钟就能跑完。
常见问题
Q：互补色是什么意思？
A：互补色是色轮上相隔 180° 的两种颜色，例如红与绿、蓝与橙。它们并置时对比最强烈、互相衬托，适合做强调色与按钮等需要醒目的场景。直接大面积等量使用容易显得刺眼，通常以一方为主导、另一方小面积点缀。
Q：类似色和单色配色有什么区别？
A：类似色是色轮上相邻的 2–3 种色相（如蓝、蓝绿、绿），色彩有变化但整体和谐；单色配色只用一种色相，靠明度与饱和度的深浅层次做区分。类似色层次更丰富，单色更极简统一、最不容易出错。
Q：怎么为品牌选择主色？
A：先想清楚品牌要传达的情绪（蓝色可靠专业、绿色健康自然、红色热情紧迫等），再确定主色相与饱和度，然后用配色方案生成辅助色。最后在亮色和暗色两种背景下各验证一次可读性与对比度。
Q：什么是 60-30-10 法则？
A：这是室内与平面设计常用的配色比例：60% 给主导色（通常是背景或大面积底色），30% 给辅助色（次级区块、卡片），10% 给强调色（按钮、链接、重点提示）。比例悬殊的分配让画面既有重点又不混乱。
Q：在线生成配色方案免费吗？
A：本站配色工具完全免费：上传图片即可用中位切分法提取主色，并一键生成互补、类似、三角、单色等协调方案，可复制 HEX 或 CSS 变量、下载 PNG 色卡，全部在浏览器本地完成，图片不上传服务器。
Q：配色方案对设计和品牌有多重要？
A：色彩是用户对品牌的第一印象之一，几秒内形成的第一印象大多来自视觉与色彩。协调的配色能提升可读性、引导视觉焦点、建立品牌记忆；而随意堆色会让界面显得廉价混乱。掌握几种经典方案就能避开大多数配色错误。
免费在线提取主色 & 生成配色方案
一次 20 张 · 互补/类似/三角/单色一键生成 · 复制 HEX 与 CSS 变量 · 纯浏览器本地处理
打开配色工具 →
The Color Wheel & Three Properties of Color
Let's align on vocabulary first. Every color can be described by three properties:
- Hue: the color's "name" — red, orange, yellow, green, blue, purple — i.e., its 0–360° position on the color wheel. Color schemes are essentially sets of hues picked by geometric relationships on that wheel.
- Saturation: how intense the color is. High saturation is vivid; low saturation looks muted and refined.
- Lightness: how light or dark it is. Mix in white for tints, black for shades. Varying lightness within one hue is the core trick of monochromatic design.
Arrange the 12 basic hues in a circle and you get the color wheel. Every classic scheme below is just a fixed-angle recipe for picking colors from it.
Five Classic Color Schemes
No scheme is universally best — only right for the job:
| Scheme | How to pick | Feel | Typical use |
|---|
| Complementary | Two hues 180° apart (e.g., blue + orange) | Maximum contrast, mutually flattering | CTAs, call-to-action buttons, sports brands |
| Analogous | 2–3 adjacent hues (e.g., blue + teal + green) | Harmonious, soft transitions | Nature-themed sites, illustration, moods |
| Triadic | Three hues evenly spaced 120° apart | Lively yet balanced | Kids' brands, creative posters, games |
| Split-complementary | A hue plus the two neighbors of its complement | Contrast, but gentler than complementary | Blogs, landing pages — easier to pull off |
| Monochromatic | One hue in varied lightness/saturation | Minimal, unified, premium | Minimal UI, charts, luxury brands |
Beginner tip: start with analogous or monochromatic — hardest to get wrong. Use a complementary accent only where you need attention (buttons, links). Remember: strong contrast in small areas, soft contrast in large ones.
The 60-30-10 Rule
Once colors are chosen, how should areas be split? Designers commonly use the 60-30-10 rule:
- 60% dominant color: page background and large surfaces — usually a low-saturation neutral (white, beige, light/dark gray);
- 30% secondary color: sections, cards, dividers — the second color of your scheme;
- 10% accent: buttons, links, status hints — the most saturated, most eye-catching one.
The uneven ratio is exactly why the layout feels stable — large quiet areas make small focal points pop. A classic beginner mistake is using three colors equally, which turns any page chaotic.
Which Scheme to Use When
By brand personality:
- Tech / finance / professional services → monochromatic or analogous blues (reliable, calm);
- Health / eco / organic → analogous greens (natural, growth);
- Food / sales / sports → complementary accents (red-orange + teal: appetite and urgency);
- Kids / creative / entertainment → triadic (playful, rich);
- Luxury / minimal / portfolio → monochromatic + generous whitespace (restrained, premium).
By medium: for web and app UI, prefer low-saturation backgrounds with a high-saturation accent; posters and illustrations can be more saturated overall; for charts, a monochromatic scale reads far better than random multi-colors.
How to Extract Colors & Build a Palette
Rather than guessing, let a tool put theory into practice. This site's Color Palette Generator runs entirely in your browser — images are never uploaded:
- Upload a reference: drop in any style reference (photo, poster, screenshot), up to 20 at a time.
- Extract dominant colors: a median-cut algorithm analyzes pixels, pulls 4/6/8/10 dominant colors ranked by coverage.
- Generate schemes: one click yields complementary (180°), analogous (±32°), triadic (120°), and monochromatic (lightness steps) variants.
- Export: click a swatch to copy its HEX, copy all HEX / CSS variables at once, or download a PNG swatch card for your team.
Statistically extracted colors often look slightly gray — nudge saturation up as needed, then distribute by 60-30-10. The whole loop takes about five minutes.
FAQ
Q: What does complementary color mean?
A: Complementary colors sit 180° apart on the color wheel — red/green, blue/orange. Side by side they create the strongest contrast and flatter each other, great for accents and buttons. Using them in equal large areas is harsh; let one dominate and use the other sparingly.
Q: Analogous vs monochromatic — what's the difference?
A: Analogous uses 2–3 neighboring hues (blue, teal, green) — varied yet harmonious. Monochromatic sticks to one hue, differentiating through lightness and saturation. Analogous offers more variety; monochromatic is more minimal and nearly foolproof.
Q: How do I choose a brand's primary color?
A: Start with the emotion you want (blue = reliable, green = natural, red = passionate), fix the hue and saturation, then generate supporting colors from a scheme. Finally verify readability on both light and dark backgrounds.
Q: What is the 60-30-10 rule?
A: A common interior and graphic design ratio: 60% dominant (usually the background), 30% secondary (sections, cards), 10% accent (buttons, links, highlights). The uneven split keeps a layout focused yet not chaotic.
Q: Are online color scheme generators free?
A: This site's palette tool is completely free: upload an image to extract dominant colors via median cut, then generate complementary, analogous, triadic, and monochromatic schemes with one click. Copy HEX or CSS variables, download a PNG card — all processed locally, nothing uploaded.
Q: How much do color schemes matter for design and branding?
A: Color is a huge part of first impressions — most of what users feel within seconds comes from visuals. A coherent palette improves readability, guides attention, and builds brand memory; random colors make interfaces feel cheap. Mastering a few classic schemes avoids most color mistakes.
Extract Colors & Generate Palettes — Free
20 images at once · Complementary/Analogous/Triadic/Mono in one click · HEX & CSS variables · Runs in your browser
Open Palette Generator →