配色方案生成器
根据一个HEX颜色生成互补、类似、三角、分裂互补、四角或单色系的HSL配色,并可下载PNG色板。
根据一个HEX颜色,生成一组小型数字配色。生成器在HSL色轮上旋转色相,单色系则改变亮度。你可以在表中读取精确的代码,并下载色块图,在设计中比较这些颜色。
使用方法
- 输入不透明的三位或六位HEX颜色。
- 选择配色的颜色关系。
- 对照预览和HEX表,需要时下载PNG。
- 把配色用于文字之前,请另外检查前景色与背景色的对比度。
计算公式
互补色:H+180°;三角配色:H、H+120°、H+240°;正方形四角配色:H、H+90°、H+180°、H+270°
类似色使用 H − 30°、H、H + 30°;分裂互补色使用 H、H + 150°、H + 210°。旋转类配色保持HSL的饱和度和亮度不变。单色系模式把亮度固定为20、35、50、65和80%。色相以360度为一圈循环。
示例
纯红 #FF0000 的HSL为0°、100%、50%。三角配色加上120°和240°,得到 #00FF00 和 #0000FF。这只是HSL数值上的关系,并不保证视觉亮度相同。
输出
PNG中只含色块,而表格保留了构成值和HEX代码。HSL是数字sRGB模型。颜料混合、印刷配置文件以及感知均匀性,则需要其他模型。
常见问题
为什么灰色色块会重复?
灰色的饱和度为零。无论旋转到什么色相都不会产生色度,所以旋转后的结果仍是灰色。单色系模式仍能得到更浅和更深的灰色。
每个配色都包含原来的颜色吗?
旋转类配色包含。单色系模式使用所列的固定亮度级别,所以只有取整后恰好等于其中某一级时,才会包含原色。
这些颜色放在一起,无障碍上没问题吗?
和谐的颜色关系并不能保证可读的对比度。请按实际的字号和用途,逐一检查每组前景色与背景色。
资料来源
最后更新:
包含这些输入的页面地址: https://kakao.mobile/zh/tools/color-scheme-generator/
引用此工具
kakaoCalc. (2026, November 8). 配色方案生成器. https://kakao.mobile/zh/tools/color-scheme-generator/
“配色方案生成器.” kakaoCalc, 8 Nov. 2026, kakao.mobile/zh/tools/color-scheme-generator/.