在线调色板

什么是在线调色板？

调色板（Color Palette）是设计师最常用的工具之一，它帮助你在海量颜色中快速找到一组协调的搭配。本工具基于色相环（HSL 色彩模型）计算配色关系：选定一个基准色后，通过旋转色相、调整饱和度与明度，自动生成五色一组的和谐配色方案，覆盖近似色、互补色、三角色、四角色等经典配色法则。

近似色方案选取基准色相邻的色相，整体柔和统一，适合内容型界面；互补色方案与基准色呈 180° 对比，视觉冲击强，适合强调与点缀；三角色方案在色环上取 120° 间隔，稳重又活泼；四角色方案取 90° 间隔，层次丰富，适合插画与数据可视化。「统一明度」选项会把所有颜色的亮度拉齐，让整套配色更耐看。

配色结果支持两种使用方式：点击任意色块单独复制颜色代码，或点击「复制配色方案」一次性复制全部颜色。整个过程在浏览器本地完成，也可以点击「随机基准色」寻找灵感。

使用步骤

1. 在「基准颜色」中选择一个主色（或点击「随机基准色」碰碰运气）；
2. 选择方案类型：近似色、互补色、三角色、四角色或随机配色；
3. 按需勾选「统一明度」，点击「生成配色方案」；
4. 点击色块复制单个颜色，或点击「复制配色方案」复制全部颜色。

常见问题

什么是互补色、近似色、三角色？

互补色是色环上相差 180° 的颜色，对比最强；近似色是色环上相邻（相差约 30°）的颜色，观感柔和统一；三角色是在色环上均匀取 120° 间隔的三个颜色，平衡且富有活力。

为什么生成的配色看起来不协调？

协调的配色通常让一个颜色作为主色、其余作为辅助色使用，面积比例要拉开（如 60% 主色、30% 辅助色、10% 点缀色）。同时可勾选「统一明度」让所有颜色亮度接近，视觉上会更和谐。

怎么把配色用到自己的设计里？

点击任意色块即可复制对应的十六进制颜色代码；也可以点击「复制配色方案」一次性复制全部颜色，粘贴到 CSS、Figma 或 Sketch 中使用。

可以指定一个品牌色来生成整套配色吗？

可以。在「基准颜色」中选择你的品牌色，再选择方案类型（如近似色或三角色），即可生成以品牌色为核心的整套配色，适合设计系统与主题定制。

配色方案可以保存或分享吗？

复制颜色代码后自行保存即可，本工具纯本地运行，不提供云端存储。你也可以把复制的十六进制列表分享给同事，对方粘贴到任意设计工具即可还原配色。