🎨 调色板生成器

什么是调色板生成器？

调色板生成器是一款辅助设计师快速生成配色方案的在线工具。色彩搭配是设计中最重要的环节之一，好的配色能让作品更专业、更具吸引力。但对于非专业设计师来说，挑选合适的颜色组合并不容易。本工具基于色彩理论，输入一个主色后，自动生成互补色、类似色、三色配色、四色配色、单色配色、分裂互补等多种经典配色方案。同时支持HEX、RGB、HSL三种常用颜色格式的相互转换，可一键导出CSS变量代码，方便前端开发使用。

功能特点

• 6种配色方案：互补色、类似色、三色配色、四色配色、单色配色、分裂互补，覆盖经典配色理论。
• 实时预览：点击生成后立即展示配色条和详细颜色信息，直观感受配色效果。
• 格式转换：支持HEX、RGB、HSL三种颜色格式的相互转换，修改任意格式其他自动更新。
• CSS代码导出：一键生成CSS变量代码，复制即可用于前端项目。
• 颜色信息展示：每个颜色都显示HEX、RGB、HSL三种值，方便在不同场合使用。

配色理论基础

互补色（Complementary）

互补色是色轮上相对位置的两种颜色（相隔180度），如红色和青色、蓝色和黄色。互补色搭配对比强烈，视觉冲击力强，能产生鲜明、醒目的效果。但使用时要注意比例，通常一种颜色为主色，另一种为强调色，避免50:50使用造成视觉疲劳。常用于需要突出重点的场合，如按钮、标签、CTA等。

类似色（Analogous）

类似色是色轮上相邻的几种颜色（通常相隔30°左右），如蓝色、蓝紫色、紫色。类似色搭配色调和谐统一，视觉舒适度高，给人柔和、协调的感觉。是最容易搭配出高级感的配色方案之一。常用于品牌设计、网页背景、插画等需要营造整体氛围的场景。但对比度较低，需要注意信息层级的区分。

三色配色（Triadic）

三色配色是色轮上等距分布的三种颜色（相隔120度），如红-黄-蓝。三色配色既丰富又平衡，既有足够的对比度又不会过于冲突，是比较活泼生动的配色方案。使用时建议选择一种颜色作为主色，另外两种作为辅助色，控制使用比例以保持视觉平衡。常用于插画、海报、游戏界面等需要活力感的设计。

四色配色（Tetradic）

四色配色（又称双互补色）是色轮上两组互补色组成的四种颜色，形成一个矩形。四色配色提供了最丰富的颜色选择，但也最容易搭配出错。使用时需要明确主次关系，以一种颜色为主，其他颜色辅助。适合内容丰富、需要多种色彩区分的复杂设计，如信息图表、仪表盘、数据可视化等。

单色配色（Monochromatic）

单色配色是同一色相不同明度和饱和度的颜色组合。这种配色方案高度统一和谐，简洁高级，不容易出错。通过明暗变化创造层次感和视觉深度。常用于品牌设计、专业网站、极简风格界面等。缺点是对比度可能不足，需要特别注意可读性（如文字与背景的对比度）。

颜色格式详解

HEX（十六进制）

HEX颜色使用十六进制数表示RGB值，格式为#RRGGBB，取值范围00-FF（对应0-255）。例如#FF0000表示红色。HEX格式简洁紧凑，是Web设计中最常用的颜色表示方式。有的还带透明度：#RRGGBBAA，最后两位是Alpha通道。

RGB

RGB颜色使用红绿蓝三原色的数值表示，格式为rgb(红, 绿, 蓝)，每通道0-255。带透明度的是rgba(红, 绿, 蓝, alpha)，alpha取值0-1。RGB在CSS和前端开发中广泛使用，特别是需要透明度时非常方便。

HSL

HSL颜色使用色相（Hue）、饱和度（Saturation）、明度（Lightness）三个维度表示。色相0-360度（对应色轮角度），饱和度和明度0-100%。HSL更符合人类对颜色的感知，调整颜色时更直观——要变亮就调L，要变淡就调S，要变色就调H。带透明度的是hsla()。

使用场景

场景一：UI/网页设计配色

设计网站或App界面时，需要确定主色、辅助色、强调色等配色方案。选择一个品牌主色后，用本工具生成互补色作为按钮和强调色，生成单色配色作为不同状态（hover、active、disabled）的颜色变化。还可以生成类似色用于渐变和装饰，快速搭建一套完整的配色体系。

场景二：PPT/演示稿配色

做演示文稿时，好看的配色能让PPT增色不少。但大多数人并不擅长配色。用本工具选择一个喜欢的主色，生成一套三色配色或四色配色，直接应用到PPT的标题、图表、强调内容等不同元素上，配色专业又统一，比默认模板好看很多。

场景三：前端开发颜色转换

前端开发中经常需要在HEX、RGB、HSL之间转换颜色。设计稿用HEX，写透明效果需要RGBA，做颜色动画用HSL更方便。用本工具的颜色转换功能可以快速得到所需格式的颜色值。还能一键生成CSS变量代码，粘贴到样式文件中就能使用，提高开发效率。

配色小技巧

• 60-30-10法则：主色60%、辅助色30%、强调色10%，经典的配色比例法则。
• 注意对比度：文字与背景的对比度要达标，WCAG标准要求正文对比度≥4.5:1。
• 从自然中取色：大自然的配色最和谐，从照片中提取颜色是找灵感的好方法。
• 少即是多：配色不要太杂，一般3-5种主色就够了，太多容易乱。
• 考虑色盲友好：8%的男性有红绿色盲，不要只用颜色区分信息，结合形状和文字。