典型配色方案(四)黄色系    4星级
典型配色方案(四)黄色系
[ 作者:Mindiz    转贴自:动网论坛    点击数:    更新时间:2008/10/30    文章录入:蓝色海豚
【字体: 字体颜色

黄色系

黄色是阳光的色彩,具有活泼与轻快的特点,给人十分年轻的感觉。象征光明、希望、高贵、愉快。浅黄色表示柔弱,灰黄色表示病态。它的亮度最高,和其他颜色配合很活泼,有温暧感,具有快乐、希望、智慧和轻快的个性,有希望与功名等象征意义。黄色也代表着土地、象征着权力,并且还具有神秘的宗教色彩。
黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。
浅黄色系明朗、愉快、希望、发展,它的雅致,清爽属性,较适合用于女性及化妆品类网站。
中黄色有崇高,尊贵,辉煌、注意、扩张的心理感受。
深黄色给人高贵、温和、内敛、稳重的心理感受。 
下面我们根据黄色系不同属性邻近色、同类色的高纯度低纯度色彩搭配做不同的举例分析。

黄色系分析
黄色是所有彩色中明度最高的颜色。上图看到HSB模式的H数值是60度,正是正黄色,但RGB数值中加入了B蓝色数值为51,因此降低了HSB的饱和度S为80%,但是大面积的黄色仍使得该页面色彩明亮显眼。
辅助色是纯黑色,非色彩明度最低的颜色。
大面积显眼的正黄色有黑色的线条压制,黄色顿时显得沉稳,页面增添内容感。
白色虽然是点睛色,但由于非色彩的白色与黄色的明度最高,因此这里似乎没有起到"点睛"的作用。

网页例图

黄色同类色

黄色同类色分析
该页面的配色很单纯,是同类色的黄色不同明度颜色,页面看起来干净、单纯。
点睛色白色淡黄色在深色黄色背景下比较显眼,且在最中间位置,是整个页面中的高调部分。
这三种黄色,明度都很高,只有背景辅助色明度稍低,点睛黄色H色相是三种颜色中黄色倾向最高的为57度,而60度是正黄色,因此明度也是最高的,充分的发挥其点睛色的作用。
背景色和前景色只在色相上明度上有非常微妙的变化,却也很巧妙,形成了变化较明显的空间层次感,削弱了同类色易产生的单调感。点睛色白色让层次感更明显。

网页例图

中黄色

色系分析

背景中黄色上点缀多种艳度较高的颜色,都是属于跳跃的颜色,渲染整个网站的热闹环境气氛,符合该网站的设计主题。
从HSB数值上看,该中黄色的明度和饱和度呈最高值,属于明亮耀眼的颜色。辅助色是黄绿色和红色,黄绿色在中黄背景下呈冷色调,轻快单薄的亮色;红色的HSB数值H色相上看是正红色,明度稍低,这里属于厚重沉稳的颜色,在中黄色背景下呈现暖色调;背景中黄色在黄绿色和红色两者中这时呈中间色,是很好的整体页面视觉过渡色。
加之商品图片多种亮艳的色泽混合在同一页面上,点睛色白色在这里起到了调和多种颜色的作用,减少、透气于整个页面的多种配色噪音。

网页例图

黄绿色调

色调分析

主色调为黄绿色,单纯而看,黄绿色是通常的暖色的起始色、色彩中亮度最高的黄色与冷色的起始色、绿色相结合而得,因此该颜色看起来非常明快清新。

处于辅助色的非色彩黑色,中间的点缀色是主色调黄绿色,很容易让人一时以为该颜色就是点睛色。实际主色调黄绿色的明度非常高,饱和度这时也很高,在明度最低的黑色衬映下就异常显眼。

背景色使用略有些渐变的效果,正是黄绿和黑(灰)颜色的柔和过渡,页面调和。

点睛色在这里混色较多,RGB、HSB数值差距都不大,因此颜色偏灰色阶,仔细分析是黄绿色与少许黑色混合而得,起到了调和背景色与辅助色明度差异过大的作用。

网页例图

黄色邻近色(黄色+红色)

配色分析

选取的上图三组色里HSB数值的B明度虽然都有些变化,但S饱和度分毫没有受到影响,仍都呈最高值100%,因此页面配色异常耀眼。好在其间有少量不同明度饱和度的红色系色块做压制,页面显得沉稳许多,页面色彩层次也丰富了许多,块面交织设计富有节奏韵律美,却也有雀跃的感觉。

页面照片人物也经过了双色调处理,与页面色彩风格一致。

整个页面属于明暗反差较大的色调,所以页面响亮明快,极赋视觉冲击力、感染力。

网页例图

高纯度黄色邻近色

配色(黄色+红色)分析

全页选取的几个色彩组合是高纯度高明度的邻近色正黄、淡黄(这里的淡黄色不是指浅黄色,而是色彩颜料色里的称呼。)、中黄及正红色。

我们知道,黄色是色彩系里明度最高的耀眼色,HSB数值H色相60度是正黄色,特性越高明度越高。H色相度往60度前是接近红色,而红色明度相较于黄色低,背景色HSB数值H色相为48度,往红色靠近,因此色度较深,呈现为中黄色。使用中黄背景正是烘托突出前景的淡黄色。淡黄色的前景上设计少许中黄色带进入,页面的色彩层次感生动了不少。

另一个辅助色红色HSB数值的H色相是0度,显示正红色且高纯度高亮度,放在最显眼的标志广告区域,实现视觉引导作用,主次感增强了。

白色也是辅助色三色之一,在顶部面积较大的使用,使整个页面的纯度缓和了许多,起到提亮并拉开空间的作用。
点睛色用于导航栏,提示导航区域的醒目与重要性。

网页例图

黄色低纯度配色应用(黄色+蓝色)

配色分析

该页面是属于纯度较低的多组配色页面,配色难度似乎较大,但是按主色调、辅助色、点睛色来细细分析就会发现容易多了。

主色调的中黄色,从RGB数值B明度48来看,提高了明度,RGB数值的变化HSB也相应变化,该色调纯度降低,黄色的耀眼特性相应缓和。

该页面辅助色比较多,这里选了主要的三种浅黄、浅蓝、棕红色,明度纯度不同的变化来分析。浅黄色的RGB三个数值接近,因此呈现偏灰的柔和状态。正蓝色的RGB数值R为0,G为255,B为255,该蓝色RGB数值上看,混合了R红色11,G的绿色数值较低,B蓝色的数值较高,因此饱和度降低,颜色呈浅色调。棕红色的RGB的三数值上看,R的数值最高为124,加入了对比色G绿色67,因此颜色变暗发乌,调入了适量B蓝色24,因此该颜色饱和度亮度降低,也是该页面沉稳的主要色调,牵制艳度较高的几种颜色。

点睛色的HSB数值H色相为356度,几乎呈正红色,只是调入了少许B蓝色18,因此颜色在明度上稍偏暗。另一点睛白色的作用除了提亮整个页面,同时也突出标志图像。

标志是红色,下面的绿色是红色的对比色,目的是突出标志的作用,同时也是黄色与蓝色的中间视觉过渡色。

网页例图

小节

黄色是色彩系里明度最高的耀眼颜色,尤其是HSB数值H色相为60度正黄色时,它的特性越明显。由于黄色的特性,在页面配色的时候可适当添加明度较深的颜色,色阶层拉开,并起到协调刺眼的艳度作用。黄色饱和度、明度的不同变化传达不同的意义和作用。

无论是高纯度低纯度还是多色彩的页面配色,白色起到关键的作用。

点睛色不一定就是非常显眼的颜色,也有起到调和整体页面配色的作用。

中间色通常被大面积的使用为主色调、辅助色,是调和辅助色(有可能是同时几种)与点睛色(有可能是几种)的色彩,是调和色、调和方法的关键。

  • 上一篇文章:典型配色方案(三)绿色系

  • 下一篇文章:CSS设置上划线、下划线、删除线
  • 发表评论   告诉好友   打印此文  关闭窗口
     最新5篇热点文章
    华为P30怎么调整屏幕底部的…[73]
    卸载流氓软件奇安信天擎[906]
    用Word排版和打印身份证[56]
    ZBLOG关闭隐藏评论功能的修…[51]
    免费的DNS服务器[79]
     
     最新5篇推荐文章
    华为P30怎么调整屏幕底部的…[02-15]
    微软BING每日一图的引用源…[11-30]
    不允许微信群里的非本人好…[10-12]
    免费的DNS服务器[03-14]
    让背景图片充满网页浏览器…[10-20]
     
     相 关 文 章

      网友评论:(只显示最新5条。评论内容只代表网友观点,与本站立场无关!)