随机颜色生成器
按空格键换一套新配色。选好配色规则和色调风格，锁住喜欢的颜色，其余的继续随机。点任意色值即可复制。
小技巧：按 空格 换一套配色，锁定的颜色不会变。
文字对比度
- Aa#264653白字 10.1 · 黑字 1.8AAA
- Aa#2A9D8F白字 3.3 · 黑字 5.4AA
- Aa#E9C46A白字 1.7 · 黑字 10.7AAA
- Aa#F4A261白字 2.1 · 黑字 8.7AAA
- Aa#E76F51白字 3.1 · 黑字 5.8AA
最近的配色
刷过去的配色会出现在这里，点一下就能找回来。
- 绘画配色挑战随机抽三个颜色，只用它们画一张小图，跳出自己习惯的配色舒适区。
- 设计灵感与品牌配色做情绪板、UI主题或Logo提案时，从一套自己想不到的配色开始。
- 开发与占位色图表系列色、头像背景、测试数据，随手拿一个HEX色值，还能直接复制成CSS变量。
- 手工、美甲与穿搭毛线、甲油、串珠、今天的穿搭颜色，交给随机来决定。
三步做出一套顺眼的配色
选规则和风格
完全随机什么都可能出现；类似色、单色系比较安静，互补色、三角色更有冲击力。马卡龙、鲜艳、莫兰迪、暗色决定整体色调。
刷新并锁定
点“生成配色”或按空格键。遇到满意的颜色就锁住，之后的配色会围绕它来搭配。
复制带走
点HEX、RGB或HSL色值即可复制，也可以把整套配色复制成CSS变量，或者放上转盘抽一个。
不只是一个随机色值
配色规则一览
配色规则就是按照颜色在色相环上的位置来挑选色相。生成器先随机选一个起始色相，再按规则放置其他颜色；色调风格决定它们的饱和度和明暗。
| 配色规则 | 色相关系 | 感觉 | 适合 |
|---|---|---|---|
| 类似色 | 相邻约20到30度的色相 | 柔和、自然、统一 | 插画背景、风景、温和的品牌 |
| 单色系 | 同一色相，不同明度 | 干净、克制 | UI主题、数据图表、极简海报 |
| 互补色 | 色相环上相对，相差180度 | 强烈、对比鲜明 | 按钮和促销、运动队服、波普风 |
| 分裂互补 | 一个色相加上它对面两侧的色相，相差150和210度 | 活泼但更好平衡 | 角色设计、包装 |
| 三角色 | 三个色相相隔120度 | 俏皮、平衡 | 儿童品牌、游戏、信息图 |
| 四方色 | 四个色相相隔90度 | 丰富、多样 | 图案、节日物料、多分类图表 |
| 完全随机 | 每个色相互不相关 | 意外，有时会撞色 | 绘画挑战、打破习惯 |
用配色时可以参考经典的60-30-10法则：主色占约六成面积，辅助色占三成，点缀色占一成。
HEX、RGB、HSL该复制哪一个？
三种写法描述的是同一个屏幕颜色。红、绿、蓝各有256级，所以HEX一共有16,777,216种颜色。
| 格式 | 示例 | 数字含义 | 适用场景 |
|---|---|---|---|
| HEX | #2A9D8F | 红绿蓝各用两位十六进制表示，从00到FF | CSS、Figma、即时设计、Canva可画等大多数设计工具 |
| RGB | rgb(42, 157, 143) | 红绿蓝各从0到255 | 写代码、Photoshop、修图 |
| HSL | hsl(173, 58%, 39%) | 色相用角度，饱和度和明度用百分比 | 手动微调颜色、做深浅色阶 |
对比度标签是什么意思？
每块颜色上的文字会自动选白色或近黑色中更清楚的一种，并显示两者的对比度。等级依据的是网页内容无障碍指南WCAG 2。
- AAA，7比1及以上：正文阅读很舒适，对很多视力较弱的人也友好。
- AA，4.5比1及以上：网站和App中正常字号文字的通用最低标准。
- 仅大字，3比1及以上：适合大号文字（约24像素，或19像素粗体）以及图标、按钮边框。
- 偏低，低于3比1：适合作装饰色或背景，不要直接用来写字。
画师常玩的随机配色挑战
- 三色挑战：生成三色配色，只用这三种颜色加白色画任意主题，适合发小红书打卡。
- 限定色风景：锁定一个莫兰迪色做阴影，其余颜色一直刷到天空顺眼为止。
- 角色换色：用一套三角色配色重新给喜欢的角色上色。
- 每日一色：每天随机一个颜色，画出五样真的可能是这个颜色的东西。
- 同景双色调：同一个场景画两遍，一遍用马卡龙配色，一遍用暗色配色。
- 速涂挑战：每套配色限时10分钟，按空格换下一套，不许反悔重刷。
常见问题解答
怎么随机生成一个HEX色值？
在“颜色数”里选“单色”，然后点“换一个颜色”或按空格键，HEX色值会以大字显示。点它即可复制，也可以点下面的RGB或HSL。
怎样保留一个颜色、只换其他颜色？
点色块顶部的锁形按钮。锁定的颜色再生成时不会变，类似色、三角色等规则会以第一个锁定的颜色为基准重新搭配。
色块上的AA、AAA是什么意思？
这是该色块上文字的WCAG对比度等级。AA要求正常字号至少4.5比1，AAA要求7比1。“仅大字”表示这个颜色只适合大号文字或图标。
能随机生成马卡龙色或莫兰迪色吗？
可以。色调风格选“马卡龙”得到高明度、柔和的粉彩色，选“莫兰迪”得到低饱和的高级灰调。它们可以和任意配色规则组合，比如马卡龙加类似色就是一套很温柔的配色。
配色怎么用到CSS或Figma里？
点“复制为CSS”，会得到color-1到color-5这样的CSS自定义属性，直接粘贴进样式表。“复制HEX列表”得到用逗号分隔的色值，可以逐个粘贴到Figma、即时设计或Procreate。
为什么按空格键没有反应？
当焦点在按钮、链接或输入框上时，空格键会保留原本的作用（比如按下当前按钮），不会刷新配色。先点一下页面空白处再按就可以了。
颜色是真的随机吗？
是的。色相、饱和度和明度都由浏览器的加密级随机数在色调风格的范围内抽取，所有计算都在本地完成，不会上传任何数据。