一级横色带可以按色相顺序，将常见颜色放在同一行作快速对照：从红、橙、黄、绿、青、蓝、紫等彩色系开始，再补充粉、棕以及黑、白、灰等中性色。下面列出一组便于屏幕设计和分类展示的参考色值，并说明相近颜色的区别与适用场景。色值是数字显示参考，不代表唯一的行业标准。
常见色系对照
表中的 HEX 色值可用于网页、图表或设计软件中的屏幕配色。并排展示时，可按红到紫的大致色相顺序排列；粉色、棕色和中性色可作为补充类别。
| 色系 | 屏幕参考色值 | 与相邻色的区别 | 适用场景 |
|---|---|---|---|
| 红 | #E53935 | 色感鲜明，和橙色相比更偏冷、更醒目。 | 用于强调重点、提示紧急程度或标记需要关注的类别。 |
| 橙 | #FB8C00 | 介于红与黄之间，视觉活跃，但通常没有纯红那么强烈。 | 适合提示、次级强调和需要引起注意但不代表最高优先级的分类。 |
| 黄 | #FDD835 | 明度较高，和橙色相比更亮；浅黄色背景上的白字容易看不清。 | 适合标注提醒、轻量提示或需要突出明亮感的区域，搭配文字时宜选深色字。 |
| 黄绿 | #9CCC65 | 带有黄色倾向，比纯绿更明亮、柔和。 | 可用于区分过渡类别、自然主题或与深绿相邻的次级分组。 |
| 绿 | #43A047 | 比黄绿更沉稳，和青色相比偏向草木色感。 | 常用于表示完成、可用、正常状态，也适合自然和环保主题的分类。 |
| 青 | #00ACC1 | 处在绿与蓝之间，绿色感和蓝色感都比较明显。 | 适合标记中间类别、信息提示或需要与绿、蓝两组相区分的项目。 |
| 蓝 | #1E88E5 | 比青色更偏冷，常见于较稳定、清晰的视觉分组。 | 适用于说明、链接提示、数据类别或需要保持冷静观感的区域。 |
| 靛蓝 | #3949AB | 比普通蓝色更深，视觉上更接近蓝紫过渡色。 | 可作为蓝色分类的深色层级，或用于需要与亮蓝明显区分的项目。 |
| 紫 | #8E24AA | 比靛蓝更偏红，色彩辨识度较强。 | 适合独立类别、创意主题或需要从蓝色组中单独分出的内容。 |
| 洋红 | #D81B60 | 红色感和紫色感都较突出，比粉色浓重。 | 适合强调特殊类别或制作比粉色更醒目的标记。 |
| 粉 | #F06292 | 比洋红更浅、更柔和，常用于轻强调而非强警示。 | 适合柔和主题、辅助标签和需要与红色重点项区分的类别。 |
| 棕 | #8D6E63 | 饱和度通常较低，和橙色相比更沉稳，也更接近大地色。 | 适用于材质、土地、木色等主题分类，或作为彩色组之外的补充色。 |
黑、白、灰等中性色怎么放
黑、白、灰不属于红到紫的连续色相，但在横向色带中常作为辅助项出现。灰色可参考 #757575，用于次要信息或中性类别；黑色可参考 #212121，适合文字和深色标记；白色可参考 #FFFFFF，适合作为留白或浅色背景。白色与浅灰并排时差异较小，建议增加边框或文字标签，避免色块边界不明显。
按用途选择并排列
- 展示色相关系：按红、橙、黄、黄绿、绿、青、蓝、靛蓝、紫的顺序排列，让读者更容易看出颜色从暖到冷的变化；粉色和棕色可放在主色相之后。
- 区分不同类别：先挑选彼此容易辨认的颜色，再给每个色块配上名称或编号。颜色数量较多时，不要只依靠颜色表达类别，以免相近色难以区分。
- 区分状态或优先级：可以用红、橙、黄表示不同程度的提示，再用绿或蓝表达其他状态；具体含义应同时写在标签中，避免读者仅凭颜色猜测。
- 用于文字和背景：深色文字搭配浅色背景通常更易辨认。黄、浅粉等亮色不宜直接承载白色小字；深蓝、深紫等色块则应检查文字是否清晰。
使用色值时的注意事项
同一 HEX 色值在不同显示器、亮度设置和环境光下，呈现效果可能不同；印刷品还会受到纸张和印刷方式影响。因此，一级横色带适合作为颜色归类和屏幕视觉对照，不宜将单一色值视为所有设备上的绝对标准。实际使用时，可先确定色带是用于辨认类别、表示状态还是装饰，再检查相邻色的差异、文字可读性和整体排列顺序。