明智地使用颜色
为网站选择合适的颜色可能很棘手，特别是如果你没有艺术、设计或至少是基础色彩理论的良好基础。错误的颜色选择会使你的网站缺乏吸引力，或者更糟的是，由于对比度或颜色冲突问题，导致内容难以阅读。使用错误的颜色可能导致有某些视力问题（特别是色盲）的人完全无法使用你的内容。
寻找合适的颜色
有一些工具和流程可以帮助你选择一个好的配色方案。虽然它们无法取代优秀设计师帮助你做这些决定，但它们可以让你入门。
基色
第一步是选择你的基色。这个颜色代表你的网站或其主题。就像我们将绿色与饮料激浪（Mountain Dew）联系起来，将蓝色与天空或海洋联系起来一样，选择一个合适的基色来代表你的网站是一个很好的起点。选择基色的方法有很多；以下是一些想法：
- 一种与你的内容主题自然相关的颜色，例如与某个产品或想法已有的颜色，或者代表你希望传达的情感的颜色。
- 一种来自与你的主题相关的图像的颜色。如果你正在为某个物品或产品创建一个网站，选择一个在该物品上实际存在的颜色。
- 浏览那些让你查看大量现有调色板和图像的网站，以寻找灵感。
一些有用的浏览器扩展可以帮助你选择基色。例如，ColorZilla 浏览器扩展提供了一个吸管工具，可以从任何网页上拾取颜色。它还可以取一个页面区域颜色的平均值。
获取“平均色”很有用，因为有时看起来像纯色块的区域实际上可能是多种相关的颜色，比如从海洋或天空的照片中提取蓝色。从照片中选择的单个蓝色像素可能会导致一个看起来不协调的颜色。
丰富调色板
一旦你确定了基色，下一步就是构建一个与之搭配的合适颜色的调色板。有几种工具可以将色彩理论应用于你的基色，并输出合适的附加颜色。像免费的 Adobe Color CC 在线色轮这样的在线工具可以帮助你选择一个易于访问的调色板。
许多这些工具还可以对你的调色板应用滤镜，这样你就可以看到它们在各种色盲形式的人看来是什么样子。请参阅颜色与无障碍，简要了解为什么这很重要。
在设计调色板时，你可能还需要用一些核心的中性色来补充它，例如白色（或近白色）、黑色（或近黑色）以及一种或多种灰色。
注意：通常情况下，最好使用尽可能少的颜色。用颜色来突出重要内容，而不是给所有东西都加上颜色，会产生更大的影响，你的内容也会更具可读性。
色彩理论资源
对色彩理论的全面回顾超出了本文的范围，但是，有很多关于色彩理论的文章可供查阅。我们发现以下资源特别有用：
颜色与无障碍
确保你的内容是无障碍的。颜色有多种方式可能造成无障碍问题。不当或粗心地使用颜色可能导致网站或应用的一部分目标受众无法正常使用，从而导致流量损失、业务损失，甚至可能引发公关问题或诉讼。因此，仔细考虑颜色的使用非常重要。
重要的是要理解颜色和亮度，并始终考虑色盲和前庭系统疾病。色盲有几种类型；最常见的是红绿色盲，它使人们无法区分红色和绿色。还有其他类型，从无法区分某些颜色到完全无法看到颜色。甚至有些颜色和动画的组合可能导致光敏用户癫痫发作。
虽然更高的色彩对比度在无障碍方面通常是件好事，但在制作动画时，特别是快速动画，降低动画元素的色彩对比度可以减少癫痫发作的风险。如果你包含动画，请使用 prefers-reduced-motion @media 查询功能为选择了该偏好的用户减少动画。
也就是说，要确保你的背景和前景内容之间有足够的色彩对比度，以确保易读性。此外，永远不要只用颜色来传达信息。例如，如果你用绿色边框围绕相关 UI 元素来表示操作成功，用红色边框表示失败，那么红绿色盲用户将无法正常使用你的网站。相反，应同时使用文本和颜色指示符来将这些用户也包含进来。例如，一个绿色的对勾和一个红色的叉号会更好。
调色板设计示例
在这个例子中，我们将为一个以火星为背景的游戏网站创建一个合适的调色板。在谷歌上搜索火星的照片会得到几张彩色照片。
使用颜色拾取器工具选择一个颜色样本作为基色。在这个例子中，我们选择了 #D79C7A，这是一种铁锈般的橙红色。我们可以使用 Paletton 来为我们的调色板找出其他颜色。打开 Paletton 后，我们看到：
接下来，我们将我们的颜色的十六进制代码（D79C7A）输入到工具左下角的“Base RGB”框中：
我们现在看到了一个基于我们从火星照片中挑选的颜色的单色调色板。如果你需要相关的颜色，这些可能是很好的选择。要找到一个与基色搭配起来很突出的强调色，我们点击选择调色板类型菜单下方的“add complementary”（添加互补色）切换开关。默认是“Monochromatic”（单色）。Paletton 计算出一个合适的强调色；点击右下角的强调色，告诉我们这个颜色是 #508D7C。
如果建议的颜色不符合你的需求，你可以改变配色方案。例如，如果建议的绿蓝色不起作用，选择三色系（Triad）图标，结果如下：
点击右上角的灰蓝色。颜色是 #556E8D。这可以作为强调色来让事物脱颖而出，例如用于网站的标题、选项卡高亮或其他指示符。
现在我们有了基色和强调色。我们还有两种颜色的几个互补色调，可以用来创建渐变或作为指示焦点的强调色，比如链接的悬停状态。这些颜色可以导出为多种格式供你使用。
你还应该选择中性色。找到一种能提供足够对比度，使你的文本清晰易读，同时确保它对眼睛不刺眼的颜色。如果对比度太低，你的文本会被背景冲淡，使其难以阅读，但如果对比度太高，用户可能会觉得你的网站俗气且不悦目。
颜色、背景、对比度和打印
你的网站在打印出来时可能与用户在屏幕上看到的非常不同。打印页面时，用户可能会选择只以黑白方式打印。大多数浏览器在打印文档时默认会移除背景颜色和图像。
最重要的通常是文本本身，但如果你的背景颜色和图像是经过精心选择的，和/或对内容的有用性至关重要，你可以使用 CSS 的 print-color-adjust 属性来告诉浏览器不应调整内容的外观。
默认值 print-color-adjust: economy 表示，浏览器被允许根据其认为必要的方式进行外观更改，以尝试优化内容的可读性和/或打印经济性，这取决于文档被绘制到的输出设备类型。
你可以设置 print-color-adjust: exact 来告诉浏览器，你应用了此属性的元素是经过专门设计的，最好保持其颜色和图像原样。设置了这个值后，浏览器不会篡改应用了此值的元素的外观，并将按照你的 CSS 指示来绘制它。
注意：尽管如此，并不能保证 print-color-adjust: exact 会导致你的 CSS 完全按照给定的方式使用。如果浏览器提供了用户偏好设置来更改输出（例如打印对话框中的“不打印背景”复选框），那么该设置将覆盖 print-color-adjust 的值。