配色方案生成器

通过交互式色轮构建和谐配色方案——应用类比色、互补色或三角配色等规则，即时复制任意色值。

亮度 100%

和谐规则

类比色单色三角配色互补色分裂互补色四方配色色阶自定义

基础颜色

当前颜色

HEX

RGB

HSL

调色板

选择和谐规则和基础颜色，然后拖动色轮标记进行微调。点击任意色样可复制，或将其设为新的基础颜色。

关于配色方案生成器

调色板生成器基于交互式色轮构建和谐的配色方案。选择一个基础色,再挑选一种配色规则——类似色、单色、三角色、互补色、分裂互补色、正方色或完全自定义——工具会立即计算出匹配的调色板,并在色轮上提供可拖动的标记以便精细调整。

每个色块都会显示其 HEX、RGB、HSL 和 HSB 数值,调色板中的任意颜色都可一键设为新的基础色。亮度滑块可以让整套方案整体变亮或变暗,同时保持色相关系不变,非常适合快速探索方案的各种变体。

一切计算都在浏览器中基于 HSV 色轮的色彩理论数学实时完成——没有上传,也没有服务器往返请求。当调色板效果满意时,可以复制单个数值、一次性复制全部颜色、复制现成的 CSS 变量,或导出为 JSON。

是的,完全免费。调色板的计算完全在浏览器中运行,不涉及积分、账户或使用次数限制。

每条规则都会以相对于基础色的固定角度,将其他调色板颜色排布在色轮上:互补色位于正对面(180°),三角色相隔 120°,类似色让相邻颜色靠得很近,分裂互补色分列在对立色相两侧,正方色则以 90° 间隔排布四种色相。

类似色或单色方案对界面来说最为稳妥,因为它们给人平静和谐的感觉。当你需要在主导基础色上突出按钮和行动号召等强调色时,可以使用互补色或分裂互补色。

可以。切换到自定义规则后,可在色轮上独立拖动每个标记;也可以从任意配色规则出发拖动标记进行调整——工具会随着你的操作实时更新调色板。

每个色块都会显示 HEX、RGB、HSL 和 HSB 数值,均可单独复制。你也可以将整套调色板复制为纯数值列表、可直接用于样式表的 CSS 自定义属性,或者用于交给代码或设计工具的 JSON。