颜色的名字一直是个很烦的东西,因为任何颜色的名字对于两个不同的人来说都永远不可能感知到完全相同的颜色,尤其是当他们受到了网站的情感因素的影响时。给某个颜色命名时很可能会误导别人的感觉,即使像“蓝色”这样的颜色也是不确定的。如果想要更精确些,那么可能就会表述为“天蓝”,“海蓝”,“牛仔裤的蓝色”或者甚至是“电弧焊机的蓝色”。

对于颜色的描述会随着个人品味以及不同的情景而变化,我们会将它们标记为“靛蓝”,“翡翠”,“橄榄”,“橘红”,“绯红”或“卡巴莱”。“电石灰”到底是什么颜色?除非你是个电脑,否则肯定没法搞定这些名字和它们精细的色调变化。

代码要求精准

当计算机命名某种颜色时,它们使用的是一种所谓的十六进制代码,大多数人称之为24位色彩。也就是由哈希字符(即:#)开头的,10个数字和六个字母组成的六个字符所构成的 16,777,216 种独立的组合。跟其他任何计算机语言都是类似的,这里面也有个逻辑系统在发挥作用。能够理解十六进制色彩的工作原理的设计师,就可以把它当作一个神器来使用,而不是当作迷一样的存在。

将十六进制数拆成可控的字节

背光屏幕上的像素在被红,绿,蓝三种颜色的组合点亮之前是黑色的,十六进制数即是一种用来表示这些组合的简洁代码。这种代码是很容易被拆解的,例如要想理解#970515,我们需要先看一下它的结构:

第一个字符 # 声明了“这是一个十六进制数”。另外六个其实是三对 0-9 和 a-f。每一对控制了一种附加的原色。

数值越高则代表原色越亮。在上面的例子中,97掌控着红色,05绿色,而15则控制着蓝色。

尽管每对只能容纳两个字符,但是 #999999 却只是中等的灰色。要想用两个字符达到比99更亮的颜色,那么每个十六进制数就都要使用字母来表示 10-16 了。在 0-9 之后的 A,B,C,D,E 和 F 构成了偶数 16,跟扑克牌中的勾儿,圈儿,凯,尖儿没什么不同(各地叫法不同,你懂的)。

作为运算用的,对计算机比较友好的代码,十六进制数是模式完整的字符串。例如,由于 00 是缺少一种原色,而 ff 是原色最强的状态,那么 #000000 就是黑色(没有原色),而 #ffffff 就是白色(全部原色的组合)。我们可以基于此来找到某个颜色的加色(additive)和减色(subtractive)。让我们从黑色开始,分别将每一对改成 ff:

  • #000000 是黑色,我们的起点
  • #ff0000 代表最亮的红色
  • #00ff00 代表最亮的绿色
  • #0000ff 代表最亮的蓝色

减色的话可以从白色开始,例如在 #ffffff 的基础上,要想找到原色的减色,可以将每一对改为 00:

  • #ffffff 是白色,我们的起点
  • #00fffff 代表最亮的青色
  • #ff00ff 代表最亮的品红
  • #ffff00 代表最亮的黄色

十六进制的简写

像 #fae 这种只使用三个字符的十六进制数,意味着每个个位的位置应该跟十六位位置的相同。因此 #fae 将扩展为 #ffaaee 而 #09b 实际上就是 #0099bb。这些简写的代码可以让代码更简洁。

大多数情况下,我们可以采用忽略个位字符的方式读出十六进制的颜色,因为十六位处的字符可以给出更多信息。也就是说,你很难区分出 41 和 42的区别,但是 41 和 51 之间的区别是很容易察觉的。

上面的例子在十六位的位置上已经有了足够的差异来让我们分辨,大量的红色,一些蓝色,没有绿色。这会构成一个温暖的紫色。第二个例子的十位(9,9和8)非常类似,那么要想辨别这个颜色,我们还需要检查个位(7,0和5)才行。十六进制颜色的十六位处越接近,则该颜色会越中性(即更加不饱和)。

让十六进制数为你所用

理解十六进制颜色可以让设计师做更多的事情,而不仅仅是可以给同事和客户留下深刻印象,说着:“啊,那个紫红色的色调不错”。十六进制颜色可以让设计师飞速调整颜色来提高辨识度,通过颜色识别样式表中的元素,并可以开发颜色主题,而这些是大多数图像编辑器所不能做的。

保留字符中的色调

要想让某个颜色变亮或者变暗,一种倾向是调节它的明度。这样可以覆盖该颜色从阴暗到明亮的全部色域,但是无论往哪个比例调整都会丢失颜色的特性。例如,当把明度减少到20%的时候,在中等的绿色一下的颜色就会变成准黑色了。而如果提升到100%,则曾经中性的绿色就会变得更有活力。 当我们把十六进制数当成是以十为单位递增的时候,就会发现一个有趣的现象。当我们把每一对的左侧字符加一的时候,就会提升这个颜色的明度而降低它的饱和度。这可以防止给定颜色的色调过于接近漆黑或者明亮的霓虹色。改变十六进制的每一对字符,可以保留住颜色的本质。

在上面的例子中,上面的一组色调倾向于获得更多的黄色或降为黑色,即便在技术上来说,它还是同样的绿色色调。通过调整十六进制对,第二组则可以保留更多自然的色调。

褪色的下划线

默认情况下,浏览器会用加下划线的文本来表示链接。但是较粗的下划线会干扰字母的下伸部分。设计师们可以通过缩减十六进制色彩,来让下划线显得没那么突兀。这个想法就是想让标签接近背景色,而文本本身可以跟背景色有个对比。

  • 对于浅色背景上的深色文本,我们把链接调亮。
  • 对于深色背景上的浅色文本,我们把链接调暗。

要想代码生效,每个嵌入的链接都需要在<a>的内部再增加一个 <span> :

a { text-decoration:underline;color:#aaaaff; }
a span { text-decoration:none;color:#0000ff; }

如你所见,同样颜色的下划线会干扰文字基线以下的部分。更改下划线使其更加接近背景色可以使下伸的部分更易阅读,尽管现在大多数浏览器都把下滑线放在字型(letterform http://en.wikipedia.org/wiki/Letterform )之上。

给每个锚点标签都添加span可能会引发问题,所以目前比较流行的做法是,移除链接的下划线而改用下边框:

a { text-decoration: none; border-bottom: 1px solid #aaaaff; }

更好的正文副本

有个反复出现的问题就是,某种特定的颜色可能在技术上是正确的,但是却有意想不到的效果。例如,一些设计要求标题和正文是相同的颜色。我们得时刻记住,这里的大字填充得越浓重,则小字也会变得越暗。

![]http://diao.it/wp-content/uploads/2013/06/hex-text-too-light1.png)

h1, p { color: #797979; }

h1 { color: #797979; }
p { color: #393939; }

尽管技术上是相同的,这份副本的正文更窄,并且更精细的字型使它看上去比标题更亮。降低十六位的位置可以使文本更易阅读。

如何将某个背景色变暖或变冷

中性的背景色可能更便于阅读,但是“中性”并不意味着“平淡”。调整第一个和最后一个字节可以巧妙地让背景色变暖或变冷。

  • #404040 — 中性
  • #504030 — 更暖
  • #304050 — 更冷

有点儿太过了吗?要想做到更微妙的转变,可以只修改个位:

  • #404040 — 中性
  • #594039 — 更暖
  • #394059 — 更冷

通过复制粘贴协调颜色

识别十六进制数的数字/字母对的结构,可以为设计师提供一个探索颜色组合的独特工具。与色盘和图表不同的是,重新排列十六进制数的每一对是个很简单的过程,它可以在调整色调的同时仍然保持数值比较相近。作为奖赏,其结果可能是无法预知的。这里最简单的一种技术,就是将一对字符挪到其他的位置,即交换了原色。

一个比较通用的设计技术就是让文本或其他可见的元素与照片的颜色相呼应,即使用照片中的颜色。理解十六进制色彩可以使我们更近一步,即派生出与照片协调的新颜色,而不单单是直接从照片中取色。

更上一层楼

别让代码吓到你。伴随那么一点儿创造力,十六进制颜色就可以成为你得心应手的工具。如果不出意外的话,下次某人问你是否可以用随便什么语言的代码解决某个问题时,你就可以简单滴说:

=“应该不会比我在大脑中解析十六进制数更难。”

扩展阅读

你可能会对下列文章及相关资源感兴趣:

用这个便捷的工具为任何十六进制颜色确定一个人性化的名字。

让你认识到颜色是相关的,并且上下文环境已经成为选择迎合照片颜色的关键因素。

英文原文:Read 'The Code Side Of Color'

本文作者:@姬小光