配色方案生成器 — 从零生成或从照片提取和谐配色

按空格键生成新配色，锁定喜欢的颜色，选择色彩搭配规则，或从照片中提取配色。可导出为 CSS、Tailwind、SCSS、JSON 或 PNG。

或按空格键

配色规则颜色

(38, 70, 83)
(197, 37%, 24%)

(42, 157, 143)
(173, 58%, 39%)

(233, 196, 106)
(43, 74%, 66%)

(244, 162, 97)
(27, 87%, 67%)

(231, 111, 81)
(12, 76%, 61%)

点击色块可选中它，点击锁形图标可在生成时保留它，点击铅笔图标可选择新颜色，点击色值可复制。

颜色 1（HEX）

rgb(38, 70, 83)
hsl(197, 37%, 24%)
文字：白色

全部色值

HEX	RGB	HSL
#264653	rgb(38, 70, 83)	hsl(197, 37%, 24%)
#2a9d8f	rgb(42, 157, 143)	hsl(173, 58%, 39%)
#e9c46a	rgb(233, 196, 106)	hsl(43, 74%, 66%)
#f4a261	rgb(244, 162, 97)	hsl(27, 87%, 67%)
#e76f51	rgb(231, 111, 81)	hsl(12, 76%, 61%)

导出

:root {
  --color-1: #264653;
  --color-2: #2a9d8f;
  --color-3: #e9c46a;
  --color-4: #f4a261;
  --color-5: #e76f51;
}

从图片提取配色

上传一张照片，将其主色提取到未锁定的色块中；然后点击图片上的任意位置，把该像素的精确颜色取到所选色块（颜色 1）中。图片始终留在你的设备上。

选择图片…

配色在你的浏览器中生成，上传的图片绝不会离开你的设备。浏览全部免费工具.

发现问题，或者觉得哪里可以更好？每条消息我们都会阅读，并尽快修复。

这款免费的配色方案生成器能生成 2 到 10 种相互协调的颜色。按空格键（或“生成”）得到新配色，锁定想保留的色块，再继续生成，直到其余颜色也合适为止。可以选择类似色、互补色、三角色等配色规则，也可以上传一张照片，把它的主色直接放进配色中。每个色块都会显示 HEX、RGB 和 HSL 值，以及在其上保持清晰可读的文字颜色（黑色或白色）。

大多数生成器在 HSL 中旋转色相，结果往往是黄色刺眼、蓝色发暗，因为 HSL 的亮度与颜色看起来有多亮毫无关系。本工具在 OKLCH 中计算配色——这是一种感知均匀的色彩空间，亮度值相同的颜色看起来也一样亮——然后拉开亮度分布，让每套配色都有深、中、浅三类色调，真正可用于文字、背景和强调色。它无法告诉你某套配色是否适合你的品牌，这仍需要你自己判断；下方链接的对比度检查工具则能告诉你哪些颜色组合清晰可读。

使用方法

按空格键或“生成”按钮创建配色。用 − 和 + 选择 2 到 10 种颜色。
从菜单中选择配色规则。“随机”生成多样但均衡的配色；其他选项遵循经典的色轮规则。
点击喜欢的色块上的锁形图标，然后继续生成：锁定的颜色保持不变，配色会围绕第一个锁定的颜色重新构建。
点击铅笔图标手动选色，或在色条下方的编辑器中输入 HEX 值。如果要从照片开始，在“从图片提取配色”中上传照片，点击图片即可吸取精确的像素颜色。
将配色导出为 CSS 变量、Tailwind 配置、SCSS 或 JSON，下载 PNG，或复制分享链接。

常见问题

如何生成一套配色？

在本页按空格键。每按一次，就会根据所选的配色规则生成一套新配色。某个颜色看起来合适时，点击锁形图标锁定它，然后继续按：只有未锁定的色块会变化，新颜色会与锁定的颜色相协调。网站配色五种颜色是很好的默认选择：一种深色用于文字，一种浅色用于背景，一个主色、一个辅助色和一个强调色。

什么是互补色、类似色和三角色？

它们是色轮上的位置关系。互补色彼此相对（相差 180 度），对比最强烈。类似色彼此相邻，大约相差 30 度，给人平静、统一的感觉。三角色是间隔 120 度的三个色相；分裂互补色使用一个基础色相加上其互补色两侧的两个色相（150 度和 210 度）；四角色（又称方形配色）使用间隔 90 度的四个色相。单色配色保持一个色相，只改变亮度和饱和度。

可以从图片中提取配色吗？

可以。在“从图片提取配色”中上传照片。工具会把它缩小到最多 200 像素以平均掉噪点，然后在 OKLab 色彩空间中用 k-means 聚类对像素分组，因此结果反映的是你看到的颜色，而不是单纯的像素数量。最大的几个聚类会填入未锁定的色块，并列出每种颜色在图片中所占的比例。点击图片任意位置，即可把该处的精确像素颜色吸取到选中的色块中。图片始终不会离开你的浏览器。

