配色技巧全攻略，基础色彩学与14个配色网站(工具)介绍

配色技巧全攻略，基础色彩学与14个配色网站(工具)介绍

在设计的世界中，色彩不仅是一种视觉上的享受，更是传达情感、塑造氛围和引导观者情绪的关键元素。无论是网站设计、品牌识别还是产品包装，色彩的选择与搭配都直接影响观众的认同感与参与度。然而，对于许多刚踏入设计领域的人来说，掌握配色技巧可能是一个不小的挑战。本文将为您快速了解色彩学的基础，并介绍一些实用的配色技巧，帮助您轻松打造出吸引人、和谐的设计。

基础色彩学

色相 (Hue)

现在，我们从头开始，回到基本的色彩理论出发，先从色相 (Hue)介绍起。色相指的是在不同波长的光照射下，人眼所感觉到的不同颜色。

下图是一张基本的十二色相环，由瑞士设计师伊登所提出，又名伊登十二色环。

原色 (Primary)

让我们先看十二色相环的中间三个“原色”(Primary)，什么是“原色”呢？

所谓的“原色”指的是不能通过组合两种或多种颜色来创建，想象它们就像质数一样，质数不能通过两个数字相乘而产生。

传统色彩理论中的三原色，分别是“红”、“黄”、“蓝”，这其实跟常见的 RGB 或 CMYK 原色不一样，是来自传统艺术家颜料所定义出来的颜色，是三个无法用其他颜色混合出来的原色。虽然它已经不等于现代光光学定义的原色，但对于设计师配色来说，还是很好用的一套理论系统。

二次色 (Secondary)

二次色 (Secondary)，是用原色混合成的三种颜色，分别是：

• 红色＋黄色＝橙色（Orange）
• 红色＋蓝色＝紫色（Purple）
• 黄色＋蓝色＝绿色（Green）

三次色 (Tertiary)

三次色 (Tertiary) 则是用原色与二次色混合出来的六种颜色

• 红色＋紫色＝红紫色 or 洋红色（Red-Purple）
• 红色＋橙色＝橘红色 or 朱红色（Red-Orange）
• 黄色＋橙色＝橘黄色 or 琥珀色（Yellow-Orange）
• 黄色＋绿色＝黄绿色 or 草绿色（Yellow-Green）
• 蓝色＋紫色＝蓝紫色 or 紫罗兰色（Blue-Purple）
• 蓝色＋绿色＝蓝绿色 or 青色（Blue-Green）

并不是每一种原色与二次色都能融合得很协调，例如红色与绿色就无法融洽地组合在一起，蓝色与橙色混合也不好看，会产生难看的褐色。

色系

色系也可以称为色温（不是物理上的色温），将颜色分成暖色与冷色两种，运用人类对颜色的视觉联想，产生不同的感受。

• 暖色系：红、黄、橙等颜色，通常给人活泼、热情、明亮的感受。
• 冷色系：蓝、绿、紫等颜色，通常给人冷静、安静、低调的感受。

明度 (Value)

接下来要讲的是明度，这是调色时常常需要掌握的技巧。明度又可以称为亮度，普遍来说，黄色与黄绿色明度最高，红、绿、橘次之，蓝、紫最低。

另外，明度也可以用混色来调整。

颜色亮度 (Tint)：又称为含白度或浅色度，指的是一个颜色混入不同比例的白色后呈现的效果。

颜色暗度 (Shade)：又称为含黑度或暗色度，指的是一个颜色混入不同比例的黑色后呈现的效果。

也就是说，明度越高，越接近白色，明度越低，越接近黑色。

彩度/饱和度/色度 (Saturation or Chroma)

彩度又称为色度或饱和度，当一个颜色不含黑白灰时，它就是纯度最高的纯色，有最高的色度。一旦混入黑白灰，它的颜色彩度会逐渐降低，变成低彩度的颜色。最终依照混入的程度，变成灰阶颜色。

在混色时，明度与饱和度通常是同时变动的。例如：

• 红色加白色成为粉红色 (明度提高、彩度降低)
• 红色加黑色成为暗红色 (明度降低、彩度降低)

色彩三属性

