网页设计中的红色页面配色(二)

  • 2020-03-27 10:32:35
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

【示例】明度粉红色网页设计示例截图如图所示。

1.jpg

【分析】粉红色主要是红色系中的明度的高亮度的变化。是红色系里的冷色系。RGB数值显示明度较高,因此HSB中S纯度下降,几乎呈最低值。主色调和辅助色调数值对比可知:主色调混合的G的分量较多且明度较高,因此纯度较低,色调柔和,在框架区域内较适合做类似背景色的辅助性岗位。辅助色R数值比主色调的R数值稍高,红色性稍明显,加入的G相对少,B明度稍低,因此相对纯度要高,辅色位置应用在框架区域的导航位置,起到突出导航作用。点睛色突出标志及购物主体的作用。背景白色除了突出前面粉红色主体的作用,在前景也有出现,背景色与前景色的相互牵制,减少空间距离的效果。

【点评】在RGB数值中,数值同时呈现相近的高数值时,色彩越柔和协调,纯度相对降低,页面呈高明度灰色段,视觉刺激缓慢。这里以粉红色为主色调的页面,女性主题内容特征倾向明显。这组粉红色页面里,由于纯度都较低,任何一个纯度高小面积使用的颜色都能起到点睛的效果。这类颜色的组合多用于女性主题,例如化妆品、服装等,鲜嫩而充满诱惑,传达着柔情、娇媚、温柔、甜蜜、纯真、诱惑的心理感受。

橙红色+蓝色

【示例】对比色橙红色应用网页设计示例截图如图所示。

1.jpg

【分析】橙色是蓝色的对比色,这组对比色中的橙红色倾向于红色。该页面的背景色使用纹理图形由深至浅的制造空间范围,模拟真实环境。这里的数值选取其中间色值来分析,由于背景蓝色B的明度较低,又由于冷色比暖色视觉传递速度慢的特点,很适合作为辅助角色突出前景的应用。主色调橙红色R的数值达到最高值255,SB都达到了最高值100%,视觉刺激非常强烈,运用大面积高纯度来突出蓝色产品主体物,又形成了一次页面上的视觉对比—背景蓝色与前景橙红色,前景橙红色与产品主体物蓝色的二次对比。点睛色白色,使这组对比色在页面中表现得更协调。

【点评】这组橙色蓝色对比色在网页上比其他两组对比色红色绿色、黄色紫色应用得多,能迅速地传达网站主题内容、网页主体,容易增添强烈的兴奋度,多用于食品、休闲娱乐、产品等,但却又是跨越于各行业的主题网站,适用的范围非常大。颜色的深浅除了能营造空间感的效果,也能辅助性地制造主次效果。颜色除了性能对比,面积对比、位置安排也是制造主次效果的关键。

红色+黑色

【示例】红色与黑色搭配应用网页设计示例截图如图所示。

1.jpg

【分析】红色与黑色的搭配在商业设计中,被誉为商业成功色,鲜亮的红色多用于小面积的点缀色。从数值上看,红色添加了G和B饱和度稍降低,因此该红色大面积使用不会觉得刺激或不舒服,这也与背景色蓝色加入了适量渐变的技法,使得页面的节奏呈现缓和。辅助色黑色的加入,与深红色在明度拉大,页面色彩元素相对活跃不少。点睛色白色,所放的位置和面积,起到平衡黑色位置面积的作用,当然也达到醒目的效果。

【点评】这里颜色位置的摆放,起到平衡页面视觉,突出主题效果的作用。背景色加了渐变效果、整体与前景人物黑色对比呈浅色,前景人物黑色与背景深红色、背景深红与前景白色文字相互之间的关系,构成空间环境的视觉效果。

这组配色中,红色是降低了明度的深红色,为主色调和背景色的大面积使用。红黑搭配色,常用于较前卫时尚、娱乐休闲、电子商务等要求个性的网页设计配色里,也又有用于部分政治、新闻的页面。

红色+黑色+灰色

【示例】红色与黑色和灰色搭配应用网页设计示例截图如图所示。

1.jpg

【分析】这组配色,达到最高纯度的红色做小面积的使用。虽然这里选取了红色作为辅助色,但从整个页面的功能和所表达的主题来看,红色可以作为该页面的点睛色,强烈地突出了主题。红色的数值显示,HBS中的H为0度,达到红色特性的最高值,S为最高饱和度100%,在明度最低的黑色背景的衬托下,其特性发挥到极致,页面醒目而响亮。

红色与黑色本是对比强烈的配色,但由于背景灰色的作用,缓和整个页面的视觉刺激度。背景色灰色RGB数值变化不大,因此颜色纯度较低、趋于平稳柔和,辅助前景内容的呈现。白色让前景和背景的划分更明显,活跃页面中的色彩元素。

【点评】使用面积小的纯度高的颜色在非色彩的黑色和灰色上,是产生变化页面的颜色,达到容易突出主题的目的。

小结

红色在RGB数值的R为255左右,HSB数值的H中为0度左右,达到红色最高值。随着纯度的提高、亮度的适度增加,它易于迅速的传达、醒目性的特征发挥得越明显。和其他颜色一样,颜色相互混合得越多,明度越低,饱和度越低,视觉冲击力越弱。对比色红色绿色的搭配,红色的特性发挥得越明显。绿叶衬红花的效果。另外红与黑的搭配,也较能展现红色的魅力。根据主题的需要,除了对比色的应用,还有面积上、位置上的对比应用,也能很好地配合达到突出主题产品主体物的目的。

当前文章标题:网页设计中的红色页面配色(二)

当前URL:http://www.lyjtt.cn/news/wzzz/3185.html

上一篇:网页设计中的红色页面配色

下一篇:网页版式设计基础(一)

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)