网页设计的文字色彩与可读性分析
三、关于明度,色相,饱和度之间的关系
1.名词解释:
a)先说说明度:就是明暗程度,也有叫亮度的,计算机把明度分成256级色阶,黑得伸手不见五指就是0级,白茫茫的一片什么都看不见就是255级:

b)再说说色相:就是平时所说的哪种颜色,光谱中的红橙黄青蓝紫,以及千千万万种组合都是不同的色相。

c)最后说说饱和度:就是通常所说的颜色纯度,鲜艳程度等等。
2.与Red,Green,Blue单色光之间的关系:
a)先弄清计算机中色彩生成的几点规则:
i.RGB三种原色光,同时以1:1:1比例混合,就能产生1份白色的光;
ii.RGB中的任意两种原色光,混合只能产生另一种色相的光,而不是白色的光;
iii.任意一种原色光,对明度色阶的影响为其数值的一半,转换成色阶均不会超过127级;
因为任意两种有色光混合产生的颜色,色阶均不能超过255级即白色光。
比如#000002的蓝色图片,在其蓝色通道的色阶是2级,但将其转换成灰度图片,色值为#010101,说明此图片的明度色阶为1级。
iv.下面提到的RGB数值,是指的各颜色通道十六进制数值:

b)明度与RGB中最小值,最大值有关,计算方法如下:

i.RGB中最大值越小,意味着有色光越少,则明度越低;
ii.RGB中最小值越小,意味着生成的白色光越少,则明度越低
c)相同明度下,色相与RGB中最大值,最小值的位置,以及中间值的大小有关:

i.在相同明度下,不同色相的颜色RGB最大值和最小值始终保持恒定;
ii.RGB中最大值和最小值的位置会影响色相,例如#775533和#557733;
iii.变换RGB的中间值可以影响色相,例如#FF0055和#FF0088;
d)饱和度与RGB中最大值,最小值之间的差值有关:

i.RGB中最大值,最小值之间的差值越大,饱和度越高;
ii.RGB中当最小值趋于00,或者最大值趋于FF后,饱和度不能再提高。
结论三:
1.在颜色较暗时(即RGB没有一项数值达到FF),增加明度可以起到增加饱和度的目的,降低明度就会降低饱和度;
2.在颜色较亮时(即RGB没有一项数值达到00),增加明度可以起到降低饱和度的目的,降低明度反而会增加饱和度;
3.颜色饱和度越大(即RGB中最大值与最小值差值越大),在相同明度下的光谱范围越大(即可变换的颜色种类越少);
4.颜色饱和度越小(即RGB中最大值与最小值差值越小),在相同明度下的光谱范围越小(即可变换的颜色种类越少);
5.色相的变化不会影响到明度和饱和度;
四、根据这些研究,我们能够得到什么可以运用的东西?
1.高饱和度的红色(#FF0000),紫色(#FF00FF)推荐不使用;
2.高饱和度的蓝色(#1834D1),橙色(#FF4E00),可以用于少量的文字可以更好地吸引视觉注意,但最好不要用于列表中的链接;
3.根据前面的分析,我们得出调制可以用于列表链接蓝色的方法:
通过降低蓝色通道色阶来降低颜色整体的饱和度(例如将#0000FF调整为#000099),为避免过暗,和黑色混淆,我们还可以增加其他原色通道的色阶,调整其明度(例如将#000099调整为#005599)。
4.颜色不协调,可以通过降低饱和度来达到协调,也可通过采用调整色相来达到目的:

一个现成的例子就是我们网页中采用的#FF4E00色值,和#FF0000的饱和度其实是一致的(不信可以变成灰度图看看),之所以色值为#FF0000的颜色显得更刺眼,是因为在同样的饱和度下,红色比橙色更让视觉神经敏感,还记得这张图么?

参考文献:
- 《基于色度学的人眼彩色探测特性分析》张建勇 等……北京理工大学……2003年
- 《计算机求解颜色刺激的主波长和兴奋纯度》周丰崑 等……长春光学精密机械学院……1990年
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
-
HTML
CSS
JavaScript
Dreamweaver
Fireworks
设计分享
- 建站教程 网站运营 实用工具 网页模板 网页素材
-
CSS酷站
网上购物
设计团队
设计博客
-
- 教程排行榜
- 30个基于jQuery框架的幻灯滑块特效设计的网站实例
- 30个基于jQuery滑动门技术的网站欣赏
- 10个优美精致简约风格的导航菜单欣赏及点评
- 38款网页设计应用的JS拉洋片幻灯效果欣赏
- 最新收集的50多个专业设计公司网站欣赏
- 40+设计独特超漂亮的水平导航网站欣赏
- 全球65个设计出众的设计师个人博客欣赏
- 35套精美绚丽的创意酷站设计欣赏
- 国外颇具特色的电子商务网站设计欣赏(上)
- 国外颇具特色的电子商务网站设计欣赏(下)
- 21个精美漂亮的网页幻灯片应用案例欣赏
- 20个设计精致漂亮的Photoshop网页设计教程
- 网页UI之Banner广告条设计案例赏析
- 2011年网站设计的新趋势
- 手绘风格的15款超级漂亮网站欣赏
- 24个很漂亮用CSS3实现的文本效果演示及教程推荐
- 下载排行榜
- jQuery图片特效代码 带缩略图和文字标题简...
- 仿淘宝商城天猫首页jQuery多格焦点幻灯图特...
- 仿QQ商城焦点图jquery幻灯特效代码
- 宽屏flash+xml焦点幻灯图特效代码
- 效果媲美flash的jQuery幻灯代码支持多种切换效果
- 3D立体效果的flash+xml照片墙相册展示代码
- 带标题和数字导航的JS焦点幻灯特效代码
- 31款简单实用的CSS+JS下拉菜单脚本
- 漂亮的jquery+Lightbox灯箱效果图片展示特效代码
- 基于mootools有7种效果的Gallery(画廊)幻灯相册代码
- 超酷HTML5图片特效代码支持全屏显示
- 漂亮的jquery画廊相册特效支持缩略图和键盘...
- 可自动展开和折叠收起的QQ在线客服代码
- 半透明立体质感的宽屏flash+xml焦点幻灯代码
- 基于jQuery的首页自动收缩全屏广告代码
- 超酷3D摩天轮flash+xml幻灯相册特效源码