虽然上面讲了许多种色彩的特性，但在色彩理论中，主要有三大属性用来组成色彩的变动，分别是前面提到的：

• 色相 (Hue)
• 明度 (Value)
• 彩度 (Chroma)

这是由孟塞尔颜色系统所定义的三大属性，可以用来自行调配出各种色彩。

色彩代表的意义

在多个不同国家与文化中，某些色彩通常带有近似的意涵与情绪感受，是全人类与社会通用的。但也有些颜色可能会依照社会历史与政治而有不同意义。理解这些意涵与差异，可以帮助我们有效地配色。

以下是以西方设计为主的常见色彩意义：

• 红色：通常与力量、激情或能量相关，可以鼓舞士气
• 橙色：欢乐和热情，用于传递正面信息的好选择
• 黄色：快乐和智慧，但要小心过度使用
• 绿色：通常与成长或雄心有关，也可能代表大自然或有机的色彩
• 蓝色：宁静和自信，依照色调不同会有差异。浅色调提供平和感，深色更自信
• 紫色：奢华或创意，有时候会代表“聪明”的感觉
• 黑色：力量和神秘，使用这种颜色可以帮助创造必要的负空间
• 白色：安全和纯真，用于极简风格设计

其中黑与白较容易在不同社会与历史下有不同意涵，例如在现代东方，普遍代表丧葬或尊荣两种不同感受，需要视情境谨慎使用。

七种常见配色手法

接下来，我们来介绍 7 种欧美的常用配色手法，这些配色方案给了你一种规则去群找适合自己的颜色，以避免在无数的颜色中迷茫。这七种配色方案分别是：

• 单色组合Monochromatic
• 互补色组合Complementary
• 分裂互补色 SplitComplementary
• 三元组Triadic
• 近似色组合Analogous
• 四色组合Tetradic

通常，建议您先选择好一个“主要颜色”，再搭配这七种方案，就能快速配出合适的颜色。

单色组合Monochromatic

单色组合使用同一颜色的不同色调来做组合，协调性非常高，对许多设计师来说也是非常安全的选择。

互补色组合Complementary

互补色是在色轮上面选择最大程度的对比色，以达到交互强调的效果。使用这种色彩的风格会非常强烈，也不容易驾驭，但适合用在较为外放类型的设。

分裂互补色 Split Complementary

相较于对比极其强烈的互补色方案，分裂互补色取的是互补色的两个邻近色，它可以有效维持互补色的对比效果，但又没那么强烈，视觉风格会柔和一些。

三元组Triadic

三元组使用等边三角形选择法，让颜色均匀分布在色相的范围内，在对比与柔和同时结合起来，但依然能够带来强烈的视觉感受。如果希望设计带有强烈风格，可以选择三个原色或高彩度的颜色，如果希望柔和一点，可以选择三个高明度或粉彩的颜色。也有些人会选择一个高彩度，其他低彩度来做搭配。

三元配色很适合用在信息图表或 UI 元素，或是有多个相同重要性的重点要强调的场合。

近似色组合Analogous

近似色组合是非常柔和的配色，仅次于单色组合，适用于需要一点颜色变化，但又不能过度对比的情况下。这种配色方案非常适合纯暖色(黄、橙、红)或纯冷色(紫、蓝、绿)系。

但用在信息图表或 UI 元素就非常不适用，因为所有颜色会混在一起。

四元组Tetradic

四元组又称为方形配色，四个颜色分布均匀，又属于相近色也属于互补色，没有一个颜色站主导地位，非常平均的一种配色方案。

另外四元组有一个变体是矩形配色，同样是四种颜色，但其中两种的颜色较近似，与辅色的对比也没有那么强烈，是相对柔和的选择之一。

善用色环工具

网路上有很多色环工具，可以依照这七种模式去快速选色，例如 Canva 的Color Wheel 工具，后面我们还会再详细介绍。

配色范例

我们从 Canva 提供的100 种配色范例中取一些来做介绍

清新明亮

新鲜的绿色植物和色彩缤纷的花朵让漫长的冬季过后的春天成为一个吸引人的景象。这个配色方案采用了分裂补色，以红色为主体，另外绿与蓝没有那么强烈，让画面柔和许多。

