除了排版而且布局在美国，没有什么比颜色对我们设计和制作网站的方式影响更深远了——从我们通过图像和媒体展示的视觉效果，到使用鲑鱼粉色还是霓虹灯绿色来赋予网站颜色的简单选择90年代“救命，我要瞎了!”“上诉。这个简单的指南将介绍CSS颜色。您还会发现优秀的颜色图表和工具，以帮助您处理颜色值。
让我们设定目标:
- 检查现有的各种选择
- 分析每种颜色类型的基本代码示例
- 检查不透明度、透明度等
- 探索简单的色彩理论和心理学
颜色值表示法
在CSS中有许多类型的颜色符号，我们需要吸取的教训是，在考虑跨浏览器兼容性和其他限制之后，您需要自己决定哪种方法最适合您。在很多方面，颜色只受我们想象力的限制。多年来，随着能够显示数百万种颜色的显示器(与以前256种颜色的限制相去甚远)的出现，我们对色调和对比度的选择已经发生了变化。
当我们在代码中确定了完美的阴影时，我们用来描述和引用它的格式可以显示为许多颜色值之一，帮助浏览器确定我们想要呈现什么(以及在哪里)。
对于每一种颜色，都有一个十六进制，RGB和HSL等价。你只需要知道它的值。
十六进制值表示法
在CSS中描述颜色的许多方法中，最流行的是十六进制值。
它从一开始就存在，并保留了最大的浏览器支持。十六进制颜色值以散列(＃)字符，后面跟着三位或六位十六进制数字，以RGB格式表示。例如，十六进制数(通常被非正式地缩写为十六进制)白色的颜色值为# FFFFFF,或# FFF在速记。
因为十六进制值表示法比同样古老的关键字系统(例如，十六进制表示法)支持更广泛的颜色范围。红色的，绿色，蓝色的，黑色的)，它仍因其精确性而被广泛使用。下面是一些简单的十六进制表示法:
A{颜色:# AABBCC；} a{颜色:#美国广播公司；｝
RGB值表示法
当然，虽然十六进制编码在CSS中仍然非常流行，但许多设计师并没有意识到RGB颜色符号的其他约定已经存在了很长时间(我们可以追溯到最早的CSS规范)。
对于组成RGB颜色的红色、绿色和蓝色值使用0到255个数字(或使用百分比代替)，我们可以以更容易阅读的格式显示我们的选择。下面是颜色的RGB表示的简单例子:
A{颜色:Rgb (170, 187, 204)；} a{颜色:Rgb (67%， 73%， 80%)；｝
HSL值符号
我们还有HSL，这是新出现的。HSL是为了补充现有的RGB系统而构建的，它允许我们将色相、饱和度和亮度结合到一个三重声明中。
HSL使猜测颜色变得更容易，因为您可以通过增加或减少其他值(相对于基本色调)来声明更浅或更深的阴影。色调以色圈的度数表示(值为0到360)，饱和度和亮度都以百分比表示。下面是一个简单的HSL颜色表示的例子:
A{颜色:Hsl (210, 13.3%， 73.3%)；｝
颜色关键字和X11
到目前为止，CSS符号对初学者来说似乎相当困难，特别是如果十六进制值和颜色计算(使用百分比、色圈的程度或RGB光谱中的光值)不是你的强项。
不要害怕。一堆明确措辞的替代方案，被称为颜色关键词，可以帮忙。与其他方法不同的是，所支持的值是有限的，但它们做得很好。
使用color关键字是CSS中描述颜色最简单的方法之一。与其使用一些对普通终端用户来说完全陌生的奇怪符号，不如简单地提供一组基本值中的一个，用一个可识别的名称来描述颜色。颜色名称被限制为16个值，但是，正如我们将发现的，可以使用扩展的调色板进行扩展。
下面是一个简单的例子:
A{颜色:绿色；｝
基本颜色关键字符号已经存在很长时间了，但是考虑到上面提到的16种基本颜色的局限性，浏览器制造商(现在还有CSS3规范，它采用了SVG规范中的值)通过利用X11扩展的调色板(为我们提供了超过100种命名颜色)。
我们可以使用关键字来描述颜色(只要浏览器支持)。X11唯一的潜在问题是浏览器支持和一致性不能保证(例如，可能会发生一些颜色冲突)。
X11调色板为我们提供了一个扩展的、受支持的颜色关键字名称列表。
系统的颜色
最后，还有一组颜色关键字需要提一下。
系统颜色允许设计人员将某些颜色选择与操作系统的默认方案相匹配。想想Windows中的显示选项，以及如何改变系统文本、背景、标题栏等的颜色;关键字要求浏览器模拟它们。然而，系统颜色关键字是不推荐的，支持差，对网站的可访问性有危险，因为你让用户的操作系统来决定颜色和本机外观。
系统颜色是为了让网站看起来和感觉上更像一个操作系统。
颜色不透明度和透明度
到目前为止，我们已经概述了颜色值表示法的基础知识，如果您认为简单地告诉浏览器您想要什么颜色就可以了，这是可以理解的。但是随着CSS3的出现，颜色控制又增加了一个层次，使我们能够将半透明或不透明的效果叠加到对象上。
网站的不透明和透明效果可以是微妙的，相当漂亮。与通常的颜色符号一样，有许多方法可以实现这一点。
下面是一些最常见的。
不透明度
首先，让我们讨论不透明度，这可能是最棘手的交叉兼容，因为所有的浏览器和版本都需要支持。虽然不透明只出现在CSS3中，但它在早期的浏览器中有相当长的历史，尤其是在Internet Explorer中(它使用了专有的DirectX过滤器属性)。
要让混合效果完全正确是一个挑战，有些人会使用不同的混合来保持效果。下面是一个坚实的公式，包括所有你需要防弹不透明度:
Div{透明度:0.5;-moz-opacity: 0.5;-khtml-opacity: 0.5;-ms-filter:“progid: DXImageTransform.Microsoft.Alpha(不透明度= 50)”;过滤器:α(不透明度= 50);｝
透明度
CSS3还恢复了透明度。你不再局限于基于图像的alpha透明度(尽管这仍然是一个选项)或图像上的单色透明效果。现代浏览器利用了这两者RGBa而且HSLa，您可以猜到，它使用传统的RGB和HSL符号，但在末尾附加了一个基于百分比的alpha透明度值。下面是alpha透明度为0.5(或50%)的RGB和HSL的简单示例:
A{颜色:rgba(170, 187, 204, 0.5);} a{颜色:rgba(67%， 73%， 80%， 0.5);} a{颜色:hsla(210, 13.3%， 73.3%， 0.5);｝
安全的颜色
对于像颜色这样重要的东西，你会期望兼容性是给定的。
但现实情况远非完美。X11颜色系统在不同的浏览器中不受同等的支持(它只是刚刚被添加到CSS规范中)。HSL, HSLa和RGBa是CSS3的新添加，所以在旧的浏览器中不能依赖;系统颜色已弃用;不透明度和alpha- transparent支持都很混乱!
如果你认为现在的东西是有限的，回想一下颜色是限制性的时候。即使是我们所依赖的基本颜色在旧硬件上也可能是一个潜在的问题，因为当显示器只能呈现256种颜色时(甚至更早的时候是8位显示器)，兼容性问题已经严重到足以让我们限制颜色符号背后的功能。为了确保所有设备获得一致和可用的外观和感觉，形成了三个安全颜色使用级别。
很安全的颜色
早在8位显示器还相当普遍的时候，这种情况就存在了，因为在那些显示器上，只有22种被定义为“网络安全”的颜色可靠地显示出来。
合法的颜色
这是大多数设计师都知道的(有些人仍然在使用)。216种颜色可供选择(256种颜色中包括抖动)，主要用于老式显示器。
Web-smart颜色
这是4096种颜色，是为了消除网络安全调色板的限制，同时保持颜色使用的合理兼容。
即使你不考虑兼容性，网页设计师在使用颜色方面也有一些额外的问题，主要是由于网页的可访问性。色盲影响着世界各地的许多人，这种情况的严重程度各不相同，这使得这种情况特别难以处理。
网页易读性注意事项
有些人可能只缺一种颜色，有些人对整个光谱完全失明，还有一些人只能看到黑色和白色(单色)，还有一些人视力很差或根本没有视力。
以下是各种形式的色盲:
Monochromacy
无法看到黑色和灰色以外的颜色，或者在更罕见的情况下，无法看到某些色度阴影以外的颜色，如轻度棕色或蓝色变体。
Dichromacy
这是指三种基本颜色机制中的一种失灵，通常被称为原视(红盲)、后视(绿盲)和三视(蓝盲)。
三色视觉
这种情况是指机制存在但有缺陷(从而导致混乱)。
三色视包括质子异常(减少红色)、氘异常(减少绿色，这很常见)和三色异常(减少蓝色)。这些影响网页可访问性的问题的组合要求我们对如何使用颜色(以及我们选择的颜色)更加敏感，这样我们才能使我们的网站易于使用，吸引人，可读性强。虽然某些颜色在一双眼睛看来完全没问题，但某些情况可能会使您的作品对不幸的用户毫无用处或看不见。
色盲很难模仿，但有一些工具可以帮助我们。如果你目前没有在设计中考虑色盲，你应该马上开始。为了助你一臂之力，读书吧10个评估网页设计可访问性的工具．
颜色协会
让我们简单回顾一下一些基本的颜色联想。
正如你所看到的，颜色比你看到的要复杂得多。颜色会对用户与页面的互动产生巨大的影响，关于颜色对购买习惯和行为的影响的研究在设计师和心理学家中是众所周知的。很多关于色彩理论存在，所以不要羞于进一步探索这个主题，因为它对你的决策过程有好处。
当我们看到某些颜色时，许多人会下意识地将它们与我们周围世界的事物联系起来。例如，当我们看到红色时，我们可能会想到爱情、血液或激情，这取决于文化教养和个人经历等各种因素。我们可以用这些联想来给用户留下我们的印象，就像画家用颜色来激发情感一样。
例如，一个关于吸血鬼的网站最好使用红色和黑色的调色板，而不是黄色和绿色的调色板，因为这是传统上与该类型相关的颜色。
许多不同的颜色联想源于文化，有些是相当明显的。这种心理现象不仅会影响我们对环境的感知(尽管影响到什么程度还有待讨论)，不同的文化将颜色与不同的事物联系在一起；我们不能认为西方的标准适用于世界各地。另一个与颜色有关的是温度:我们经常把蓝色与冷的东西联系起来，把红色与热的东西联系起来，这可以在我们的视觉中看到。
色彩心理学可以帮助你更好地与观众沟通。
颜色工具和资源
下面是一个与网页设计中颜色相关的链接列表，你可能想要探索一下。
颜色图表
颜色选
- ColorSchemer Studio 2
- 颜色的警察(免费)
- Adobe Kuler(基于网络的)
- ColorToy(iOS)
- Magic Color Picker (Android)
结论
颜色在网页设计中扮演着巨大的角色，我们对它的实现也很重要。无论我们使用的是对比、阴影、色调、透明度等等，我们的目标都是制作出美观且与我们的受众相关的网站。
我们的选择应该避免冲突和模糊，我们应该选择一个与用户兼容且可访问的调色板。CSS已经为我们提供了使用任何我们想要的颜色的基础，CSS3提供了额外的工具，比如不透明度。但灵活性越大，责任就越大。
颜色覆盖了我们网站的每一平方英寸，我们永远不应该低估它对我们工作的价值。回顾一下你目前正在使用的颜色系统，并在你的努力中发挥创造力，以建立越来越美丽，生动的体验。你的颜色应该给人留下积极持久的印象。
相关内容
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
