使用方法

1. 在色轮上点击任意位置选择颜色，或调整色相、饱和度、亮度的滑块。
2. 在色轮下方以 HEX、RGB 和 HSL 格式查看所选颜色。
3. 点击配色样本，查看互补、类似、三元和分裂互补搭配方案。

常见问题

什么是色彩搭配（Color Harmony）？

色彩搭配指基于颜色在色轮上的位置产生的赏心悦目的组合。常见搭配包括互补色（相对）、类似色（相邻）和三元色（等距）。

HEX、RGB 和 HSL 有什么区别？

HEX 是 6 位十六进制代码（#RRGGBB）。RGB 使用红、绿、蓝三个值（0–255）。HSL 使用色相（0–360°）、饱和度（0–100%）和亮度（0–100%）。

可以在设计中使用这些颜色吗？

当然！复制任意值并直接粘贴到您的 CSS、设计软件或 Web 应用中。所有值都符合标准并被广泛支持。

色轮简史

第一个色轮出自艾萨克·牛顿之手。在《光学》（1704年）中，他记述了1672年首次向皇家学会展示的棱镜实验，证明白光是各种光谱色的混合，并将光谱排列成一个封闭圆形，使红色末端与紫色末端相接。他以类比七声音阶的方式命名了七种颜色（红、橙、黄、绿、蓝、靛、紫），因为他相信颜色与和声共享数学结构。靛青作为独立于蓝色的色带，是这一审美选择最著名的牺牲品。

歌德的《颜色学》（1810年）以感知而非物理学为中心重构了色轮。他将颜色对称排列为「加号」暖色和「减号」冷色两半，并指出对立颜色「在眼睛中相互激发」，这是对抗色过程理论的早期表述，预示了米歇尔·欧仁·谢弗勒尔于1839年从哥白林挂毯工厂发表的同时对比定律。

阿尔伯特·孟塞尔的《颜色符号系统》（1905年）是首个以测量的人类感知为基础而非惯例的色轮，将色相、明度（亮度）和彩度（饱和度）分离为独立维度，是每一个现代感知颜色空间的直接前身，包括CIELAB和OKLCH。设计师在学校学到的色轮则更年轻：约翰内斯·伊顿于1919年至1922年在包豪斯学校整理出12色RYB色轮，确定了三种原色（红、黄、蓝）、三种二次色、六种三次色和七种颜色对比类型。屏幕上实际使用的色轮又有不同：HSL和HSV是20世纪70年代在PARC和其他图形实验室发明的RGB的圆柱重参数化，目的是让设计师能用三个直观滑块（「这个色相，更鲜艳，更亮」）思考，而不是三个不透明的RGB通道。最新的进展是OKLCH（Björn Ottosson，2020年12月），现已纳入CSS颜色模块第4级，在这个色轮中等角度步长对应等感知色相步长。

三种色轮类型

「色轮」这个词掩盖了一个事实：实际上存在三种不同的色轮，各自适用于不同的物理场景：

• RYB（红、黄、蓝），伊顿推广的艺术教学色轮。这是一种基于颜料实践经验的惯例，而非物理模型。任何红、黄、蓝颜料的组合都无法调配出所有可见颜色。
• RGB（红、绿、蓝），加色混合。用于所有颜色为发光的场景：显示器、手机、投影仪、舞台灯光。基于人体生理学，人类视网膜有三种锥细胞，分别对长、中、短波长敏感。浏览器和CSS使用RGB，因此本工具的HSL色轮是sRGB的极坐标重参数化。
• CMY/CMYK（青、品、黄+黑），减色混合。用于所有颜色为反射的场景：印刷、油墨、染料。混合会降低亮度；商业印刷商添加黑色以获得真正的黑色并节省油墨。

实际影响：本色轮导出的HEX、RGB和HSL值是屏幕精准的。它们不是颜料精准的，CMYK印刷输出需要单独转换，这一步骤通常由印刷商代为处理。

HSL如何映射到圆形

HSL代表色相、饱和度、亮度。色相是围绕中心轴的角度，红色在0°，绿色在120°，蓝色在240°，循环回到360°仍是红色。饱和度从0%（灰色）到100%（完全鲜艳）。亮度从0%（黑色）经过50%的自然色相到100%（白色）。从几何上看，该模型是一个双锥体（两个锥体顶对顶），最饱和的颜色在赤道处。HSV类似但使用「明度」代替「亮度」，最饱和的颜色在V=100处，整个模型呈单锥体形状。

CSS的 hsl() 函数接受相同的三个数值。现代语法以空格分隔，可在斜杠后添加可选透明度：

hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%)        /* turns also accepted */

旧版的逗号分隔写法 hsl(210, 80%, 50%) 和 hsla() 别名仍受支持，以保持向后兼容。CSS颜色模块第4级的基础HSL部分从大约2015年起已被各浏览器广泛支持，现代语法的支持稍晚。

诚实的注意事项：HSL不是感知均匀的。L=50%的黄色看起来比L=50%的蓝色亮得多，尽管两者的亮度数值相同；以恒定S和L按色相切片的色轮，视觉上黄色偏重、蓝色偏弱。对于数据可视化和精心校准的品牌调色板，新的 oklch() 颜色空间是更好的选择，等角度步长对应等感知色相步长。对于随手拾取颜色并获取HEX值，HSL完全够用。

