新京报
灰色本身不提供明显的🎨情绪暗示,最终风格主要取决于面积、字体、背景和相邻颜色。大面积使用时,#777777可能让页面显🎆得偏沉;小面积使用时,则更容易形成稳定的辅助层级。
777色用于文字时,最需要检查的是文字与背景之间的明度差,而不是单独判断颜色是否“好看”。在白色背景上,#777777与白色的对比度约为 4.48:1,接近常见无障碍标准对普通字号文本的 4.5:1要求,因此不建议把它直接作为小字号正文的唯一文字色。
网页中的 CSS 可以将该颜色写成 color: #777;、color: #777777; 或 color: rgb(119, 119, 119);。三种写法显示结果相同,团队协作时应统一格式,避免同一套设计系统同时出现多种重复标注。
选择灰色时,页面层级应先确定主要文字、次级文字、边框和背景的优先顺序,再分配不同明度。单独使用一个灰色并不会自动形成清晰层次,层级还需要依靠字号、字重、留白和布局共同完成。
777色与相近灰色的差异主要来自明度,而不是色相。下表可用于建立简单的灰阶层级,实际显示效果仍会受到显示器和页面背景影响。
777色属于灰色而不是纯黑色。#000000表示黑色,#FFFFFF表示白色,#777777位于两者之间,并且三个 RGB 通道完全相同,因此属于中性灰。
#777和#777777表示的是同一个网页颜色。三位写法会将每个字符重复一次,#7、#7、#7分别扩展为#77、#77、#77;项目规范如果要求统一使用六位写法,则应采用#🔑777777。