配色生成器
从你喜欢的颜色出发，或随机来点惊喜，再留下合适的颜色。
已封存在本设备上
在浏览器中运行，不上传任何内容。
已封存
你的配色
设置
围绕基础色生成配色，已锁定的颜色会保留。
导出
使用方法
-
选择基础色或随机生成
输入基础色并选择配色规则，或点击“新配色”（或按空格键）生成一组新的配色。
-
锁定喜欢的颜色
锁定想保留的颜色，再重新生成：只有未锁定的颜色会改变。点击色块可以手动调整。
-
导出配色
复制为 CSS 变量或 JSON 用于代码，或下载 PNG 与团队分享。
常见问题
这些配色规则是什么意思？
它们来自色轮。类似色在色轮上彼此相邻，给人平静的感觉。互补色位置相对，能形成对比。分裂互补色、三角色和四方色把颜色均匀分布在色轮上，配色更活泼。单色则使用同一色相的不同深浅。
锁定是怎么工作的？
点击颜色下方的锁形图标即可保留该颜色。生成新配色时，锁定的颜色位置不变，新颜色会挑选与它们相配的。
为什么这些颜色看起来这么协调？
配色在 OKLCH 中生成，这是一种基于人眼视觉设计的色彩空间。在其中旋转色相，明度和鲜艳度都能保持一致，所以不会有某个颜色和其他颜色放在一起时显得格外刺眼或暗淡。
怎么在项目中使用配色？
复制 CSS 导出内容并粘贴到样式表中，你会得到 --color-1 这样的变量，可以在任何地方使用。JSON 导出会以 HEX、RGB 和 OKLCH 列出每个颜色，可用于设计令牌或脚本。
配色可以商用吗？
可以。颜色不归任何人所有，你在这里创建的配色可以自由用于个人或商业作品。