“777奇米888色”并不是通用的色号、行业尺度或固定调色盘。。。。。。。若是你是在设计项目、内容栏目、数据看板中使用这个名称，，，，，，最稳妥的做法是先把它界说为一套自有的色彩编码规定，，，，，，再明确每种色彩对应的状态、层级和使用场景。。。。。。。名称自身不能决定色彩，，，，，，真正影响成效的是色相、明度、鼓和度、对比关系以及页面中的使用比例。。。。。。。

利用777奇米888色时，，，，，，能够选取“基础色掌管鉴别、辅助色掌管分类、强调色掌管行动、灰阶掌管承载内容”的结构。。。。。。。不要只钻营色彩鲜艳，，，，，，而要保障文字可读、信息层技显、分歧状态容易分辨，，，，，，并且在淡色布景、深色布景和移动端屏幕上都能正常使用。。。。。。。

777奇米888色必要先实现寓意界说

777奇米888色的第一步不是遴选美丽色彩，，，，，，而是确认每个色彩在内容系统中代表什么。。。。。。。一个没有语义分工的调色盘，，，，，，即便色彩自身协调，，，，，，也容易让用户误判信息状态。。。。。。。

能够先成立四类角色：基础色用于品牌鉴别或重要导航，，，，，，辅助色用于栏目分类和卡片分辨，，，，，，强调色用于按钮、沉点数据和关键提醒，，，，，，职能色用于成功、忠告、谬误等状态。。。。。。。布景致和文字色不应承担过多装璜工作，，，，，，它们重要掌管阅读舒服度和内容承载。。。。。。。

• 基础色：承担页面主视觉，，，，，，可用于标题、导航选中态、重要图形和品牌象征。。。。。。。
• 辅助色：承担内容分类，，，，，，建议节造数量，，，，，，预防每个模浚？？？槭褂闷肴制绲纳。。。。。。。
• 强调色：承担把稳力疏导，，，，，，适合用于行动按钮、沉点数字和少量提醒，，，，，，不宜大面积铺满。。。。。。。
• 职能色：承担状态表白，，，，，，成功、忠告、谬误和信息提醒必要维持不变，，，，，，不要在分歧页面中轻易更换。。。。。。。
• 灰阶色：承担正文、注明文字、宰割线和布景档次，，，，，，灰阶通常比高鼓和色彩更适合大面积使用。。。。。。。

若是项目没有现成的品牌规范，，，，，，能够把色彩定名为“主色A”“分类色B”“提醒色C”等，，，，，，再补充具体用处。。。。。。。先成立语义，，，，，，再选择色值，，，，，，可能预防设计人员只凭幼我偏好反复改色。。。。。。。

通过色相、明度和鼓和度成立视觉编码

视觉编码的主题是让用户通过色彩急剧鉴别差距，，，，，，但色彩差距不应只依附色相变动。。。。。。。色相暗示红、黄、蓝等根基方向，，，，，，明度暗示明暗水平，，，，，，鼓和度暗示色彩的鲜艳水平，，，，，，三者共同决定信息是否容易被分辨。。。。。。。

统一类内容能够使用相近色相，，，，，，通过明度或鼓和度变动成立层级。。。。。。。例如，，，，，，主模浚？？？槭褂媒仙畹睦渡，，，，，，次级模浚？？？槭褂弥械让鞫鹊睦渡，，，，，，布景标签使用低鼓和浅蓝色。。。。。。。这样可能维持统一感，，，，，，也能让用户理解这些内容属于统一组。。。。。。。

分歧类别必要显著分辨时，，，，，，能够选择距离较大的色相，，，，，，但不要单纯钻营高鼓和。。。。。。。红色、橙色、绿色同时大面积出现，，，，，，容易造成页面嘈杂；；；；；；把其中一部门改成低鼓和版本，，，，，，或共同图标、文字和边框，，，，，，通常更利于阅读。。。。。。。

视觉编码中分歧变量的合用作用

色彩变量	重要作用	适合表白的内容	使用把稳
色相	分辨类别	栏目、标签、数据类型	不要仅用红绿分辨关键信息
明度	分辨层级	主次模浚？？？椤⑶昂缶啊⒀≈刑	淡色文字在浅布景上易隐没
鼓和度	节造视觉强度	沉点提醒、布景弱化、装璜	高鼓和色彩不宜陆续大面积使用
灰阶	支持阅读	正文、注明、边框、留白	灰度层级过多会增长鉴别职守

用鲜明对迸纂档次感铺排页面关系

鲜明对迸纂档次感必要同时思考“看得见”和“看得懂”。。。。。。。前者依附文字与布景之间的明暗差距，，，，，，后者依附色彩面积、地位、沉复频率和组件结构共同实现。。。。。。。

大面积布景应优先选择低鼓和、低刺激的色彩，，，，，，把高鼓和色彩留给必要用户把稳的地位。。。。。。。标题能够比正文更深，，，，，，正文能够比辅助注明更深，，，，，，宰割线则维持较弱存在感。。。。。。。通过明度递减成立阅读挨次，，，，，，比给每个元素增长鲜艳色彩更不变。。。。。。。

按钮设计必要同时分辨默认态、悬停态、按下态和禁用态。。。。。。。默认态能够使用主色，，，，，，悬停态适当提高妙度或降低明度，，，，，，按下态能够增长边框或阴影变动，，，，，，禁用态则降低鼓和度和对比度。。。。。。。状态变动不能只依赖色彩，，，，，，还应共同文字、图标、边框或状态变动。。。。。。。

