免费配色方案生成器

操作示例

打开页面，“基础颜色”框中已经是 #14b8a6，并选中了“品牌配色”。“品牌配色 · 7 种颜色”下出现七个色块：#14B8A6（基础色）、#EE66BA（强调色）、#E5FAF8（浅色调）、#14524A（深色调），以及三个带有同一色相的中性色 #F3F6F6、#63837F 和 #1A2322。基础色卡片显示“白底 2.5”和“未通过”，以及“黑底 8.4”和“AAA”。点按“互补色”，色条减少为两种颜色，#14B8A6 和 #EF7381。在“复制格式”下选择 RGB，然后点按“全部复制”。提示条显示“已复制 2 种颜色”，剪贴板中是 rgb(20, 184, 166), rgb(239, 115, 129)。在“文字与背景对比检查”中，文字颜色起初是 #000000，背景为 #14B8A6，显示 8.44:1，“普通文字 AAA”，“大号文字 AAA”。

使用哪些设置，以及限制

• 用您手头的任何形式输入颜色。 “基础颜色”框接受带或不带 # 的 3 位或 6 位十六进制色值、teal 或 tomato 这样的 CSS 颜色名、rgb() 或 hsl() 值（任何 alpha 都会被忽略），或者像 20 184 166 这样的纯数字。名称中的空格会被忽略，所以“rebecca purple”也可以。完整的 6 位十六进制色值会在您输入时立即生效。其他内容在您按 Enter 或离开输入框时生效。8 位十六进制和 oklch() 无法读取。圆点可设置八种起始颜色之一，方块则打开系统的颜色选择器。
• 根据用途选择调色板类型。 “品牌配色”给出 7 种带角色的颜色：基础色、强调色、浅色调、深色调和三个中性色。“互补色”给出 2 种，“类似色”4 种，“三角色”3 种，“分裂互补色”3 种，“四色”4 种，“单色”5 种，“明暗色阶”7 种。单色保留您的颜色，并逐级调整明度。明暗色阶是在您的色相和饱和度下，明度从 10% 到 90% 的固定阶梯，不包含您的确切颜色。会转动色相的类型（互补色、类似色、三角色、分裂互补色、四色）力求让感知明度相近，并保持在中间范围。
• 锁定喜欢的颜色，再重新随机。 在某个色块上点按“锁定此颜色”，然后点按“随机换一组”或选择新的基础色。锁定的色块保持颜色，其余的会改变。“随机换一组”会随机选出一个 HSL 饱和度为 50 到 84、明度为 40 到 57 的基础色，所以落在中间色调。锁定跟随的是色块的位置，而不是颜色：锁定色块 1，更换基础色，色块 1 仍保持旧颜色。“编辑此颜色”会为一个色块打开颜色选择器，并在标题上加上“（已编辑）”。没有锁定的已编辑色块，会在下次重新生成调色板时被替换。
• 在交付之前检查对比度。 每张卡片显示“白底”和“黑底”的比值，并带有徽章：7:1 起为“AAA”，4.5:1 起为“AA”，3:1 起为“AA 大字”，否则为“未通过”。比值使用 WCAG 相对亮度公式。在“文字与背景对比检查”中，您可以从调色板以及白色和黑色中选择文字颜色和背景。“普通文字”一行在 7 时评为 AAA，在 4.5 时评为 AA。“大号文字”一行在 4.5 时评为 AAA，在 3 时评为 AA。请测试您打算使用的确切搭配，因为不能仅仅因为每种颜色都清晰，整个调色板就可读。
• 先选择复制格式，再选择导出。 “复制格式”决定点击色块、浅色或深色标签以及“全部复制”时复制什么：hex、rgb、hsl 或 oklch。对于基础色，分别是 #14B8A6、rgb(20, 184, 166)、hsl(173, 80%, 40%) 和 oklch(70.4% 0.123 182.5)。在“导出:”下，这些按钮会保存 palette.css、palette.scss、tailwind-colors.js、tailwind-scales.js（“Tailwind 50-950”）、palette.json、palette.png、palette.svg、palette.gpl、palette.ase 和 palette.aco。文本文件保存十六进制值，JSON 还会加上 rgb、hsl 和 oklch 字符串。PNG 每个色块宽 200 px，SVG 宽 160 px。“在 PNG/SVG 上标注十六进制色值”默认勾选。
• 分享链接，或从预设开始。 “分享结果”会生成一个链接，地址中 # 之后保存基础颜色、类型、编辑和锁定；在支持的触摸设备上，它会打开分享面板。分享的调色板可以包含 1 到 12 种颜色。在“试试这些”下，“粉彩”“大地色”“霓虹”和“品牌安全（AA）”各自加载 5 种颜色作为“自定义”调色板，之后更改基础色会切换回“品牌配色”。“从屏幕取色”只出现在有 EyeDropper 功能的浏览器中，主要是基于 Chromium 的浏览器。

