一级横色带大全：按用途精选的色系、色值与宽度合集

APP下载

2026-11-06 09:51:30 字号：A- A A+ 来源：观察者网

一级横色带大全适合按主色调快速浏览、挑选和组合颜色。下面整理12种常用横色带，以红、橙、黄等颜色作为一级分类，并附上数字色号、RGB值和适用方向，方便制作色卡、界面色带、图表标签与产品视觉。色号用于屏幕配色参考，不代表某一行业的统一实体色卡标准。

12种常用一级横色带色卡

横向色条可用整块纯色呈现，也可以在色条旁标出名称和色号。表内色号采用HEX格式，RGB数值依次对应红、绿、蓝通道。

色带名称	HEX色号	RGB值	常见搭配方向
正红	#D9363E	217, 54, 62	提示、活动重点、醒目标记
橙色	#F28C28	242, 140, 40	活力主题、暖色分组、促销信息
明黄	#F2C94C	242, 201, 76	提示标签、轻快图表、浅底点缀
玫粉	#E8839B	232, 131, 155	柔和主题、生活方式、亲和型分类
草绿	#3A9D5D	58, 157, 93	自然主题、正常状态、正向数据
青绿	#28A6A1	40, 166, 161	清爽界面、服务分类、冷暖过渡
亮蓝	#3478C8	52, 120, 200	信息主色、链接状态、科技主题
靛蓝	#4B5AA6	75, 90, 166	稳重分类、数据系列、深色配色
紫色	#8053A6	128, 83, 166	创意主题、差异化标记、装饰色带
棕色	#8B5A3C	139, 90, 60	材质主题、复古视觉、暖色中性色
中灰	#7A828C	122, 130, 140	辅助说明、次级数据、背景分隔
炭黑	#24272B	36, 39, 43	文字区分、深色主题、强调边界

暖色组视觉存在感较强，适合做需要迅速区分的主色带。正红适合短面积强调，橙色可以承接活跃、热情的主题，明黄更适合作为提示和点缀，玫粉则让整体色调柔和下来。将四种颜色并列时，可按红、橙、黄、粉排列；若需要突出红色，其他色带可降低亮度或缩短展示面积。

草绿和青绿都带有自然、清爽的观感，但视觉方向不同：草绿更接近常见植物色，适合正向状态与自然主题；青绿则连接绿色和蓝色，适合服务分类、清洁感主题以及需要过渡的图表。两色相邻使用时，可以用草绿表示重点类别、青绿表示辅助类别，保持明度接近，减少色带之间的跳跃感。

亮蓝更醒目，适合作为主色或重要数据系列；靛蓝色调偏稳，适合用来承接较深的层级；紫色能带来鲜明区分，适合创意主题或少量重点栏目。组合展示时，可用亮蓝起头、靛蓝居中、紫色收尾，让横向色带呈现由明快到浓郁的节奏。若色带中还需要放文字，应为文字留出清晰的明暗对比。

中性色可以平衡鲜艳颜色，也适合做背景、分隔和辅助层级。棕色带有温暖的材质感，可与橙色、明黄搭配；中灰适合放置次级标签或不突出的图表类别；炭黑则适合用于深色主题、文字区域和边界强调。三者不必同时承担主视觉，通常选择一种作为辅助色即可。

纯色横带的识别最直接，适合类别数量较多、需要快速扫读的色卡。制作时，可让同一类色带保持一致的长度和高度，并在旁边固定标注颜色名称与HEX色号；这样即使色条缩小，读者仍能通过文字和色值辨认。暖色、冷色和中性色可以分组排列，组与组之间留出间距，避免颜色连续铺满后难以区分。

渐变横带更适合表达同一色相的深浅变化或连续数值。可从亮蓝过渡到靛蓝，也可从浅黄过渡到橙色，但一条渐变带最好对应一个连续主题，不要把无关色相随意拼接。若需要分档比较，采用独立纯色色块更清楚；若需要表现由低到高的连续变化，再使用渐变色带，并在关键位置标出数值或等级名称。

一级横色带用于屏幕设计时，可直接以HEX色号作为填充值，再依据文字、底色和边框调整对比。颜色相近的分类不要只靠色相区分，还可以配合名称、图标或边框样式；对比强烈的正红、明黄和炭黑，则宜控制同时出现的面积，避免主次混乱。表格、信息卡和图表如果共用一套颜色，应保持同一类别始终对应同一色带。

这组一级横色带大全覆盖暖色、清新色、冷色与中性色，可作为一份便于挑选的基础色卡。选色时先确定主分类，再从相邻色系中补充辅助色；确定色号后统一应用到横条、标签和图表，能让整套视觉更连贯，也便于后续维护。

请自觉遵守互联网相关的政策法规，共同营造“阳光、理性、平和、友善”的跟评互动环境。

表情加粗图片发表