How many colors can I include in a palette?

The generator starts with five colors by default, but you can add more using the Add Color button or remove colors as needed. Most designs work best with three to five colors.

免费在线配色生成器

生成精美的配色方案。锁定喜欢的颜色并持续生成。按 空格 键获取新颜色！

模式：基础色：按 空格 生成

CSS变量

使用方法

选择一个 和谐模式（类似色、互补色、三角色等）或保持随机模式。
点击生成或按空格键获取新的配色方案。
点击锁图标锁定颜色，重新生成时该颜色会保持不变。
点击HEX代码即可复制到剪贴板。
使用 复制CSS 获取CSS自定义属性，或下载为图片。

色彩理论与和谐模式

本生成器支持基于色彩理论的7种和谐模式。 类似色 配色使用色轮上彼此相距30°以内的颜色 · 给人宁静协调的感觉。 互补色 配色搭配相距180°的颜色，产生最强对比。 三角色 配色使用三个等距分布的色相（相距120°），带来鲜明多样的视觉效果。 分裂互补色 采用一个基础色加上与其互补色相邻的两个颜色 · 大胆且富有层次。单色配色仅改变单一色相的明度和饱和度 · 优雅且极简。 正方形 使用四个相距90°的颜色，形成均衡多彩的配色方案。

常见问题

如何在项目中使用这些颜色？

点击"复制CSS"即可获得可直接粘贴的CSS自定义属性。你也可以点击单个HEX代码进行复制，或将整个配色方案导出为PNG图片，方便在Figma或Canva等设计工具中参考使用。

一个配色方案应该有多少种颜色？

大多数设计使用3-5种颜色效果最佳：一个主色、一个辅助色、一个强调色和1-2个中性色。使用"+ 添加颜色"按钮扩展配色，或以更少的颜色数量生成以减少颜色。

可以锁定喜欢的颜色吗？

可以！点击任意色块上的锁图标即可。生成新的配色方案时，锁定的颜色会保持不变，未锁定的颜色会随机变化。这对围绕特定品牌色构建配色方案非常有用。

和谐模式是什么？

和谐模式基于色彩理论关系生成配色方案。类似色使用相近的色相打造舒缓的配色。互补色使用相对的色相形成强烈对比。三角色、分裂互补色和正方形在色轮上均匀分布色相。单色保持单一色相并改变明度 · 非常适合简洁、极简的设计。

什么是颜色调色板生成器?

颜色调色板生成器基于色彩理论规则选择一组视觉上协调的颜色。您给它一个起始提示(基础色、和谐模式或纯随机),它返回三到五个十六进制代码,这些代码位于色轮上经过深思熟虑的位置。输出可直接放入 CSS 变量、Figma 文件、品牌指南或幻灯片。