如何在 CSS 或 Tailwind 中使用配色？

选择 CSS 变量导出，把 :root 代码块粘贴到样式表中，然后以 var(--color-1) 等方式使用这些颜色。Tailwind 导出是一个 theme.extend.colors 代码块，会添加 palette-1 到 palette-N，你就可以写 bg-palette-1 或 text-palette-3。确定每种颜色的用途后，把变量重命名为对应的角色（primary、surface、text）；color-3 这样的名字经不起改版。

为什么这个生成器用 OKLCH 而不是 HSL？

因为 HSL 的亮度并不是感知亮度。在 HSL 中，纯黄和纯蓝的亮度都是 50%，但黄色看起来和浅灰一样亮，蓝色看起来几乎是黑色。因此在 HSL 中旋转色相，得到的配色在明暗上并不均衡。OKLCH 由 CSS Color Level 4 定义，所有当前浏览器都支持，它把亮度、彩度和色相分开，旋转色相时视觉亮度保持不变。超出 sRGB 范围的颜色会通过降低彩度拉回范围内，色相和亮度保持不变。

可以分享或保存配色吗？

复制分享链接即可：链接地址中包含颜色值（例如 ?colors=264653-2a9d8f-e9c46a），任何人打开都会看到同一套配色，你也可以把它加入书签。服务器上不保存任何内容。你还可以下载带 HEX 和 RGB 值的色块 PNG，用于情绪板或发给客户的邮件。

把配色变成可用的 UI 色彩体系

五种好看的颜色还算不上设计系统。网站需要的是角色分工：一种在背景上对比度至少 4.5:1 的文字颜色，一种背景色和一种稍有区别、用于卡片的表面色，一个用于按钮和链接的主色，以及一个少量使用的强调色。室内设计中的 60-30-10 法则是个不错的起点：约 60% 中性背景，30% 辅助色，10% 强调色。

• 文字：最深的颜色，或带一点主色调的近黑色。纯 #000 配纯 #fff 的对比过于刺眼，没有必要。

• 背景和表面：最浅的一两种颜色。很多生成的配色里会包含一种；如果没有，锁定主色并切换到“单色”，就能得到它的浅色调。

• 主色：那个在说“点我”的颜色。检查其上的白色或黑色文字是否达到 4.5:1（每个色块上推荐的可读文字颜色可作快速初查，对比度检查工具才是正式检查）。

• 强调色：饱和度最高的颜色，用于高亮和徽标，不要大面积使用。

接下来，生成主色的浅色和深色变体（浅色用于悬停背景，深色用于按下状态），而不是引入新的色相。锁定主色、切换到“单色”并选择 7 到 10 种颜色，就能得到这样一组色阶。

各种配色规则及其适用场景

• 类似色：相邻的色相。平静、自然，很难出错。适合内容网站以及健康和食品品牌。文字需要一种对比明显的中性色。

• 单色：一个色相，多级亮度。是仪表盘和应用最稳妥的选择，在这些场景中颜色应衬托数据，而不是与数据争夺注意力。

• 互补色：两个相对的色相。对比和活力最强；一个用作主色，另一个只用于行动号召按钮，否则看起来像运动队队服。

• 分裂互补色：一个色相加上其对面色相两侧的两个色相。几乎和互补色一样活泼，但张力更小；是营销网站不错的默认选择。

• 三角色和四角色：三个或四个均匀分布的色相。活泼明快，适合儿童产品、游戏和插画。让一个色相占主导，其余的用小面积点缀。

• 随机（舒适）：相邻色块之间色相偏移 20 到 70 度，亮度分布在整套配色中。适合在确定规则之前先做探索。

从图片提取颜色的原理

上传的图片会被绘制到一个长边不超过 200 像素的 canvas 上。缩小图片会平均相邻像素，去除 JPEG 噪点和细微纹理，否则它们会产生几十种几乎相同的颜色。完全透明的像素会被忽略。

剩余像素被转换到 OKLab，并用 k-means 聚类分组，k 等于色块数量。初始中心按固定规则选择（先取最接近图片平均色的像素，然后反复选取与已有各中心距离最远的像素），所以同一张图片总是得到相同的配色，绿色风景中一件红夹克这样面积小但颜色鲜明的区域也不会丢失。每个聚类的平均色成为一个色块，按其在图片中所占面积排序。

提取找到的是图片中实际存在的颜色，而不一定是你做设计时会用的颜色。照片以柔和的中间调为主，所以可以锁定一两种最能代表图片的颜色，再生成其余颜色，或点击图片吸取某个特定的高光颜色。