COLOR SYSTEM · 色彩系统
北外
先按用途选色，再检查文字与背景的对比度；页末的完整色阶表和可复制色值的色板用于查值。
配色
本页帮助你为网页、推文、海报和文创选色。先确定主要信息和背景，再选强调色，最后检查文字是否看得清。完整色阶保留在页末，需要色值时直接查表；视觉例子见配色示范。
| 制作什么 | 可以从哪里开始 | 需要检查什么 |
|---|---|---|
| 官网正文、操作界面 | 现有正文、背景与强调色变量 | 亮暗主题、文字对比度、按钮和焦点状态 |
| 公众号、长图文 | 黑白底色配一种主要强调色 | 手机上的正文、链接和图片文字 |
| 招新海报、活动物料 | 招协红与一到两种主题色 | 主次是否清楚，时间地点是否易读 |
| 公文、正式说明 | 黑白为主，少量品牌色 | 字号、印刷清晰度和正式标志用法 |
| 文创或特殊印刷 | 已确认的品牌色和设计稿 | 制作工艺、实际材料与打样结果 |
这张表提供起点，不按载体强制规定“必须鲜艳”或“必须暗淡”。同一张海报也有需要长时间阅读的说明区，其文字应单独检查。
认识
招协红 #E14B3F 是核心品牌色，主要用于身份标识和重点视觉。七大洲色用金黄、赭橙、紫、绿、蓝、青和冰蓝区分主题；四大洋色提供不同蓝色。它们是招协设计中的分类约定，不代表地域或文化只能由某种颜色表达。
黑白灰承担背景、正文和次要信息。网页开发优先使用现有语义变量，而不是在每个组件中重新填一套色值。
| 网页变量 | 浅色主题 | 深色主题 | 用途 |
|---|---|---|---|
--paper | #FFFFFF | #0D1117 | 页面背景 |
--ink | #111318 | #F5F7FA | 主文字 |
--muted | #626B78 | #A8B1BE | 次要文字 |
--focus | #1F5AA8 | #87AAE0 | 键盘焦点提示 |
网页不使用米白、泛黄纸纹或装饰渐变。修改颜色时，同时检查浅色和深色主题，不能只验证一个截图。
怎样
- 确定最重要的信息，例如活动名称或报名入口。
- 选择底色和正文色，先保证大段文字清楚可读。
- 给重点信息分配一种主要强调色；需要区分主题时再添加辅助色。
- 缩小到实际显示尺寸，检查标题、时间地点和操作入口能否迅速找到。
招协红配黑白适合作为基础；金黄与赭橙可以作为暖色主题，红与青可以形成明显差异。配色比例只是设计参考，不能代替信息层级或可读性检查。
网页
网页使用现有 --accent-* 变量承载强调信息，品牌色板用于需要明确主题的视觉内容。下表列出已有浅色网页强调色与品牌主色的对应，不能当作任意背景上的合格文字组合。
| 颜色 | 浅色网页强调色 | 品牌主色 |
|---|---|---|
| 蓝 | #2A5B9E | #3B82F6 |
| 红 | #B84F42 | #E14B3F |
| 金 | #A57218 | #F5B301 |
| 绿 | #277158 | #22C55E |
文字用什么色，取决于前景与实际背景的组合。透明度、图片背景和叠层都会影响结果；“更深”“更淡”只能描述外观，不能证明对比度达标。
检查
按照 WCAG 2.2 对比度要求，普通文字与背景至少达到 4.5:1；大号文字至少 3:1。大号文字指至少18pt，或至少14pt的粗体，不能仅凭它是标题就按大字标准检查。这里说的是文字要求，标志及其他例外按标准具体适用范围判断。
检查时，取实际前景色与背景色，用对比度工具计算；不达标就调整文字色、背景色或布局，并重新测量。彩色背景上的白字也需要计算，不能默认白色总是清楚。
例如亚洲金黄适合做色块或点缀，但它在白底上是否能作小字，需要检查。可选择深色文字放在黄色底上，或将文字独立放在清晰的中性区域。不要通过降低整块内容透明度解决刺眼问题，文字可能会更难读。
图表
分类、状态和图表同时使用文字标签，必要时增加图标、形状或线型。成功和失败可以保留语义色，但必须写出“成功”“失败”或具体状态，不能让读者只看红绿判断。
蓝橙、蓝金可作为图表的配色起点，不保证对所有色觉差异和所有背景都安全。检查灰度显示、色觉模拟和实际标签，确保截屏或打印后仍能理解。装饰颜色与表示数据的颜色要分清，不能随意交换同一类别的颜色。
色
色阶编号从50到900，表示同一系列由浅到深。浅色可作为底色候选，深色可作为文字候选；选择后仍需检查实际组合。不要仅凭“700一定适合文字”作判断。
下面保留现有十二组完整色值。它们用于数字设计参考；印刷的色彩模式、专色和材料效果由制作要求与打样确定。
完整
| 色 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|---|
| 招协红 | #FCEDEC | #F9DBD9 | #F4C0BC | #EE9C95 | #E87369 | #E14B3F | #B83E34 | #923129 | #65221C | #3F1512 |
| 亚洲 | #FEF7E6 | #FDF0CC | #FCE4A6 | #FAD573 | #F7C439 | #F5B301 | #C99301 | #9F7401 | #6E5100 | #453200 |
| 非洲 | #FDEEE7 | #FBDECE | #F8C5AA | #F3A379 | #EF7D41 | #EA580C | #C0480A | #983908 | #692805 | #421903 |
| 北美洲 | #F3EFFE | #E8DEFD | #D6C6FC | #BFA5FA | #A580F8 | #8B5CF6 | #724BCA | #5A3CA0 | #3F296F | #271A45 |
| 南美洲 | #E9F9EF | #D3F3DF | #B2EBC7 | #85DFA6 | #53D281 | #22C55E | #1CA24D | #16803D | #0F592A | #0A371A |
| 欧洲 | #EBF2FE | #D8E6FD | #BAD3FC | #93BAFA | #669EF8 | #3B82F6 | #306BCA | #2654A0 | #1B3A6F | #112445 |
| 大洋洲 | #E6F8FB | #CDF0F6 | #A8E5F0 | #76D7E7 | #3DC6DD | #06B6D4 | #0595AE | #04768A | #03525F | #02333B |
| 南极洲 | #F2FBFF | #E5F6FE | #D2F0FE | #B8E7FD | #9ADDFD | #7DD3FC | #67ADCF | #5189A4 | #385F71 | #233B47 |
| 太平洋 | #E8EDFB | #D2DCF7 | #B0C1F1 | #839EEA | #4F75E1 | #1D4ED8 | #1840B1 | #13338C | #0D2361 | #08163C |
| 印度洋 | #EDECFC | #DCDAFA | #C1BEF6 | #9E99F1 | #766FEB | #4F46E5 | #4139BC | #332E95 | #241F67 | #161440 |
| 大西洋 | #E7F6FD | #CFEDFB | #ABE0F7 | #7ACEF3 | #43B9EE | #0EA5E9 | #0B87BF | #096B97 | #064A69 | #042E41 |
| 北冰洋 | #F8FCFF | #F1FAFF | #E7F6FE | #D9F1FE | #C9ECFD | #BAE6FD | #99BDCF | #7996A4 | #546772 | #344047 |
交付
检查主要信息是否突出，正文和按钮文字是否达到相应对比度，状态是否有文字提示，浅色与深色主题是否都可读。印刷物料另看打样结果。标志用法见品牌指南，组件与参数见设计系统。
展开可复制色值的色板
每格依次标出色阶编号、色值，以及格内文字（墨黑或白色）与该色的对比度。普通文字至少需要 4.5，大号文字至少需要 3。点击色块可复制色值。