首页/网页/颜色/配色方案生成器

配色方案生成器

最后修改时间：2026年5月19日

这个在线配色方案生成器可以根据当前颜色自动计算互补色、分裂互补色、类似色、三角色、四色配色和单色方案，适合网页设计、品牌配色和组件主题设计。

页面会同步输出 HEX、RGB 和 HSL 数值，方便直接复制到样式表、设计稿或设计系统变量中。

支持查看主色及延展配色的 HEX、RGB、HSL 值。
适合快速生成按钮、图表、插图或品牌页面的色彩组合。
表格中的颜色关键字保留 CSS 英文原名，复制更直接。

基础颜色与 HSL 参考

下表列出常用基础颜色的 HEX、RGB 和 HSL 数值，便于对照与调色。

颜色	HTML / CSS 颜色关键字	十六进制代码 #RRGGBB	RGB 十进制代码 (R, G, B)	HSL 值 (H, S, L)
	`black`	`#000000`	`rgb(0,0,0)`	`hsl(0,0%,0%)`
	`white`	`#FFFFFF`	`rgb(255,255,255)`	`hsl(0,0%,100%)`
	`red`	`#FF0000`	`rgb(255,0,0)`	`hsl(0,100%,50%)`
	`lime`	`#00FF00`	`rgb(0,255,0)`	`hsl(120,100%,50%)`
	`blue`	`#0000FF`	`rgb(0,0,255)`	`hsl(240,100%,50%)`
	`yellow`	`#FFFF00`	`rgb(255,255,0)`	`hsl(60,100%,50%)`
	`aqua`	`#00FFFF`	`rgb(0,255,255)`	`hsl(180,100%,50%)`
	`fuchsia`	`#FF00FF`	`rgb(255,0,255)`	`hsl(300,100%,50%)`
	`silver`	`#C0C0C0`	`rgb(192,192,192)`	`hsl(0,0%,100%)`
	`gray`	`#808080`	`rgb(128,128,128)`	`hsl(0,0%,100%)`
	`maroon`	`#800000`	`rgb(128,0,0)`	`hsl(0,100%,50%)`
	`olive`	`#808000`	`rgb(128,128,0)`	`hsl(60,100%,50%)`
	`green`	`#008000`	`rgb(0,128,0)`	`hsl(120,100%,50%)`
	`purple`	`#800080`	`rgb(128,0,128)`	`hsl(300,100%,50%)`
	`teal`	`#008080`	`rgb(0,128,128)`	`hsl(180,100%,50%)`
	`navy`	`#000080`	`rgb(0,0,128)`	`hsl(240,100%,50%)`

广告

颜色工具

常用颜色

站点信息