跳到正文
SPCXTools

配色生成器

挑选一种颜色,即可基于色彩理论获取和谐的五色配色方案。

本地运行——文件不会离开你的设备

正在加载工具…

如何使用配色生成器

  1. 1使用拾色器选择基础色,输入 HEX/RGB/HSL 值,或点击随机。
  2. 2选择一种配色方案,如互补色、类似色或三角色。
  3. 3点击任意色块即可复制其 HEX 代码。
  4. 4将整个配色方案复制为 CSS 自定义属性或 JSON。

从单色生成调色板

为网站、App、演示文稿、Logo 或海报进行色彩搭配,往往是设计中最难的一环。色彩理论基于色轮总结了经典的色彩关系,而这款调色板生成器能帮您轻松应用这些法则。只需输入您喜欢的一种颜色(或品牌色),选择一种配色方案,即可生成五种和谐的搭配色,并能一键复制到您的项目中。

功能特点

  • 七种配色方案:互补色、类似色、三角色、分裂互补色、四角色、单色和色阶。
  • 任意起始颜色:支持 HEX、RGB、HSL 或 CSS 颜色名称,也可以随机生成。
  • 点击复制:点击任意色块即可快速复制。
  • 导出:可导出为 CSS 自定义属性或 JSON 数组。
  • 清晰易读的标签:文本颜色会根据背景对比度自动在黑色和白色之间切换。

该使用哪种配色方案?

配色方案 视觉感受 适用场景
互补色 (Complementary) 大胆、高对比度 CTA 按钮、体育、促销
类似色 (Analogous) 平静、和谐 自然、健康、背景
三角色 (Triadic) 活泼、平衡 儿童产品、插画
分裂互补色 (Split complementary) 鲜明但不突兀 需要一个强点缀色的网站
四角色 (Tetradic) 丰富、多彩 信息图表和数据图表
单色 (Monochromatic) 优雅、极简 企业网站、作品集
色阶 (Shades) 系统化 设计系统、UI 状态

从配色到设计

确定配色后,您可以使用颜色对比度检查器确保文本在各种背景下清晰可读,通过颜色转换器将颜色转换为 RGB、HSL 或用于印刷的 CMYK 格式,还可以使用 CSS 渐变生成器将其中两种颜色生成平滑的渐变背景。

常见问题

什么是互补色配色方案?
互补色在色轮上处于相对位置,例如蓝色和橙色。强烈的对比能让强调元素和号召性用语(CTA)脱颖而出。建议将其中一种颜色作为主色,另一种互补色作为点缀少量使用。
类似色、三色和四色配色方案有什么区别?
类似色是色轮上相邻的颜色,给人平静和谐的感觉。三色配色在色轮上相隔 120° 均匀分布,充满活力且保持平衡。四色(方形)配色使用相隔 90° 的四种色相,色彩最为丰富——通常最好选择其中一种作为主色调。
如何在网站上使用五色配色方案?
常见的方法是 60-30-10 法则——大约 60% 的中性背景色,30% 的主色调和 10% 的点缀色。使用最深的颜色作为文本颜色,并使用对比度检查工具测试所有文本与背景颜色的组合。
我可以基于我的品牌色生成配色吗?
可以。输入您品牌色的 HEX 代码作为基准色;所有配色方案都将围绕它生成。如果想从 Logo 或网站截图中提取品牌色,请使用图片拾色器工具。
颜色是如何计算生成的?
基准色会被转换为 HSL(色相、饱和度、亮度)模式。不同的配色方案通过在色轮上按固定角度旋转色相来生成,而单色配色和明暗色调则保持色相不变,仅改变亮度。