颜色工具

色彩搭配生成器

根据十六进制颜色代码生成互补色、类似色、三色、分裂互补色与四色等色彩搭配方案。

运行工具

色彩搭配生成工具可根据输入的十六进制颜色代码生成多种协调的色彩搭配方案。工具支持五种常用的色彩搭配模式,包括互补色、类似色、三色、分裂互补色以及四色配色方案。在输入颜色时,工具接受标准十六进制 RGB 代码,若省略开头的井号“#”会自动补齐,三位简写代码也会自动扩展为标准的六位格式。如果不填写颜色,系统默认以 #3498db 作为基础颜色进行计算;如果不选择搭配类型,则默认使用互补色模式。生成过程中,工具基于色相环角度转换计算各配色分量,输出标准化后的基础颜色以及对应搭配模式下的六位小写十六进制颜色代码列表。该工具适合设计师与前端开发者在调色、界面排版或主题配色时快速获取符合色彩学规律的配色组合。

使用说明

  1. 在颜色输入框中输入十六进制颜色代码(例如 #3498db 或 3498db),也可以留空使用默认颜色。
  2. 在搭配类型选项中选择所需的色彩搭配模式,支持互补色、类似色、三色、分裂互补色或四色。
  3. 点击运行按钮,结果区域将显示规范化后的基础颜色以及计算生成的配色十六进制代码列表。

示例

  • 输入基础颜色 #e74c3c 并选择互补色模式,计算后将生成基础色 #e74c3c 及其 180 度互补色 #3cd7e7。
  • 输入颜色 2ecc71(省略 #)并选择类似色模式,工具自动规范化为 #2ecc71,并生成色相偏移 -30 度与 +30 度的类似配色方案。

常见问题

输入颜色时是否必须带有前缀井号“#”?

不是必须的。如果输入时省略了前缀井号,工具会自动补充;如果输入 3 位简写十六进制代码,也会自动扩展为标准的 6 位代码。

工具支持哪些色彩搭配模式?

目前支持互补色、类似色、三色搭配、分裂互补色以及四色搭配共五种经典色彩学模式。

如果不输入任何参数直接运行会怎样?

工具会自动使用默认基础颜色 #3498db 和默认的互补色搭配类型进行计算并生成结果。

嵌入此工具

使用以下代码,将这个可直接使用的 SmartPlusLab 工具添加到您的网站。