充满活力的原色

充满生命力的大自然景象。此配色采用了三元组或四元组，对比强烈且每个颜色的重要性一致，共同构成了整体画面。

草莓

非常标准的单色组合的使用，明度从高到低，虽然只有一个色相，但是借助摄影造成的低彩度让画面依旧美丽。

夏日凉饮

使用近似色的方案组成的配色，成功带来非常暖色调的感受。已有研究表明暖色调可以成功刺激人们的食欲，因此用在饮食宣传上面非常有效。

更多配色范例

请见 Canva 的100 inspiring color combinations 文章

配色工具介绍 (色轮)

Canva Color Wheel

Canva Color Wheel可以选择不同的配色方案，用鼠标拖拉产生配色。配到喜欢的颜色后，可以一键前往搜索界面寻找近似色的模板参考。

Figma Color Wheel

Figma Color Wheel同样也有多钟配色方案可以选择，特色是选到喜欢的颜色后，可以按下按钮将这组颜色建立成一个项目，并且自动产生配色档案。

Paletton

Platton是一个很有趣的色轮工具，同样也可以选择多种配色方案，它的色调工具较为灵活，配出来的颜色也较为多样化。另外，右下方还可以产生配色范例与色彩表供汇出。

Color Picker

ColorPicker也是一个色轮工具，但它的色轮比较简单，只有对比色可以用。取而代之的是它会用这个对比色帮你计算出很多搭配用的颜色，并且网下滚之后，还有许多设计案例直接套上你的配色。

另外还有一个小工具叫 Hex Match，可以简单地输入一个颜色，然后产生许多搭配色。

配色工具介绍 (判断图片颜色)

Image Picker

Image Picker可以上传照片，并且自动分析照片中的颜色，是和设计时用来搭配照片做颜色取样。

Brandfolder Color Palette

Brandfolder Color Palette 也是一个抽取颜色的工具，只要拖拉上传图片就能分析图片中的色彩。

Image Color Picker

Image Color Picker不仅可以用分析图片中的颜色，你还可以用加减按钮选择要抽出多少颜色，也可以用取色器吸图片内的颜色。

配色工具介绍 (色票)

Eva Design System

Eva Design System，方便的配色工具，设置主颜色后，自动演算出成功讯息、一般资讯、警告讯息和危险通知颜色等推荐配色。按下“Export”即可轻松汇出当下的配色图档。

Coolors

Coolors是一个简单好用的快速配色工具，按下空白键就能立刻产生一组新配色，产生的颜色都很舒适。免费版一次可以产生五组颜色，但无限制刷新次数。

Material UI Colors & Palettes

Material UI Colors & Palettes是一个很实用的网站，可以快速取得许多框架预先调配好的色彩，包含 Material Design , Metreo, Tailwind 等等，不用花时间去处理 UI 配色问题。

Color Hunt

Color Hunt提供大量色票，这些色票都是人工配出来的，最早是由一群设计师进行分享，后来越来越多人加入分享他们自己常用的色票，因此形成了一个色票收藏库。网站上有方便的过滤器与选单，可以想要的用途、色调、风格等等，寻找所需的色票。

配色工具介绍 (调色与开发工具)

ColorSpace

ColorSpace是多种渐层色工具整合成的网站，有渐层配色推荐、CSS 渐层产生器、与三色渐层产生器，让你用非常简单的界面，迅速取得需要的渐层语法。

Design GUI

Design GUI是一个浏览器外挂，可以方便地让你做各种色彩调配，储存管理色票噢 CSS 变量等信息，同时主打 AI 自动配色功能。

Google 内建调色工具

只要在 Google 搜索

color picker

就会自动跳出简易调色版啦。

结语：色彩学值得设计师认真一看

身为设计师，天天都要处理色彩。虽然现在的配色工具已经很发达，到处都是，但这些配色工具到底是用什么理论产生配色的，还是很值得我们一探究竟。

好的设计师，在配色时会深刻注意视觉上是否舒适，以及其所代表的设计意涵，以求替所有使用者带来良好的用户体验。