一级横色带能够按色相挨次，将常见色彩放在统一行作急剧对照：从红、橙、黄、绿、青、蓝、紫等彩色系起头，再补充粉、棕以及黑、白、灰等中性色。下面列出一组便于屏幕设计和分类展示的参考色值，并注明相近色彩的区别与合用场景。色值是数字显示参考，不代表唯一的行业尺度。
常见色系对照
表中的 HEX 色值可用于网页、图表或设计软件中的屏幕配色。并排展示时，可按红到紫的大体色相挨次分列；粉色、棕色和中性色可作为补充类别。
| 色系 | 屏幕参考色值 | 与相邻色的区别 | 合用场景 |
|---|---|---|---|
| 红 | #E53935 | 色感鲜明，和橙色相比更偏冷、更能干。 | 用于强调沉点、提醒垂危水平或象征必要关注的类别。 |
| 橙 | #FB8C00 | 介于红与黄之间，视觉活跃，但通常没有纯红那么强烈。 | 适合提醒、次级强和谐必要引起把稳但不代表最高优先级的分类。 |
| 黄 | #FDD835 | 明度较高，和橙色相比更亮；浅黄色布景上的白字容易看不清。 | 适合标注提醒、轻量提醒或必要凸起明亮感的区域，搭配文字时宜选深色字。 |
| 黄绿 | #9CCC65 | 带有黄色偏差，比纯绿更明亮、柔和。 | 可用于分辨过渡类别、天然主题或与深绿相邻的次级分组。 |
| 绿 | #43A047 | 比黄绿更沉稳，和青色相比左袒草木色感。 | 常用于暗示实现、可用、正常状态，也适合天然和环保主题的分类。 |
| 青 | #00ACC1 | 处在绿与蓝之间，绿色感和蓝色感都比力显著。 | 适合象征中央类别、信息提醒或必要与绿、蓝两组相分辨的项目。 |
| 蓝 | #1E88E5 | 比青色更偏冷，常见于较不变、清澈的视觉分组。 | 合用于注明、链接提醒、数据类别或必要维持默默观感的区域。 |
| 靛蓝 | #3949AB | 比通常蓝色更深，视觉上更靠近蓝紫过渡色。 | 可作为蓝色分类的深色层级，或用于必要与亮蓝显著分辨的项目。 |
| 紫 | #8E24AA | 比靛蓝更偏红，色彩辨识度较强。 | 适合独立类别、创意主题或必要从蓝色组中单独分出的内容。 |
| 洋红 | #D81B60 | 红色感和紫色感都较凸起，比粉色浓沉。 | 适合强调特殊类别或造作比粉色更能干的象征。 |
| 粉 | #F06292 | 比洋红更浅、更柔和，常用于轻强调而非强警示。 | 适合柔和主题、辅助标签和必要与红色沉点项分辨的类别。 |
| 棕 | #8D6E63 | 鼓和度通常较低，和橙色相比更沉稳，也更靠近大地色。 | 合用于材质、地皮、木色等主题分类，或作为彩色组之表的补充色。 |
黑、白、灰等中性色怎么放
黑、白、灰不属于红到紫的陆续色相，但在横向色带中常作为辅助项出现；疑刹慰 #757575，用于次要信息或中性类别；玄色可参考 #212121，适合文字和深色象征；白色可参考 #FFFFFF，适合作为留白或淡色布景。白色与浅灰并排时差距较幼，建议增长边框或文字标签，预防色块天堑不显著。
按用处选择并分列
- 展示色有关系：按红、橙、黄、黄绿、绿、青、蓝、靛蓝、紫的挨次分列，让读者更容易看杰出彩从暖到冷的变动；粉色和棕色可放在主色相之后。
- 分辨分歧类别：先遴选彼此容易辨认的色彩，再给每个色块配上名称或编号。色彩数量较多时，不要只依附色彩表白类别，以免相近色难以分辨。
- 分辨状态或优先级：能够用红、橙、黄暗示分歧水平的提醒，再用绿或蓝表白其他状态；具体寓意应同时写在标签中，预防读者仅凭色彩猜测。
- 用于文字和布景：深色文字搭配淡色布景通常更易辨认；啤⑶撤鄣攘辽灰酥苯映性匕咨鬃；深蓝、深紫等色块则应查抄文字是否清澈。
使用色值时确当苦衷项
统一 HEX 色值在分歧显示器、亮度设置和环境光下，出现成效可能分歧；印刷品还会受到纸张和印刷方式影响。因而，一级横色带适合作为色彩归类和屏幕视觉对照，不宜将单一色值视为所有设备上的绝对尺度。现实使用时，可先确定色带是用于辨认类别、暗示状态还是装璜，再查抄相邻色的差距、文字可读性和整体分列挨次。
