首页实验室

色彩助手帮助手册

🎨 色彩助手功能介绍

色彩助手是一款专为UI设计师和前端开发工程师打造的专业色彩工具集，提供一站式色彩处理解决方案。

📋 主要功能

颜色转换 - 支持HEX、RGB、HSL三种颜色格式的相互转换，一键复制颜色值
对比度检查 - 实时检查前景色与背景色的对比度，确保符合WCAG无障碍标准
配色方案生成 - 自动生成互补色、类比色、三角色、单色、分裂互补、四角色方案
渐变生成器 - 可视化创建水平、垂直、对角线、径向渐变，一键复制CSS代码
Tailwind配色 - 内置19种Tailwind官方配色方案，快速选取标准色值
图片取色 - 上传图片自动提取主色调，快速获取设计灵感
CSS变量生成 - 自动生成完整的CSS变量代码，便于项目中统一管理配色
十二色相环 - 可视化色环，直观选取颜色

💡 使用技巧

快速选色：点击色相环上的颜色块可快速选取颜色

复制颜色：每个颜色值旁边都有复制按钮，点击即可复制到剪贴板

暗色模式：点击右上角的主题切换按钮可切换明暗主题

对比度合规：在对比度检查模块中，绿色表示符合无障碍标准，红色表示需要调整

🎯 色彩理论基础

互补色

色相环上相差180度的颜色，如红色与青色、蓝色与橙色，对比强烈，用于突出重点。

类比色

色相环上相邻的颜色，如红、橙、黄，和谐统一，用于创建协调的配色方案。

三角色

色相环上均匀分布的三个颜色，如红、黄、蓝，色彩丰富且平衡。

单色

同一色相的不同明度变化，简洁优雅，适合需要层次感的设计。

🎨 RGB 与 HEX 颜色码对照表

颜色预览	英文代码	中文名称	十六进制	RGB
	LightPink	浅粉红	#FFB6C1	255,182,193
	Pink	粉红	#FFC0CB	255,192,203
	Crimson	猩红	#DC143C	220,20,60
	HotPink	热情粉红	#FF69B4	255,105,180
	Magenta	洋红	#FF00FF	255,0,255
	DarkMagenta	深洋红	#8B008B	139,0,139
	Purple	紫色	#800080	128,0,128
	DarkViolet	深紫罗兰	#9400D3	148,0,211
	Indigo	靛青	#4B0082	75,0,130
	Blue	纯蓝	#0000FF	0,0,255
	DarkBlue	深蓝色	#00008B	0,0,139
	Navy	海军蓝	#000080	0,0,128
	SkyBlue	天蓝色	#0EA5E9	14,165,233
	DeepSkyBlue	深天蓝	#00BFFF	0,191,255
	Cyan	青色	#00FFFF	0,255,255
	DarkTurquoise	深绿宝石	#00CED1	0,206,209
	DarkCyan	深青色	#008B8B	0,139,139
	SpringGreen	春绿	#00FF7F	0,255,127
	Lime	酸橙绿	#00FF00	0,255,0
	ForestGreen	森林绿	#228B22	34,139,34
	Green	纯绿	#008000	0,128,0
	Chartreuse	查特酒绿	#7FFF00	127,255,0
	Yellow	纯黄	#FFFF00	255,255,0
	Gold	金色	#FFD700	255,215,0
	Orange	橙色	#FFA500	255,165,0
	DarkOrange	深橙色	#FF8C00	255,140,0
	OrangeRed	橙红色	#FF4500	255,69,0
	Red	纯红	#FF0000	255,0,0
	DarkRed	深红色	#8B0000	139,0,0
	White	纯白	#FFFFFF	255,255,255
	Silver	银白色	#C0C0C0	192,192,192
	Gray	灰色	#808080	128,128,128
	Black	纯黑	#000000	0,0,0

📖 快速参考

HEX格式：#RRGGBB，如 #FF5733

RGB格式：rgb(R, G, B)，如 rgb(255, 87, 51)

HSL格式：hsl(H, S%, L%)，如 hsl(9, 100%, 60%)

对比度标准：AA级 ≥ 4.5:1，AAA级 ≥ 7:1

关于实验室招聘站点地图