嘿，小朋友。
我是Fish^12。想学CSS吗？这是我CSS系列的第三篇文章。在阅读这篇指南之前，请确保你已经掌握了前面的内容1。
这次，我们要讨论的是色彩。距离制作版式又近了一步。
前言：本指南面向新手。如果你了解颜色格式或无障碍色彩要求，可以给这篇指南投个down。此外，本指南不会讨论设计，而只涉及颜色本身。
颜色
CSS是一种高度视觉性的媒介；你将持续与设计和美学打交道，这意味着我们在字面上和比喻义上都要理解色彩的运作方式。
不幸的是，美学和色彩理论的内容得日后再谈。当下，我们只掌握最基础的部分。
我们将从如何生成颜色开始。
“我是蓝色(blue)！”
这是一段蓝色文本。但显示蓝色的方法有很多种。
.colloquialColoredText {
color: blue;
}
这是最简单的方式。为了方便使用，CSS内置了上百种颜色的命名。这一资源列出了所有经命名的颜色及其外观。
“我是马鞍棕色(saddlebrown)！”
“我是褐红色(maroon)！”
“我是深蓝色(navy)！”
如果你知道颜色的俗名，这种做法就非常直观。然而，它的功能总归有限；如果你想要一个稍浅的蓝色或者稍深的黄色，它就无能为力了。
.hexColoredText {
color: #0000FF;
}
十六进制编码！十六进制表示法的数值范围在00到FF之间，对应十进制的0到255。
本质上，十六进制编码可以拆分成三个等长的部分；它们分别代表红色、绿色和蓝色（RGB）。那么，你就能够推想，#0000FF代表红色为0，绿色为0，蓝色为255，让文本呈现为蓝色。
然而，要在脑海中直观混合这些颜色会很困难；如果对混合颜色以及将颜色转写为十六进制编码的方式缺乏清晰的理解，你很可能还是要依赖取色工具来帮助选择十六进制编码。这就引出了下一种格式。
.roygeebivColoredText {
color: rgba(0, 0, 255, 1);
}
RGBA！不再依赖于十六进制，现在你可以以数字清晰地表示所有颜色。选定一个介于0到255之间的值就好。它还添加了第四个参数Alpha，取值在0到1之间。Alpha的值代表了不透明度。
“我是不透明的蓝色！”
“我也是蓝色，但我是半透明的！”
“你几乎察觉不到我的存在！”
然而，这仍然需要你具备一定的色彩混合知识才能发挥最大效用。你或许会想要一个直观理解颜色的最佳方案。
.hassleColoredText {
color: hsla(240deg, 100%, 50%, 1);
}
这个解释起来有点复杂。HSLA代表色相（Hue）、饱和度（Saturation）、亮度（Light）和透明度（Alpha）。
色相取值于一个360度的范围内，它将彩虹的色彩映射到了圆锥状的渐变图上。红色是0度，黄色是60度，绿色是120度，青色是180度，蓝色是240度，紫色是300度，然后循环回到红色。
“我是10度！”
“我是200度！”
“我是300度！”
饱和度取值于0%到100%之间，它表示着给定颜色的强度。0%时颜色为灰色，100%时则为原始颜色。
“我是100%！”
“我是60%！”
“我好幽郁！”
亮度也取值于0%到100%之间，它决定了颜色的明暗程度。0%时颜色为黑色，100%时则为白色。
“我是50%。刚刚好！”
“我是70%。太亮了！”
“我是30%。太暗了！”
HSLA需要一点时间来适应，但它是多种颜色格式中最为直观的。它也让创建调色板更加容易，因为你只需改变一两个值就能制作一个强调色。例如，假设我有一个青色div，我只需要调整亮度或者饱和度，就能调配出一款更深的青色，用于制作阴影效果。
注意：颜色有许许多多的格式。以上这些一般来说是最容易理解的，也是最常在维基上使用的。
这么多颜色格式全都能够供你使用，并且不存在唯一正确的方法。你可以使用任何趁手并且符合需求的方式。例如，如果你在与他人合作，或许最好使用一种你们都能理解的格式。
无障碍性（Accessibility）
哎呦。难的来了。
挑选颜色很容易，但挑选合适的颜色却很难。我们将会介绍多种能够实现无障碍性的工具和诀窍。
.badText {
color: lightgrey;
background: grey;
}
根本看不清啊！
CSS守则2要求所有文本都具备可读性。主要的判定工具是色彩对比度检验器，该工具会计算字体颜色与背景颜色的对比度。
在理想情况下，你甚至根本不需要用到这类计算器；你选择的颜色本就应该清晰易读。如果你必须通过判定才能确认自己是否合规，那已经说明你可能需要调整自己的调色盘了。
撰写可读性良好的内容，远比踩线达到“技术上可读”的标准要好。
.badText {
color: white;
background: black;
}
这也太刺眼了。
同理，我们也不该使用对比度过高的颜色。
尽管从技术上讲这是可读的，但会很累眼；黑底白字拥有你能在现实里获取的最大对比度。这就是为什么纯白和纯黑在网页设计中极少使用，通常会用灰白色和灰黑色作为代替。
.badText {
color: red;
background: green;
}
这是红绿色盲。
除开颜色对比度极差之外，这样的配色更会导致红绿色盲患者无法阅读。若要提高无障碍性，这有一个很方便的工具网站，可以帮你选择能够应对常见色盲类型的调色盘。
一份相克颜色的快速参考列表：
- 红色/绿色
- 红色/棕色
- 白色/黄色
- 蓝色/紫色
注意：这并不是说你在其它地方也都绝对不能使用这些色对。如果你要使用一个彩虹背景，很显然你不需要担心蓝色和紫色之间的渐变。只是说，为了可读性考虑，你不应该在紫色背景上方使用蓝色文本。
此外，你不应仅靠颜色来传达含义。停下和通行都有颜色，但它们还配有文字和形状以确保其含义清晰。你也可以选择使用图案、符号或图像。
结论
关于色彩理论之类的话题我可以讲得滔滔不绝，但说到底，真正重要的是颜色本身是否美观。这些都只是经验之谈，请审慎参考。