什么是配色方案？

配色方案是基于色彩理论，从一个基础颜色出发，按照特定规则生成一组协调的颜色组合。常见的有互补色（色轮上对立的两个颜色）、类似色（色轮上相邻的颜色）、三色组（色轮上等距的三个颜色）等。好的配色方案能让设计作品更加和谐美观。

如何选择合适的配色方案？

选择配色方案需考虑设计目的：互补色适合需要高对比度的设计；类似色适合营造柔和统一的氛围；三色组和四色组适合需要丰富色彩的设计；单色方案适合简约风格。建议先确定主色调的情感基调，再选择对应方案。

HEX、RGB、HSL 三种颜色格式有什么区别？

HEX 是十六进制表示法（如 #FF6B35），简洁直观；RGB 用红绿蓝三通道值表示（如 rgb(255, 107, 53)），适合编程使用；HSL 用色相、饱和度、明度表示（如 hsl(20, 100%, 60%)），最接近人眼感知，方便调色。三者可以互相转换，表示同一颜色。

导出的 CSS/SCSS/Tailwind 代码怎么用？

CSS 变量可直接放在 :root 选择器中，用 var(--color-primary) 使用；SCSS 变量放在样式文件顶部，用 $color-primary 使用；Tailwind 配置放在 tailwind.config.js 的 theme.extend.colors 中，用 bg-primary 等类名使用。导出后可直接复制到项目中。

Color Palette Generator

Generate color scheme palettes

基础颜色

配色方案

色相偏移: 0°

饱和度: 0%

明度: 0%

配色方案生成器使用说明

主要功能

多种配色方案 - 互补色、类似色、三色组、四色组、分裂互补、单色
色彩调整 - 支持色相偏移、饱和度、明度实时调节
多格式输出 - HEX、RGB、HSL 颜色值一键复制
代码导出 - 支持 CSS 变量、Tailwind 配置、SCSS 变量

使用场景

UI/UX 设计配色参考
网站主题色彩搭配
品牌视觉设计
前端开发色彩变量生成

Color Palette Generator

配色方案生成器使用说明

主要功能

使用场景

FAQ

Related Tools