任务三：感知颜色，应用颜色
- 登录以发表评论
- 浏览 392 次
色生心中：人性化的HSL模型
- 登录以发表评论
- 浏览 182 次
对于视觉设计师来说，RGB、CMYK什么的就像左右手一样熟悉。但如果仅用心算的方法，不借助于Photoshop拾色器或任何类似的工具，你可不可以快速说出“海棠红”所对应的RGB色值？如果再加一点橙色进去，把亮度提高一点，色值又是多少？
很难回答，是吧……面对这些坑爹的问题，视觉设计师/前端工程师们通常只能打开Photoshop，输入当前颜色对应的色值，在色板上调出新的颜色，再把色值复制下来，替换当前的色彩。
人生很短暂，这样白白浪费掉大块的时间，你甘心吗？
那么，让我们来探索一下有没有更好的解决方案。
让人又爱又恨的RGB
RGB是基于色光混合的原理设计的，是一种以硬件为导向的色彩模型，它描述了显示器的电子枪打在Red红、Green绿、Blue蓝三色发光极 上的显色方式。当红绿蓝三色光的亮度均为最大值(255)的时候，屏幕上重现的颜色就是最亮的白色，都为0的时候，结果就是黑色。
如果想要得出刚才提到的“海棠红”，我们就要把红光调到最亮，把绿光的亮度调到1/5左右，再把蓝光的亮度调到1/3左右，如下图：
同样，要得到刚才说的“加点橙色进去， 再亮那么一点点”的颜色，我们要把绿光调亮1倍多，再把蓝光调暗少许，如下图：
虽然得到了需要的色彩，但我们所做的事情与“橙色”或“增加亮度”实在扯不上关系。这种调色方法，完全不符合我们对颜色的直观感受。连这种事都可以忍受吗？不要再假装视觉设计师了，舞台灯光师才是你的真实身份！
HSL色彩模型又是什么？
HSL同样使用了3个分量来描述色彩，与RGB使用的三色光不同，HSL色彩的表述方式是：H(hue)色相，S(saturation)饱和 度，以及L(lightness)亮度。听起来一样复杂？稍后你就会发现，与“反人类”的RGB模型相比，HSL是多么的友好。
HSL的H(hue)分量，代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度 可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基 本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列，如下图：
HSL的S(saturation)分量，指的是色彩的饱和度，它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性(灰度)到感性(纯色)的变化，如下图：
HSL的L(lightness)分量，指的是色彩的明度，作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。
HSL能为我们带来什么？
我们来做一个基于HSL的调色实践。想想开篇提到的“海棠红”，那应该是一个介于洋红和红色之间的，性感娇艳的颜色。我们可以假定它在色相环H上的角度是330°左右，饱和度较高，明度适中，看看那是什么颜色？
我们想要的颜色应该再接近红色一点，让我们把色相H旋转到350°，现在好多了。
通过改变色相值H，我们实现了色相从洋红向海棠红的偏移。 大感觉接近了，但还是略微有点灰暗，还谈不上性感……
现在，我们可以通过增加饱和度S，让这个颜色变得更鲜活。
增加了20%的饱和度之后，颜色看起来亮丽了许多。
还是不对。海棠红是属于少女的颜色，应当再嫩一点、通透一点，不会这么热烈。我们需要通过增加亮度L，来找到那种微妙的感觉。
把刚才的颜色略微提亮10%，我们终于得到了想要的色彩：
同理，面对“加点橙色进去， 再亮那么一点点”这样粗鲁的要求，我们可以仅通过心算就大致确定色相环的相位和明度值。在这里，我们需要让H增加25°，L增加5%：
就是这样！现在让我们重温一下整个调色过程。
在使用HSL调色的过程中，我们并不需要打开拾色器，也不需要了解复杂的色光混合原理，这是一个自然的、感性的、易于理解的过程。
相比之下，RGB调色方式显得非常笨拙、无法理解。
我们对色彩的认识往往是这样的：“这是什么颜色？深浅如何？明暗如何？”，这种认识是基于人类的主体感官而形成的，并不是基于反射光的物理性质。与RGB色彩模型相比，HSL色彩模型对色彩的表述方式非常友好，非常符合人类对色彩的感知习惯。
HSL色彩模型诞生于上个世纪，已经在很多领域被广泛应用。但不同的色彩模型有着不同的适用场景，就GUI设计领域来说，对HSL色彩模型的合 理应用能让色彩处理的工作更加人性化，有助于建立和谐的人机交互关系，提升产品体验。当你像我一样在RGB的异度空间中苦苦挣扎的时候，不妨换一种思维方 式。也许HSL就是为你解决问题的关键。
附：HSL色彩模型在产业中的应用
互联网：CSS3开始对HSL提供支持，借助人性化的HSL模型，Web设计师可以更直观的定义所需的色彩，并能轻松的控制网页中的色彩变化。
电子办公：Microsoft Office的拾色器支持HSL色彩模型，用户可以简单的调配出协调的颜色并直接应用于电子文档中。
数码暗房：Adobe Photoshop Lightroom软件中的HSL调色器，使数码摄影师的色彩游戏变得更为生动直观。
软件换肤：在软件图形界面设计中应用HSL色彩，并设定简单的变换规则，便可以实现友好易用的换肤功能。
视频监控/动作捕捉：HSL色彩模型的亮度L分量与彩色信息无关，易于辨识分析；H与S分量与人的视觉感知原理相近，因此非常适用于图像理解、模式识别等与视觉感知有关的图像应用。
医学影像：借助HSL色彩模型的优势，医学影像学专家可以用更好的方式还原医学影像信息，或对生物体样本进行精确直观的色谱分析。
- (本文出自Tencent CDC Blog，转载时请注明出处)
设计中的色彩：橙色
- 登录以发表评论
- 浏览 173 次
接着上篇绿色， 今天我们将看一下橙色以及它在网页设计和Logo设计中的应用。橙色是红色和黄色的搭档，是一个充满活力与华丽的醒目的暖色。它比红色少了些热情和挑衅， 但是可以被用于吸引注意力之类的样式和设计中高度重要的区域。
橙色设计通常传达一种比较亲近的感觉，同时又能保持严肃性和专业特质。反过来说，橙色有的时候会让人想到廉价——多亏像Easyjet之类的公司在 他们所有的产品和服务上使用亮橙色。不过总体来说，这是个很棒的吸引注意力的色彩——不会讨人厌或突然打断某人。
橙色作为柑橘类水果的颜色可以传达夏天、太阳、维他命C和健康的概念。它也会联系到秋天和变化；在秋天叶子从绿色转变成橙色然后是褐色。根据你的用 户，你可以选择一个很亮的橙色或者一个偏向秋天的橙褐色。
使用橙色
如前所言，你可以使用橙色作为前景颜色来高亮重要的元素或者作为一个主要的背景色来传达一个热情、活跃和热烈的感觉。不用拼命的叫喊，橙色就能产生 巨大的效果。
红橙色是高度充满活力和激情的颜色，而更温和的黄橙色就比较缓和和低调。黑色和橙色在大自然中出现在南瓜中，所以这两个颜色和万圣节有很亲密的联 系。蓝色和橙色搭配很流行。绿色和橙色搭配可以表达出炎热的感觉，而和高贵的紫色的搭配则非常抢眼而不会过于无法抗拒(强势)。
橙色系Logo设计
让我们看看一些使用橙色作为主要背景色或者作为高亮网站主要区域比如导航的主要颜色的网站设计
设计中的色彩：热情的红色
- 登录以发表评论
- 浏览 174 次
今天是一个新的系列文章的开始，我们将讨论设计中的单个色彩，包括一个简要的色彩心理学理论和大量可见的实例。色彩是设计中的一个很重要的元素。它 被用于影响我们的心情，影响购物选择，以及作为情感的象征。那么让我们从最富有感情的色彩(也是本人最喜欢的)——红色开始吧。
对色彩的看法可能比较主观，但是有一个普遍的认识就是，暖色调聚集在色谱中红色的区域(红色、橙色、黄色)，而冷色调则一蓝色为中心(蓝色、绿色、 紫色)。红色产生温暖与舒适的情感，还有敌对和愤怒。世界上绝大部分的交通灯，红色代表“停”。色疗或者光疗法研究显示红色可以增加血压和呼吸的频率。在 远东地区的新娘常常穿红色的衣服；红色在南非却是丧服的颜色；在印度代表正直；而曾经在苏联红色代表共产主义，在俄国人推翻了沙皇的统治之后，开始使用红 色的旗帜。红色在中国也有特色的意义，新人结婚的时候会在家里贴上大大的红色的“囍”字，新年的时候各家各户也会贴上红色的对联和门画，代表喜庆和幸福。 红色的汽车最容易被盗。
我们在日常用语中使用红色描述一些事情：我们会大怒(see red)、有大喜之日(red letter day)、坐上红眼航班(red eye flight)、扑上红地毯(red carpet)然后狂欢作乐(paint the town red)。还有红娘、戴红帽、红颜知己等。毫无疑问，红色对很多人以为着很多事情。
设计中的红色
当提到设计，红色会吸引注意。它不是个低调的背景颜色，它会在页面中”叫喊”，它会从照片中跳出来。你可以很大 胆地在整个设计中广泛使用，就算是一点点也会起到很大的作用。看一下下面的这两个电影海报。它们定位于两类完全不同的观众却都用了红色来抓取我们的注意。 “Burn After Reading” (该设计是对Saul Bass的一种尊敬)使用一种大红色背景和大号亮色字体。它看起来乐观。
“The Dark Knight(蝙蝠侠6：黑暗骑士)”的海报通过红色的看起来像血的字体给人一种比较邪恶的感觉
红色在logo设计中相当流行，毫无疑问这是因为它吸引注意力的能力。这里是一些可能你已熟知的使用红色的logo设计：
当要在网页设计中使用红色，一些设计师选择了大胆，用红色作为主色调。这的确需要勇气，因为它可能会非常的势不可挡从而突然打断用户。这里是一些 “闪亮的”红色设计。
其它很多设计则使用一点或者少许的红色以凸显整体的色盘:
红色的寓意:爱、丘比特、愤怒、地狱、魔鬼、激情、停止、高能量、血、危险。
设计中的色彩：绿色
- 登录以发表评论
- 浏览 149 次
今天让我们了解一下绿色。和蓝色一样，绿色和大自然与植物紧密相关。这四十个绿色的渐变色是相当明了的，当你想到很多绿色调的色彩的名字的时候， 你可以轻易的想到为什么：海绿色、祖母绿、草绿、苹果绿、森林绿、叶绿色、会绿色、橄榄绿、淡绿色、松绿色以及苔绿色等。
回想一下一些常用的短语或许可以帮助一个设计师决定他们要用绿色表现的感觉的种类。绿色有很多中好的寓意：被批准放行(绿灯)、举重若轻、挣些美 钞。同样，绿色也有自己的阴暗或者不引人注意的意义：绿眼怪(嫉妒)，脸色苍白(feeling green around the gills)以及简单的太嫩(be green)了，比如，毫无经验。我不认为很多设计师想要给人一种绿色的感觉，或者让网站的访问者脸色苍白。
使用绿色
事实上有这么多的绿色色调，这形成了一个非常灵活的色彩。它可以在色盘的黄绿色端显得很“温暖”又可以在蓝绿和碧绿方向显得有些“冷”。一个柠檬绿 可以让一个设计很“潮”，橄榄绿则更显平和，而淡绿色可以给人一种清爽的春天的感觉。用蓝色搭配绿色可以传递一种水的感觉。添加米色或者褐色则可以展现一 种泥土的气息。白色+绿色是新鲜和户外的，而紫色和绿色是高对比的一对儿(需要小心对待)。
绿色LOGO
在前几篇中，我们很容易就能找到大把的知名logo，而绿色却并不太容易找到非常知名的全球品牌LOGO设 计。(然而我却是找到了一些，不得不多谢Twitter上的好友们的帮助)。 貌似对于大部分企业来说，绿色并不像蓝色和红色那么流行。
下面是10个使用各种绿色的网站设计。你认为这些网站中的绿色使用的如何？
事实上，前端观察之前也展示过很多绿色的LOGO和网站设计，或许能够让你对绿色的了解更深刻：
设计中的色彩：蓝色
- 登录以发表评论
- 浏览 171 次
“Blue flower, red thorns! Blue flower, red thorns! Blue flower, red thorns! Oh, this would be so much easier if I wasn’t color-blind!”——怪物史瑞克
上一篇，在这个关于在设计中使用色彩的系列文章的第一篇中，我们研究了红色。今天让 我们从色盘的暖色调的一端转移到冷色调的一端，看一下蓝颜色。蓝色是一个和天空和海洋相联系的自然色。它有种镇静的效果，而且被认为是一个很好的可以用在 卧室中的颜色，因为它有助于让你入睡。
虽然红色可以传达强烈的情感和热情，蓝色也会理所当然的被联想到悲伤和消沉。在西方，新娘会借一些蓝色的东西，在有些风俗中，蓝色被认为可以将坏精 灵赶走。所以与红色一样，蓝色对于很多人可以意味着很多事情，有些事情是你在设计中需要知道的。谁是你的目标用户？他们会对一个网站、logo或者一个海 报中的蓝色有什么样的反应？
在设计中使用蓝色
蓝色系真的包括很多种颜色，一直从藏蓝色到淡蓝色。深蓝色系长被认为是华丽的、讲究的、严肃的或者善于分析的，而较浅的蓝色系则表示洁净、平静和清 新。结合淡蓝和深蓝，有的时候会被作为银行的颜色，表示稳定、信任、能量与力量，这就是为什么它常常被用在企业网站中。嗯，别忘了，彩通 (Pantone)刚刚公布2010是绿松石之年(year of Turquoise，Turquoise是绿松石，一般翻译成天蓝色或者蓝绿色)。
蓝色可以使使用红色或橙色的暖色调色盘冷静下来，并且在和黄色搭配的时候可以创建一个很不错的吸引眼球的高对比色盘，蓝色和白色是整洁的、清新的， 而且看起来常常一起。这里是一些家喻户晓使用蓝色和白色的logo，包括由Paul Rand设计的著名的“蓝色巨人”IBM 的logo。
这里是一些使用蓝色作为设计中的主要部分的一些实例：
