调色板生成器
在线调色板生成工具，输入一个基础色即可自动生成单色调和、互补色、三角配色、邻近色等多套配色方案。支持一键导出为 CSS 变量、SCSS 变量、JSON 或 Tailwind CSS 配置格式。
基础颜色
RGB
#e91e63
配色模式
调色板预览
色阶变化
导出代码
描述
调色板生成器适合设计师、前端开发、运营出图和品牌视觉整理场景。你可以先选择一个基础颜色，再快速生成互补色、类似色、三角色、分裂互补、四角色或单色系方案，同时查看色阶变化、复制单个颜色值，并导出可直接落地的代码配置。
页面能力
- 支持从预设色、随机色、色盘选择器或手动输入 `HEX` 颜色开始生成调色板。
- 支持互补色、类似色、三角色、分裂互补、四角色与单色系多种配色模式。
- 支持导出 `CSS`、`SCSS`、`JSON` 和 `Tailwind` 配置，适合直接接入项目样式系统。
什么时候用
- 为品牌主色快速扩展出组件色板、交互色、浅深层级和主题配色。
- 在网页、后台、海报或活动页设计前先验证配色是否协调，减少反复试色成本。
- 把颜色方案导出给前端、设计规范或配置文件，统一多人协作时的颜色口径。
颜色转换能力
- 当前页面可将基础色在 `RGB`、`HSL`、`HSV`、`HWB`、`CMYK`、`LAB`、`LCH` 等格式之间切换查看。
- 适合在设计稿、CSS、打印沟通或色彩分析场景中快速换算，避免手动查表。
- 点击颜色即可复制结果，方便直接粘贴到样式文件、设计文档或组件库主题配置中。
使用建议
- 如果你要做整套 UI 主题，建议先确定基础品牌色，再结合单色系色阶补齐 hover、border、background 等层级。
- 自动生成的和谐配色更适合做“起点方案”；正式上线前仍建议结合可读性、对比度和品牌规范做人工调整。
- 当前工具更适合快速配色与代码导出，不替代专业设计软件中的精细色彩管理与视觉评审流程。
常见颜色表示法
- HEX： 前端最常见的十六进制表示法，适合直接写入 CSS 或设计规范。
- RGB / HSL： 更适合网页与交互场景，便于理解颜色通道、亮度和饱和度变化。
- CMYK： 更常用于印刷沟通；屏幕显示与印刷呈现之间可能存在色差。
- LAB / LCH： 更偏向专业色彩空间，适合做更细的颜色分析与感知调整。