• 标题与正文之间通过字号、字沉和明度形成第一层级。。。。。。。
• 卡片与页面布景之间通过轻微色差或边框形成第二层级。。。。。。。
• 关键按钮与通常按钮之间通过色块、边框和地位形成第三层级。。。。。。。
• 谬误提醒与通常注明之间通过图标、文字标签和色彩共同表白。。。。。。。

当多个色彩都很能干时，，，，，，页面会失去主次。。。。。。。一个页面通常只必要一个重要把稳力焦点，，，，，，其他色彩该当降低面积、降低鼓和度，，，，，，或者转移到图标和细节上。。。。。。。

混合搭配调色技巧应从现实场景起头

混合搭配调色技巧不适合脱离使用场景单独判断，，，，，，由于统一组色彩用于网页、海报、数据图表和视频字幕时，，，，，，面积比例与阅读距离并不一样。。。。。。。

网页界面中的搭配方式

网页界面中的色彩搭配应优先保障导航、按钮和正文的鉴别效能。。。。。。。浚？？Ｄ芄谎∪∫恢魃⒘街指ㄖ⒘街只医缀蜕倭恐澳苌淖楹。。。。。。。主色用于固定地位，，，，，，辅助色用于分类，，，，，，灰阶掌管内容阅读，，，，，，职能色只在状态出现时使用。。。。。。。

数据图表中的搭配方式

数据图表中的色彩搭配应优先解决系列分辨和数值强调问题。。。。。。。陆续数值适合使用统一色相的明度变动，，，，，，类别数据适合使用差距较大的色相。。。。。。。图例、图形和文字必要维持统一映射关系，，，，，，不能让统一种色彩在分歧图表中代表分歧寓意。。。。。。。

海报和封面中的搭配方式

海报和封面中的色彩搭配能够提高视觉冲击，，，，，，但标题区域仍要保留足够的对比度。。。。。。。复杂图片布景上放文字时，，，，，，应增长半通明色块、柔和渐变或独立留白区，，，，，，预防让文字直接压在纹理密集的画面上。。。。。。。

移动端中的搭配方式

移动端中的色彩搭配必要思考幼尺寸、强光环境和分歧屏幕显示差距。。。。。。。细线、浅灰文字和低对比标签在手机上尤其容易隐没，，，，，，因而沉要信息应使用更清澈的文字层级，，，，，，并通过间距和图标辅助鉴别。。。。。。。

把色彩规定写成可执行的设计规范

色彩规范的价值在于让分歧页面、分歧设计人员和分歧内容模浚？？？槲忠恢。。。。。。。规范不应只展示色块，，，，，，还必要写明色值、用处、禁用场景和组合限度。。。。。。。

每一种色彩至少纪录四项内容：名称、色值、使用地位和不成使用地位。。。。。。。例如，，，，，，主色能够用于重要按钮和选中导航，，，，，，但不建议同时用于大段正文；；；；；；忠告色能够用于状态提醒，，，，，，但不建议作为整块页面布景；；；；；；淡色布景能够用于卡片，，，，，，但不能直接承载低明度灰色文字。。。。。。。

建议同时保留基础色、淡色变体、深色变体和灰阶变体。。。。。。。唬；；；；∩糜谥匾，，，，，，淡色变体用于布景和标签，，，，，，深色变体用于文字或边框，，，，，，灰阶变体用于辅助内容。。。。。。。每个变体都应经过现实组件测试，，，，，，而不是只在色板上判断。。。。。。。

• 先确定页面布景，，，，，，再确定正文和标题色彩。。。。。。。
• 先确定重要操作按钮，，，，，，再铺排次要操作按钮。。。。。。。
• 先确定状态色的寓意，，，，，，再限度状态色的使用领域。。。。。。。
• 先确定图表的类别数量，，，，，，再选择色彩数量。。。。。。。
• 先测试最幼字号和最幼组件，，，，，，再决定淡色和灰阶能否使用。。。。。。。

颁布前查抄色彩是否真正可用

颁布前查抄777奇米888色规划时，，，，，，应从可读性、一致性、辨识度和容错性四个方面验证，，，，，，而不是只看设计稿截图。。。。。。。

可读性查抄：查看标题、正文、按钮文字与布景的明暗差距，，，，，，沉点测试幼字号、细字沉和淡色布景。。。。。。。文字若是必要用户反复放大能力阅读，，，，，，注明色彩对比不及。。。。。。。

一致性查抄：确认统一种色彩在导航、标签、图表和提醒中的寓意是否一致。。。。。。。若主色既暗示“已选钟妆，，，，，，又暗示“谬误状态”，，，，，，用户会难以成立不变认知。。。。。。。

辨识度查抄：不要让关键信息只依附色彩分辨。。。。。。。红绿组合应共同图标或文字，，，，，，图表应共同图例、纹理或数据标签，，，，，，状态提醒应明确写出“成功”“忠告”或“失败”蹬罪义。。。。。。。

容错性查抄：别离在淡色模式、深色模式、低亮度屏幕和灰度显示前提下观察页面。。。。。。。色彩变弱后，，，，，，若是用户仍能通过文字、地位、状态和边框理解内容，，，，，，注明编码规划更靠得住。。。。。。。

最终确认时，，，，，，能够把所有色彩缩减成灰度查看层级，，，，，，再关关色彩观察信息结构。。。。。。。若是灰度状态下主次、按钮和提醒依然可能分辨，，，，，，注明色彩承担的是辅助表白，，，，，，而不是唯一表白。。。。。。。这样的设计比单纯增长鲜艳色彩更适合持久守护。。。。。。。

人民网校对：王克勤(iz3aFheokR2jkPZP80yFHoy8DIAjz0iAWS)