经典配色方案及其数学原理

每种配色方案都由相对于基础色相的一组角度偏移来定义。设B为您所选的色相：

方案	色相	情感
单色	B（仅改变S和L）	细腻、低对比、宁静
类比色	B − 30°, B, B + 30°	丰富、和谐，适合日落、植被题材
互补色	B, B + 180°	动感、抓人眼球
分裂互补色	B, B + 150°, B + 210°	强对比但比纯互补色柔和
三色	B, B + 120°, B + 240°	对比鲜明，兼具平衡与丰富感
四色（矩形）	B, B + 60°, B + 180°, B + 240°	两对互补色，以其中一对为主
正方形	B, B + 90°, B + 180°, B + 270°	均匀四向分割，平衡难度较高

这些角度是从歌德和伊顿传承下来的教学惯例，并非心理物理学定律。它们能可靠地产生对比与平衡，这正是设计师依赖它们的原因，但它们是启发式规则而非定律。请将上方的配色色板视为迭代的起点。

何时使用色轮

• 网页与UI设计。选定品牌主色，派生出危险/行动按钮的互补强调色，派生出图表的三色第三色。然后检查与背景和文字的对比度。
• 品牌标识。Logo颜色加上一套记录在案的配色方案，用于营销材料。
• 数据可视化。分类调色板（10种以上感知等距的不同色相）以及顺序或发散色阶，超过三四个系列时，在OKLCH中比在HSL中效果更好。
• 室内设计。基础墙色、类比修饰色、靠垫或艺术品中的互补强调色。
• 摄影调色。蓝绿-橙色（互补色对）是现代电影的经典手法，因为暖色调肤色在冷色阴影映衬下具有电影感。
• 游戏美术与插画。用色相区分角色与环境，用互补强调色突出焦点。

色盲与色轮

北欧裔人群中大约8%的男性和0.5%的女性存在某种形式的色觉缺陷（各人群比例有所不同）。L锥和M锥的基因位于X染色体上，这就是为什么该状况在男性中更为常见。几种配色方案（尤其是红绿互补色对）在最常见的色觉缺陷类型中会变得近乎单色：

• 绿色盲/绿色弱：中波长锥细胞功能缺失或减弱。最常见的类型（约占男性的6%）。红色和绿色容易混淆。
• 红色盲/红色弱：长波长锥细胞功能缺失或减弱（约占男性的2%）。红色显得暗淡，有时与黑色混淆。
• 蓝色盲/蓝色弱：短波长锥细胞功能缺失或减弱。极为罕见。蓝色和黄色容易混淆。

WCAG 2.1的「不得仅依赖颜色」原则与此直接相关：绝不能将颜色作为信息的唯一载体。在色相对比之上叠加亮度对比，在图表中同时使用图案或形状，并在确定配色之前通过色盲模拟器测试所有生成的配色方案。同时检查WCAG对比度：AA级要求普通文字最低4.5:1，AAA级要求7:1。

更多问题

为什么红、黄、蓝被称为「三原色」？

在艺术/RYB传统中（伊顿在包豪斯教学时使用的色轮），它们是被假定可以混合出所有其他颜色的三种颜料。这一假设是惯例而非物理学：任何真实红、黄、蓝颜料的组合都无法调配出所有可见颜色。在加色光中，真正的三原色是红、绿、蓝（RGB）；在减色印刷中是青、品、黄（CMY）。RYB在艺术教育中延续下来，因为它在教学上简单，且在混合现实颜料时效果尚可。

16:9与颜色的黄金比例是同一回事吗？

不是，这是两个不相关的概念。「黄金比例」用于比例（矩形、版式），约等于1.618。颜色理论的配色方案来自色相圆上的角度几何：互补色180°、三色120°、正方形90°。标准色轮教学中没有内置黄金比例配色方案。

这里看到的颜色与印刷出来的会一致吗？

几乎肯定不会完全一致。本色轮基于sRGB的HSL，属于加色混合，专为屏幕设计。印刷是减色CMYK。在显示器上看起来很好的鲜艳蓝色和亮绿色，在纸张上往往会大幅失饱和，超出色域的转换可能导致色相偏移。印刷设计师通常在眼前摆放经过校准的打样，或直接在设计工具中以CMYK模式工作。用本色轮做屏幕效果图，然后再转换。

「颜色心理学」（红色=激情，蓝色=冷静）有真实的科学依据吗？

这有民间认知基础，但实证支持薄弱且因文化而异。不同文化对相同颜色有截然不同的联想（白色在西欧是婚礼色，在东亚部分地区是丧礼色）。将颜色心理学作为设计起点和与客户沟通的词汇，而非规律性定律。

有任何内容会发送至服务器吗？

不会。色轮在HTML5 Canvas中渲染；配色角度在本地以JavaScript计算；HEX、RGB和HSL字符串通过浏览器API写入剪贴板。页面加载后可离线使用。

相关工具