色777是什么色彩:鉴别色号、视觉成效与使用步骤
222
订阅已订阅已珍藏
珍藏点击播报本文,,,,,,,约
色777通常指网页和设计中使用的十六进造灰色色值 #777,,,,,,,齐全写法是 #777777。。。。。。。该色彩由一样数量的红、绿、蓝组成,,,,,,,属于中等偏深的中性灰,,,,,,,适合用于次要文字、边框、图标、注明信息和低鼓和度视觉界面。。。。。。。
若是搜索到的是“RGB 777”,,,,,,,必要先分辨暗示方式。。。。。。。RGB 的每个通路领域是 0 至 255,,,,,,,因而 777 不是有效的单通路 RGB 数值;;;;;;;;若是三个通路都写成 119,,,,,,,正确表白应为 RGB(119, 119, 119),,,,,,,也就是 #777777。。。。。。。
色777对应的尺度色值
色777对应的是一组没有显著冷暖偏差的灰色数值。。。。。。。三个十六进造字符别离代表红、绿、蓝三个通路,,,,,,,短写大局会将每个字符沉复一次,,,,,,,因而 #777 等同于 #777777,,,,,,,而不是由三个数字直接拼成其他色彩。。。。。。。
| 暗示方式 | 数值 | 寓意 |
|---|---|---|
| 十六进造短写 | #777 | 网页中常用的三字符写法 |
| 十六进造齐全写法 | #777777 | 红、绿、蓝三个通路均为119 |
| RGB | rgb(119, 119, 119) | 适合在设计软件或形状表中表白 |
| HSL | hsl(0, 0%, 46.7%) | 色相和鼓和度为中性灰的表白方式 |
三个数字为什么可能写成六位色值
十六进造色彩中的每一位领域是 0 至 F。。。。。。。短写规定只合用于每个通路的两位字符一样的情况,,,,,,,例如 #777777 能够压缩为 #777,,,,,,,#6699CC 能够压缩为 #69C,,,,,,,但 #777779 不能压缩成三个字符。。。。。。。压缩前后色彩数值齐全一致,,,,,,,不会产生明暗变动。。。。。。。
灰度、明杜纂冷暖偏差
这组灰色色值的红、绿、蓝通路齐全相称,,,,,,,所以没有彩色左袒。。。。。。。相较于 #999999,,,,,,,#777777 更深、更适合作为正文辅助色;;;;;;;;相较于 #555555,,,,,,,#777777 更柔和,,,,,,,但在淡色布景上作为幼号正文时,,,,,,,清澈度可能不够。。。。。。。
#777适合做文字还是布景
#777用于文字或布景时,,,,,,,关键判断不是“看起来够不够深”,,,,,,,而是远景致与布景致之间的对比度是否满足阅读场景。。。。。。。白色布景上的 #777 对比度约为 4.48:1,,,,,,,靠近常用文字尺度线,,,,,,,因而不建议把该灰色无前提用于幼字号正文。。。。。。。
| 使用组合 | 适合水平 | 具体建议 |
|---|---|---|
| #777文字配白色布景 | 靠近临界 | 适合辅助注明,,,,,,,正文幼字号建议改用#666或更深灰 |
| 白色文字配#777布景 | 通常 | 大字号标题和短标签较相宜,,,,,,,长段落必要进一步检测 |
| #777文字配玄色布景 | 可用但偏沉 | 适合暗色界面的次要信息,,,,,,,不宜承载最沉要内容 |
| #777边框配浅灰布景 | 较相宜 | 适合分隔线和输入框边框,,,,,,,但交互状态仍需增长其他提醒 |
文字色彩的最终可读性还会受到字号、字沉、字体状态、屏幕亮度和周围色彩影响。。。。。。。大字号标题通常比藐幼正文更容易鉴别,,,,,,,但不能只凭视觉经验判断。。。。。。。网页颁布前应使用对比度检测工具别离查抄通常文字、大号文字和图形元素。。。。。。。
色777的配色与档次铺排
色777配色时应先确定灰色承担的角色,,,,,,,再选择布景致和强调色。。。。。。。该灰色适合做中立层级,,,,,,,不适合单独造作强烈的视觉冲击;;;;;;;;想要形成鲜明对迸纂档次感,,,,,,,通常必要搭配更浅的底色、更深的文字色或低鼓和度的彩色装点。。。。。。。
| 搭配方向 | 视觉关系 | 合用地位 |
|---|---|---|
| #777与白色 | 干净、克造、对比显著 | 注明文字、卡片边框、简洁型界面 |
| #777与#F2F2F2 | 柔和、低刺激、档次较弱 | 页面分区、布景底色、信息面板 |
| #777与#333 | 深浅递进、层技显 | 标题与辅助文字、导航和内容分辨 |
| #777与蓝色 | 中性灰衬托冷色强调 | 链接、按钮、数据状态和操作提醒 |
| #777与橙色或黄色 | 灰色压低暖色的跳跃感 | 提醒信息、促销标签和视觉焦点 |
- 成立文字层级:主标题使用深灰或玄色,,,,,,,正文使用较深灰,,,,,,,注解和功夫信息再使用#777,,,,,,,预防所有文字都处在相近明度。。。。。。。
- 节造强调色数量:页面当选择一至两种强调色即可,,,,,,,灰色掌管不变版面,,,,,,,彩色掌管疏导点击或表白状态。。。。。。。
- 预防同灰度堆叠:布景、卡片和边框若是都靠近#777,,,,,,,区域天堑会变吞吐。。。。。。;;;;;;;;旌洗钆涞魃记傻某恋闶抢鞫,,,,,,,而不是单一增长色彩数量。。。。。。。
网页中使用#777的写法与地位
网页形状中的#777能够直接写入文字、边框、图标或布景属性。。。。。。。齐全大局#777777更容易被设计规范、色彩治理工具和团队成员鉴别,,,,,,,短写大局则适合单一形状或部门调整。。。。。。。
辅助文字:color: #777777;
分隔边框:border-color: #777777;
部门布景:background-color: #777777;
图标色彩:fill: #777777;
适合使用的地位
辅助信息使用#777通常比主内容更稳妥。。。。。。。日期、作者、字段注明、占位提醒、次级导航、非沉点图标和卡片分隔线都能够思考使用该色值,,,,,,,但沉要操作文字、谬误提醒和主题数据不应仅依附中灰来表白。。。。。。。
禁用状态不应只扭转色彩
表单禁用状态使用#777时,,,,,,,必要同时扭转按钮布景、边框、通明度或交互行为。。。。。。。仅把可用文字改成灰色,,,,,,,可能让用户无法分辨“暂不成操作”“已实现”和“通常辅助信息”。。。。。。。色彩之表增长图标、文字注明或状态符号,,,,,,,视觉编码会更清澈。。。。。。。
名称混合时若何确当真正的色彩
色彩名称并不总是尺度化的。。。。。。。设计稿、商品页面、图片软件和搜索了局可能把统一组数值称为中灰、石墨灰、灰色或#777,,,,,,,也可能把一串数字当成标题或编号。。。。。。。确认色彩时,,,,,,,应优先查看十六进造值、RGB值或设计软件显示的取色了局。。。。。。。
- 看到“#777”时,,,,,,,确认是否的确指向#777777,,,,,,,而不是编号、型号或文件名称。。。。。。。
- 看到“777灰”时,,,,,,,确认页面是否同时提供色卡或具体色值,,,,,,,预防只凭据名称选色。。。。。。。
- 看到“RGB 777”时,,,,,,,查抄是否遗漏了三个通路,,,,,,,正确体式通常是RGB(119,119,119)。。。。。。。
- 从图片取色时,,,,,,,把稳压缩、阴影、显示器差距和周围色彩会扭转肉眼观赣祝。。。。。。
- 用于印刷时,,,,,,,不要直接把网页十六进造值当作印刷油墨配方,,,,,,,印刷必要单独转换并打样确认。。。。。。。
现实选择时,,,,,,,先明确该灰色是用于正文、布景、边框还是强调元素,,,,,,,再凭据邻近色彩查抄对比度和层级。。。。。。。对于长段落阅读,,,,,,,优先选择对比度更不变的深灰;;;;;;;;对于界面装璜和次级信息,,,,,,,#777可能提供比纯黑更柔和的视觉成效。。。。。。。
人民网校对:敬一丹(ydsuijfkbwerugweiurqgweiuwqhbwe)
关注公家号:人民网财经
分享让更多人看到






























微信扫一扫


第一功夫为您推送权威资讯
报路全球 传布中国
关注人民网,,,,,,,传布正能量