现代 Web 工具用十六进制(#2b7190)、RGB(43, 113, 144)、HSL(199, 54%, 37%)或 OKLCH(51.3% 0.066 233.4)表示颜色。Hex 最方便复制粘贴;HSL 最直观调整(降低亮度获得更暗的变体);OKLCH(在 CSS Color 4 中引入,2023 年起浏览器支持)在感知上是均匀的,这对设计令牌很重要。这个工具默认输出 hex,让您可以复制 CSS 自定义属性用于变量和 OKLCH 友好的色相步进。

所有生成都在您的浏览器中进行。和谐模式通过 HSL 色相旋转从基础色计算,然后转换回 hex。锁定按钮在调色板的其余部分重新洗牌时保留您喜欢的颜色。空格键触发新的生成而不离开页面,这使探索快速。

生成器内部有什么

顶部栏组合了改变生成的三个旋钮:产生新调色板的「生成」按钮、带有七个和谐规则(随机、类比、互补、三色、分裂互补、单色、方形)的「模式」下拉菜单,以及为非随机模式播种的「基础」颜色选择器。「添加颜色」按钮将调色板扩展到默认五个色板之外,对需要更多色调的设计系统有用。

每个色板在一个深色药丸上显示其 hex 代码,该药丸在任何背景下都保持可读。点击 hex 复制它。点击锁定将色板冻结到未来的生成中,这就是您如何围绕品牌色构建调色板:锁定品牌,重新生成,获得三个匹配的伙伴。每个色板内的操作栏将锁定、复制和移除图标保持在 32 像素的触摸目标内,以满足 Lighthouse 的目标大小规则。

调色板下方,CSS 变量导出块用您当前的颜色作为 :root 自定义属性实时更新。「导出图像」按钮通过隐藏画布将调色板序列化为 PNG,这对于在设计评审中分享或固定到情绪板很方便。键盘快捷键空格键立即重新生成,无需更改焦点。

历史和背景

Isaac Newton 分解白光(1666)

Isaac Newton 在 1666 年在剑桥的棱镜实验表明,白光由连续的颜色光谱组成。在《Opticks》(1704)中,他展示了一个七色轮,红、橙、黄、绿、蓝、靛、紫被定位为使直径相对的颜色创造出协调的互补色。每个现代色轮都源自这一张图。

Goethe 的色彩理论(1810)

Johann Wolfgang von Goethe 在 1810 年的《色彩理论》(Theory of Colours)从人类感知的角度重新构建了 Newton 的物理学。Goethe 是第一个系统描述余像、同时对比以及红色心理温暖与蓝色寒冷的人。他的工作影响了 Turner、Schopenhauer 以及今天艺术学校教授的整个色彩心理学领域。

Johannes Itten 形式化和谐规则(1961)

包豪斯教师 Johannes Itten 于 1961 年出版了《色彩艺术》(Kunst der Farbe)。他的十二辐色轮和七种对比(色相、明度、温度、互补、同时、饱和度、延伸)成为艺术和设计学校的标准课程。这个工具中的和谐模式(类比、互补、三色、分裂互补、方形)直接来自 Itten 的章节。

Pantone 配色系统(1963)

M. Harris and Sons 商业印刷公司 Pantone 的 Lawrence Herbert 在 1963 年推出了 Pantone 配色系统。色票本给了设计师和印刷商一个共享的数字参考,这样品牌色可以在不同纸张、屏幕和织物上保持复制。从 2000 年开始的「年度色彩」现在推动了时装、室内和网页设计的调色板趋势。

Web 安全调色板和 216 种颜色(1996)

当 8 位显示器在早期网络中占主导地位时,Lynda Weinman 在 1996 年编纂了 216 种颜色的 Web 安全调色板,以确保 Mac 和 Windows 之间的渲染一致。一旦 24 位颜色变得普遍(大约 2000 年),该调色板就过时了,但它推广的十六进制语法(#RRGGBB)仍然是 CSS、HTML 和设计工具中编写颜色的主要方式。

OKLCH 和感知均匀颜色(2020)

Bjoern Ottosson 在 2020 年的 OKLab 论文引入了感知均匀的色彩空间,没有 HSL 的亮度不一致问题。CSS Color Level 4(从 Chrome 111、Safari 15.4、Firefox 113 开始的浏览器)添加了 oklch() 语法。设计令牌、可访问色彩对比和调色板生成的未来越来越多地存在于 OKLCH 中,因为感知均匀意味着具有相同 L 值的两种颜色确实看起来同样明亮。

实用工作流

从一种颜色构建品牌身份

将「基础」颜色设置为您的品牌 hex,锁定第一个色板,将模式切换为「类比」或「分裂互补」,并点击「生成」直到四种伙伴颜色感觉合适。复制 CSS 变量并粘贴到您的设计系统令牌中。结果是一个锚定在您的品牌上、具有理论支持和谐的调色板。

设计深色模式配对

选择一个以您的深色模式背景为基础的单色调色板。五个色板为您提供分级亮度的背景、表面、分隔线、次要文本和主要文本。对于浅色模式,生成一个带有浅色基础的单独单色调色板。两个调色板通过 prefers-color-scheme 配对,覆盖大多数主题需求,无需临时调整。

为数据可视化挑选颜色

对于分类数据(柱状图、饼状图段),三色或方形调色板为您提供三或四种独特的色相,在繁忙的图表上分开可读。对于序列数据(热图、分区统计图),使用单色来改变亮度同时保持色相不变。检查与图表背景的对比度;Vega-Lite 等数据可视化工具期望相邻类别之间至少 3:1。

可访问性优先调色板草案

生成一个调色板,然后将每一对粘贴到对比度检查器(WebAIM、Tanaguru)中。对于背景上的正文文本,您希望至少 4.5:1(WCAG AA)。对于大文本或 UI 组件,3:1 是阈值。如果调色板失败,生成一个新的或锁定品牌色板,让其他色板重新洗牌以找到合规的集合。

情绪板探索

反复按空格键循环数十个随机调色板。当一个吸引您的眼睛时,锁定最好的色板,切换到「类比」,继续生成以找到在其上构建的变体。空格键循环比点击更快,这让您可以保持在右脑探索模式中而不打破流程。

印刷到屏幕的颜色匹配

当您有印刷参考(Pantone 色片或织物样品)时,用吸管吸取最接近的数字等价物并将其用作「基础」颜色。和谐模式然后围绕您的参考散开。请注意,印刷是 CMYK,屏幕是 RGB,所以精确匹配是不可能的;目标是足够接近的调色板以读作同一品牌。

常见陷阱

WCAG 对比度不是自动的

理论上漂亮的调色板仍然可能在可访问性上失败。粉彩对粉彩的配对(浅黄色在浅粉色上)看起来令人愉快,但对比度小于 2:1。始终在 WCAG 检查器中测试建议的文本-在-背景对。如果调色板必须适用于正文文本,首先围绕对比度要求构建,和谐性其次。

色盲影响 8% 的男性

红绿色盲症是色觉缺陷的最常见形式,影响约 8% 的男性和 0.5% 的女性。红绿互补调色板对于色盲观看者变成单一的棕色污点。对于分类颜色(图表、状态徽章、交通信号灯),将颜色与形状、标签或图案配对,并在 Stark 或 Sim Daltonism 等模拟器中测试。

HSL 在感知上不均匀

在 HSL 中,50% 亮度的黄色看起来比 50% 亮度的蓝色亮得多。HSL 模型在数字上平等地对待所有色相,但人眼不这样。生成器在内部使用 HSL 进行色相旋转,所以两个具有相似 S 和 L 的色板仍然可能有明显不同的感知权重。对于感知平衡的调色板,切换到 OKLCH 感知工具(Leonardo、Open Color)。

sRGB 和 Display P3 之间的色域差异

现代 Apple 显示器(自 2015 年 iMac、2016 年 MacBook Pro、所有 iPhone 7 起)使用 Display P3,一个比 sRGB 更宽的色域。在 Display P3 上看起来鲜艳的饱和红色,在旧的仅 sRGB 显示器上渲染相同的 hex 时可能看起来更暗淡。对于必须在各处看起来相同的品牌色,保持在 sRGB 较小的色域内。

Hex 代码默认不携带 alpha

三位(#abc)和六位(#aabbcc)hex 是不透明的。八位 hex(#aabbcc80,其中 80 是 50% alpha)在 CSS Color 4 和现代浏览器中受支持,但在旧工具中不支持。如果您需要透明度,请改用 rgba() 或 hsla(),或者坚持使用不透明颜色,让父级的不透明度处理混合。

颜色选择器校准漂移

未校准的显示器可能偏离参考几个 Delta-E 单位,这意味着在您的屏幕上看起来原始的调色板,在别人的屏幕上可能看起来浑浊或过饱和。对于品牌关键工作,使用 Spyder 或 i1Display 设备进行校准。对于大多数网页设计,屏幕差异是不可避免的;选择在中位数范围内有效的颜色。

隐私和数据处理

一切都在您的浏览器中运行。和谐数学是 JavaScript,画布导出是本地的,剪贴板 API 需要用户手势。我们不会将您的 hex 代码发送到任何地方,不会跟踪您生成哪些调色板,也不会在 cookie 或 localStorage 中存储任何内容。重新加载页面,之前的调色板就消失了。

页面加载后,生成器可以离线工作。您可以在飞行中、在公司代理内或在隔离环境中使用它。唯一触及网络的操作是可选的「导出图像」,它通过 blob URL 下载,下载本身不会将您的颜色传输到任何地方。

什么时候不使用这个生成器

建立具有语义令牌的设计系统

设计系统需要命名的语义令牌(color-primary-500、color-error、color-warning),具有配对的浅色和深色模式值、对比度保证和命名的比例步骤。使用专用工具(Material Color Tool、Open Color、Adobe Leonardo)或令牌管理系统(Style Dictionary、Tokens Studio)。这个生成器是为探索而设计的,不是为系统设计。

印刷色彩管理(CMYK、Pantone)

胶印的 CMYK 分色需要专业工具(Adobe Illustrator 的色板面板、Pantone Connect)。RGB 到 CMYK 的转换是有损的,墨水覆盖率限制很重要。如果您的调色板将大规模印刷,从一开始就与印刷商的颜色规范合作,而不是只用屏幕的 hex 生成器。

为正文文本生成可访问的调色板

对于必须保证每对都符合 WCAG AA 或 AAA 对比度的调色板,使用对比度优先工具,如 Tanaguru Contrast-Finder、Adobe Leonardo,或基于 APCA 的工具。这个生成器遵循和谐规则,而不是对比度规则,所以一个美丽的类比调色板可能有 1.5:1 的文本对背景对,这在可访问性上失败。

动画和颜色插值

对于渐变停止点或颜色动画,您需要在 OKLCH 或 LCH 中进行感知均匀的插值,而不是原始 HSL 或 hex。CSS 渐变插值默认为 sRGB,产生浑浊的中间点(黄色和蓝色之间著名的灰色中间点)。使用颜色插值工具(Erin Kissane 的 chroma.js、oklch.com)进行动画过渡。