网页色彩记论

我为这个页面单独创建了一个工具页Color Collections ，用来保存一些颜色板。之后的颜色不再重复在这里记录。

作为一个专业前端谈及网页设计的颜色似乎有些跑调，不过在没有成为一个前端之前毕竟也曾是个苦憋的菜鸟级设计师，所以对色彩多少也有些自己的看法。其实不论是大学期间所见所学的还是工作之后看到的各种文章里描述的色彩理论，最后只能沉淀成一种似有非无的东西。比如前些日子看的 Color Theory 101 和 The Psychology of Color ，现在在脑子里只有非常模糊的印象。设计者最后仍然还是照着自己的方式创造着美，和一些独有的郁闷:)

网页设计，很大程度上就是布局和层次，前者用空间衡量，后者用光影表现。任何美的技术都有相通之处，所以色彩有的时候并不是必须的东西，黑白和灰度足以表现空间和层次。这之后才是色彩，一种我们与生俱来的分辨方式和暗示。而我写这篇文章的目的，并不是想讲述太多众所周知的理论，既然是记论，其实主要作用就是记录一些色值，这个页面最后会变成我的类似工具参考的页面一样。

写的时候还忍不住长篇大论了一通，结果后来直接剪切到一篇新的草稿里了，草稿数破天荒突破20...

灰度

说灰色是灵魂，那真是完全不为过。任何设计师都明白灰色的绝对地位——无色的灰度只体现明暗，就如同素描般刻画着细节。如果熟悉Photoshop的话就更能理解，LAB模式下为什么在不破坏明度通道的情况下，仅仅操作ab两个颜色通道并不会对图像造成细节上的损失，同样这也是使用LAB模式滤除噪纹的根本原因。

可以说没有比苹果使用灰色更在行的公司了，而且从过往到现在其风格几乎不曾改变。曾经一度因为Vista绚丽的界面而流行的高光效果现在在各种审美疲劳下，显得非常庸俗，win7甚至是之后的win8一样走的是透明的光效果。苹果的典型做法是几乎所有的场景伴随着柔和的灰度，整体上的暗淡和简单是为了绝对不去喧宾夺主，即使界面上只有一个高纯度的按钮——那不仅是点缀，更多的是在引导交互过程——我们的注意力不会被无用的装饰而过度分散。

网页上的设计往往不仅要考虑到美观，更重要的是色彩和形状上的区分使得信息交互足够一目了然。区块的划分、质感的烘托、层次的表现等等都是灰色在起绝对性的作用。另外文字也是，白底黑字固然清楚却也过于锐利，稍微的灰度使得字体更加柔和——不过 #666 是一个底线，短时间的成列效果还行，如果是长时间浏览的字体颜色，至少应该达到 #555 的灰度，否则太淡一样会影响阅读。

纯度

PS右上角那些高纯度的安全色，在网页是使用的非常频繁，其中尤其是 #f60。红色不用纯色红，大多使用的是 #f30 的橘红。如果去掉那些比较少用的高纯度的颜色——特别是绿色，很少用到，剩下的颜色不外那10种。使用这些做背景纯色会显得颜色过深并且太刺眼，但是用在文本上却很有效果。

色彩记录

下面开始就是我的一些色彩记录，虽然现在看起来好像还不多，不过以后这部分会慢慢增加。

Opera官网曾用的三种颜色，把这3色压成2px拼接成的分割线是我非常喜欢的风格。

07年的时候 lifeInbox.com 出过一个 Color Match Colors Solutions，在网络流传算是比较广泛。时至今日拿出来看看仍然能够找到不错的组合，颜色大部分都是偏向柔和色调，色彩纯度都不高，很符合欧美简约淡雅的页面特点。

Prototype.js API文档的色值，完全的程序员风格，暗淡、恬静，但是表达到位。

Baby Emerson’s eye-catching color palette: