调色板生成器

这个工具根据你选定的一个基础颜色,按色彩理论里的五种常见搭配规则,一次生成五组配色:单色系、类似色、互补色、三角配色和分裂互补色。每个色块点一下就能复制它的十六进制色值。生成方法是把基础色转换成 HSL(色相、饱和度、亮度),再按固定的角度或亮度偏移计算出其他颜色。它只负责给出算术上的配色起点,不会判断哪组更好看,也不检查文字与背景的对比度,更不能导出成图片或色板文件,最终效果需要你自己结合实际用途判断。

操作步骤

1. 在「选择基础颜色」里点击左边的色块,弹出浏览器自带的取色器选颜色;或者在右边的文本框里直接输入 # 开头的十六进制色值。默认颜色是 #2F5D50。
2. 选定后,下方立即生成五行色块:「单色系(第一个是基础色,其余同色相不同明度)」、「类似色(相邻色相,柔和协调)」、「互补色(强对比)」、「三角配色(三种颜色均衡搭配)」和「分裂互补色(对比但不过于强烈)」。
3. 把鼠标放在某个色块上看颜色,点击该色块,它的 HEX 值(如 #5D2F3C)会被复制到剪贴板,色块上的复制图标会短暂变成对勾,约 1 秒后恢复。
4. 换一个基础色重新生成,所有五行同步更新。需要记录时把你喜欢的色值粘贴到自己的文档里。

一个实际例子

以默认基础色 #2F5D50(转换成 HSL 约为色相 163 度、饱和度 33%、亮度 27%)为例,实际生成的结果是:单色系为 #2F5D50(基础色本身,放在第一个)、#22443A、#3C7766、#56A992、#88C3B3、#BBDDD3(后五个的亮度依次固定为 20%、35%、50%、65%、80%);类似色为 #2F5D39、#2F5D45、#2F5D50、#2F5D5B、#2F535D(色相依次偏移 -30、-15、0、+15、+30 度);互补色为 #2F5D50 和 #5D2F3C;三角配色为 #2F5D50、#502F5D、#5D502F;分裂互补色为 #2F5D50、#5D2F53、#5D392F。再对比纯红 #FF0000:互补色是 #00FFFF,三角配色是 #FF0000、#00FF00、#0000FF。这些数值都是用工具里同样的换算函数实际运行得到的。

五种配色方式分别是怎么算的

• 单色系:保持基础色的色相和饱和度不变,把亮度依次设为 20%、35%、50%、65%、80%,得到由深到浅的 5 个颜色。亮度是固定值,不是围绕基础色的亮度偏移;为了方便对照,这一行的第一个色块固定是你输入的基础色本身,所以这一行共 6 个色块。
• 类似色:保持饱和度和亮度,色相相对基础色分别偏移 -30、-15、0、15、30 度,得到 5 个相邻颜色,中间那个就是基础色。
• 互补色:基础色和色相环上相差 180 度的颜色,共 2 个。
• 三角配色:色相每隔 120 度取一个,共 3 个,与基础色构成一个等边三角形。
• 分裂互补色:基础色加上与互补色两侧各相差 30 度的两个颜色,即色相偏移 150 度和 210 度,共 3 个。

支持范围与已知限制

• 基础色只能是 6 位十六进制。文本框里要保留开头的 #,并且只允许输入最多 6 位十六进制字符,其他字符被忽略。
• 每组固定,不能调整偏移角度、亮度档位或颜色数量,也不能把五组混合成一个自定义调色板。
• 灰色(没有饱和度)没有色相,所以类似色、互补色等几行结果都是同一个灰色。
• 颜色经过 HSL 转换和四舍五入,在基础色上取偏移 0 的颜色时,可能和你输入的值相差 1 个色阶。例如类似色中间一个与基础色在大多数情况下相同,但不保证逐位一致。
• 色块是按屏幕上的 sRGB 显示的,印刷或不同显示器上的实际观感会有差异。
• 复制依赖浏览器的剪贴板权限。如果被拒绝,代码会忽略错误,不会有失败提示。

常见问题:这些配色怎么选才好看?

没有唯一答案。常见的做法是网页或界面设计里以一个主色为主,类似色或单色系做辅助,互补色只用于少量强调,避免大面积同时使用。工具给出的是算术上的组合,最终要结合场景、品牌色和对比度要求自己调整。

常见问题:能保证文字和背景的对比度够吗?

不能。工具没有做对比度检查。如果你要把某个颜色当作文字背景,请使用专门的对比度检查工具验证是否符合你需要的可读性标准。

常见问题:单色系里的基础色在哪里?

单色系行的第一个色块就是基础色本身,后面五个亮度固定取 20%、35%、50%、65%、80%,基础色的亮度可能不是这五个值之一,所以基础色不会出现在后面五个里。

常见问题:互补色为什么只有两个颜色?

互补色的定义是色相环上正对的一对,所以只有基础色和它的对面色两个。如果想要更多的选项,可以参考分裂互补色或三角配色。

隐私与处理方式

配色在你的浏览器里完成,只是对你选择的颜色做数学计算,代码没有向任何服务器发送颜色值,也没有保存。复制动作是把色值写入你设备的剪贴板。刷新页面会恢复默认的 #2F5D50。