常见问题及解决方法

它显示“无法识别这个颜色。试试 #14b8a6、teal 或 rgb(20, 184, 166)。”

这段文字无法被读取为颜色，输入框会回到当前的基础色。常见原因有：4 位或 8 位的十六进制，例如 #14b8a680；oklch() 值；不是 CSS 名称的颜色名；以及超出范围的数字，例如 rgb(300, 0, 0) 或 hsl(10, 120%, 50%)。请重新输入 3 位或 6 位十六进制、CSS 名称，或数值在范围内的 rgb() 或 hsl()，然后按 Enter。

您选了新的基础颜色，但有一个色块保持了旧颜色。

那个色块被锁定了。卡片上的锁定按钮会变成青绿色，它的提示文字是“解锁此颜色”。无论是更换基础色、更换类型还是“随机换一组”，只要调色板重新生成，锁定的色块都会被保留。再次点按锁定即可释放。锁定与色块的位置绑定，所以即使您从“品牌配色”切换到“三角色”，色块 1 上的锁定仍然有效。

提示条显示“无法复制”。

两条剪贴板途径都失败了：先是浏览器的剪贴板 API，然后是带复制命令的隐藏文本框。在不安全的页面和某些沙盒框架中没有剪贴板 API，当页面没有获得焦点时，浏览器也可能拒绝它。请在页面上点击一下，再试一次，或者在普通的浏览器标签页中打开页面。如果复制仍被阻止，请使用 CSS、JSON 或 Tailwind 导出按钮改为保存文件。

没有“从屏幕取色”按钮。

只有浏览器具有 EyeDropper 功能时才会添加这个按钮，页面的常见问题说明这主要是基于 Chromium 的浏览器。在没有该功能的地方，请使用文本框旁边的方形颜色框，或输入您从其他应用中读到的十六进制色值。在取色过程中按 Esc 会悄悄取消，而因其他原因失败的取色不会在页面上显示任何提示。

保存的 PNG 或 SVG 的色块上没有十六进制色值。

“在 PNG/SVG 上标注十六进制色值”框没有勾选。页面打开时它是勾选的，所以是有人取消了它。勾选之后，每个色块都会带上大写的十六进制色值，使用为对比度选择的深色或浅色墨水。这个框只影响 PNG 和 SVG 文件。其他导出内容保存的是颜色值本身，没有标签。请勾选这个框，然后再次点按 PNG 或 SVG。

对比分析

这个页面用固定的色轮规则从一种颜色构建调色板，用 WCAG 比值评定对比度，并导出为代码和设计文件。它不能从照片中提取颜色（页面为此提供了指向图片取色器的链接），不能预览色盲效果，不给颜色命名，也不在账户中保存调色板。您的工作保存在地址栏 # 之后，所以重新加载或使用书签都能找回。和谐规则给出的是起点，而不是成品的品牌。要决定各种角色，并在真实版面上测试调色板，仍应使用设计应用或品牌指南。