配色方案生成器

从任意基础色生成互补色、类似色、三色及四色配色方案

加载示例

基础色

配色方案

生成的配色

什么是配色方案?

配色方案是一组经过选择、能够在设计中协调搭配的固定颜色。当你为品牌、网站或插图选定一种基础色时,需要与之相配的辅助色。配色方案生成器通过应用色彩理论规则——具体而言是标准HSL色轮上的几何关系——来自动完成这一选择。

HSL(色相、饱和度、亮度)色轮将色相排列在360度的圆环上。红色位于0度,绿色位于120度,蓝色位于240度。每种色彩协调方案都通过选取距基础色特定角度的色相来实现。例如,互补色方案选取两个相差180度的颜色;类似色方案则选取两侧30度以内的颜色。这些几何规则之所以能产生平衡的组合,是因为所选色相分布在色轮各处,而非聚集于某一区域。

本工具接受任意hex颜色作为输入,将其转换为HSL,按所选方案定义的角度旋转色相,再将结果转换回hex。支持六种方案:互补色、类似色、三色、分裂互补色、四色和单色调。每种方案生成2至5种不同数量的输出颜色。

为何使用此配色方案生成器?

依靠反复试验来选取协调颜色既耗时又难以保持一致性。配色方案生成器即时应用色彩理论规则,从任意起始点为你提供数学上平衡的结果。

即时生成配色
选择基础色和方案类型,配色方案立即呈现。无需提交表单,无需等待加载。更改基础色后,输出实时更新。
🎨
六种协调方案
可选互补色、类似色、三色、分裂互补色、四色或单色调。每种方案产生不同的视觉效果,从高对比度的色彩组合到微妙的单色调渐变。
🔒
隐私优先处理
所有颜色运算均在浏览器中完成,不会向任何服务器发送颜色数据。页面加载后即可离线使用。
📋
一键导出
单击即可复制单个hex代码或整套配色方案,直接粘贴到CSS、Figma、Tailwind配置文件或任何接受hex值的设计工具中。

配色方案生成器的使用场景

UI主题创建
前端开发者在构建新应用时,可以从品牌色出发,为主色、次色和强调色标记生成完整的配色方案。三色或四色方案能为按钮、链接、提示框和背景提供足够的色彩变化。
设计系统色彩标记
设计系统工程师使用单色调方案为单一品牌色相生成亮度层级,然后将每个层级映射到命名标记(例如blue-100到blue-900)。
数据可视化
数据工程师和分析师需要为图表系列选取既有区分度又不相互冲突的颜色。类似色或三色方案能为3到6个系列提供足够的区分度,同时保持图表视觉上的协调。
营销落地页
设计师在制作营销页面时,从品牌主色出发,使用分裂互补方案为CTA按钮和重点区域找到强调色,同时避免与品牌标志产生色彩冲突。
无障碍配色
测试WCAG合规性的QA工程师将生成的配色方案中的颜色两两配对,并通过对比度检测工具验证。从互补色或分裂互补色方案出发,往往能获得高亮度对比度的配色组合。
学习色彩理论
学习设计的学生可以对同一基础色切换所有六种方案,观察每种几何规则如何在色轮上分布色相,直观地理解抽象的角度概念。

色彩协调方案对比

每种协调方案都基于HSL色轮上从基础色出发的色相旋转角度来选取颜色。下表列出了每种方案的名称、生成颜色数量、旋转角度及最适合的设计场景。

方案颜色数色相角度适用场景
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

HSL色轮旋转原理

本工具的所有配色生成都依赖HSL颜色模型。理解其三个维度有助于你预测基础色在每种方案下的变化效果。

色相(0-360)
色相是色轮上的角度位置。0为红色,60为黄色,120为绿色,180为青色,240为蓝色,300为洋红色。配色方案通过旋转该值来选取颜色,同时保持饱和度和亮度不变。
饱和度(0-100%)
饱和度表示颜色的鲜艳程度。100%为完全饱和,0%为灰色。配色方案保留基础色的饱和度,使所有生成颜色具有相同的色彩强度。
亮度(0-100%)
亮度表示颜色的明暗程度。0%为黑色,50%为纯色相,100%为白色。单色调方案通过调整亮度来创建色调层级;其他方案则保持亮度不变。

代码示例

通过HSL转换和色相旋转以编程方式生成配色方案。

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

常见问题

互补色与分裂互补色有什么区别?
互补色方案选取色轮上相差恰好180度的两种颜色,产生最大的色相对比。分裂互补色方案将正对面的颜色替换为距基础色150度和210度的两种颜色,在保持强烈对比的同时降低视觉张力。分裂互补色在UI设计中更易于使用,因为两种强调色都不会与基础色形成直接对立。
UI配色方案应包含多少种颜色?
大多数设计系统使用3到5种核心色相:一种主色、一种次色、一种中性色以及一两种强调色。每种核心色相再生成一套亮度层级(100到900)。可以从三色或四色方案出发确定核心色相,然后为每种色相生成单色调层级。
这些配色方案可以用于Tailwind CSS吗?
可以。将hex值复制后添加到tailwind.config.js或tailwind.config.ts文件的colors对象中。对于单色调层级,将每个色调映射到对应的数字键(50、100、200等),以符合Tailwind的命名规范。
为什么有些生成的颜色看起来暗淡或浑浊?
如果基础色的饱和度较低,或亮度过于极端(接近0%或100%),旋转后的色相也会显得暗淡。生成器会保留基础色的饱和度和亮度值。若要获得鲜艳的配色,请选择饱和度高于50%、亮度在30%到70%之间的基础色。
HSL与HSV/HSB有什么区别?
HSL和HSV都以色相作为圆形轴,但对亮度的定义不同。在HSL中,亮度50%为纯色相,100%为白色。在HSV(也称HSB)中,明度100%为纯色相,且不降低饱和度就无法达到白色。大多数配色工具使用HSL,因为其亮度轴更符合人类对颜色明暗的感知直觉。
色彩协调方案与无障碍访问有什么关系?
色彩协调与WCAG对比度是两个不同的概念。互补色方案具有最大的色相对比,但这并不能保证足够的亮度对比度以满足文本可读性要求。生成配色后,应使用WCAG AA标准(普通文本对比度4.5:1)对每对前景色和背景色进行测试。亮度相近的颜色无论色相关系如何,都难以通过对比度检测。
HSL与CSS的hsl()函数是同一回事吗?
是的。CSS的hsl()函数接受三个参数:以度数表示的色相(0-360)、以百分比表示的饱和度,以及以百分比表示的亮度。CSS Color Level 4还支持以斜杠分隔的透明度值:hsl(240 60% 50% / 0.8)。本生成器所使用的HSL模型与CSS规范完全一致,因此可以直接将色相、饱和度和亮度值粘贴到样式表中使用。