ZH
我的工具

配色方案生成器

根据一个HEX颜色生成互补、类似、三角、分裂互补、四角或单色系的HSL配色,并可下载PNG色板。

我的工具 →
广告

根据一个HEX颜色,生成一组小型数字配色。生成器在HSL色轮上旋转色相,单色系则改变亮度。你可以在表中读取精确的代码,并下载色块图,在设计中比较这些颜色。

使用方法

  1. 输入不透明的三位或六位HEX颜色。
  2. 选择配色的颜色关系。
  3. 对照预览和HEX表,需要时下载PNG。
  4. 把配色用于文字之前,请另外检查前景色与背景色的对比度。

计算公式

互补色: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模型。颜料混合、印刷配置文件以及感知均匀性,则需要其他模型。

常见问题

为什么灰色色块会重复?

灰色的饱和度为零。无论旋转到什么色相都不会产生色度,所以旋转后的结果仍是灰色。单色系模式仍能得到更浅和更深的灰色。

每个配色都包含原来的颜色吗?

旋转类配色包含。单色系模式使用所列的固定亮度级别,所以只有取整后恰好等于其中某一级时,才会包含原色。

这些颜色放在一起,无障碍上没问题吗?

和谐的颜色关系并不能保证可读的对比度。请按实际的字号和用途,逐一检查每组前景色与背景色。

资料来源

最后更新:

引用此工具
APA

kakaoCalc. (2026, November 8). 配色方案生成器. https://kakao.mobile/zh/tools/color-scheme-generator/

MLA

“配色方案生成器.” kakaoCalc, 8 Nov. 2026, kakao.mobile/zh/tools/color-scheme-generator/.

广告