恰当运用颜色
为网站选择合适的配色方案颇具挑战性，尤其缺乏艺术、设计或基础色彩理论知识时。错误的配色不仅会降低网站吸引力，更可能因对比度不足或色彩冲突导致内容难以辨识。不当的配色甚至会使特定视力障碍者（特别是色盲群体）完全无法使用网站内容。
找到正确的颜色
现有的工具和流程能帮助你选择合适的配色方案。虽然它们无法替代优秀设计师的决策指导，但足以让你起步。
基础色
第一步是选择基础色。这是以某种方式定义网站或网站主题的颜色。正如我们将绿色与饮料激浪联系在一起，将蓝色与天空或海洋联系在一起一样，选择一种合适的基础色来代表你的网站是一个很好的开始。选择基础色的方法很多，其中包括以下几种：
- 与内容主题自然相关的颜色，例如与产品或理念相关的现有颜色，或代表你希望传达的情感的颜色。
- 来自与内容相关的图像的颜色。如果要创建一个关于特定物品或产品的网站，请选择该物品上实际存在的颜色。
- 浏览网站，查看大量现有的调色板和图片，寻找灵感。
在尝试确定基本颜色时，你可能会发现能让你从网页内容中选择颜色的浏览器扩展程序会特别方便。其中有些甚至是专门为帮助完成此类工作而设计的。例如，ColorZilla 网站提供了一个从网页中挑选颜色的滴管工具。它还可以取不同大小区域甚至页面选定区域内像素颜色的平均值。
“平均颜色”取样功能之所以实用，是因为某些看似纯色块的区域，实际上可能由多种相关颜色构成——例如从海洋或天空照片中提取蓝色时。若仅从照片中选取单个蓝色像素点，最终生成的颜色可能会显得格格不入。
扩展调色板
确定基础色后，下一步是构建与之搭配的合适配色方案。有多种工具可将色彩理论应用于基础色，并输出相宜的辅助色。诸如免费在线工具 Adobe Color CC 在线色轮等，能帮助你轻松选取易于搭配的配色方案。
许多工具还能为调色板添加滤镜，让你看到不同色盲人群的视觉效果。关于此功能的重要性，请参阅颜色与无障碍设计的简要说明。
在设计调色板时，请务必记住，除了这些工具通常生成的颜色外，可能还需要添加一些核心中性色，如白色（或近似白色）、黑色（或近似黑色）以及一定数量的灰色调。
备注：通常情况下，应减少使用颜色的数量。通过色彩突出重点内容而非滥用色彩，能增强视觉冲击力并提升内容可读性。
色彩理论的资源
对色彩理论的全面回顾超出了本文的范围，但有很多关于色彩理论的文章，你也可以在附近的学校和大学找到相关课程。以下是一些关于色彩理论的有用资源：
颜色与无障碍
确保你的内容是无障碍的。有几种方法可以使色彩成为无障碍问题。色彩使用不当或粗心大意可能导致一部分目标受众无法充分使用网站或应用程序，从而造成流量损失、业务损失，甚至可能引发公共关系问题。因此，慎重考虑色彩的使用非常重要。
理解色彩与亮度 至关重要，同时必须始终考虑色盲问题及眩晕症。色盲类型多样，最常见的是红绿色盲，患者无法区分红色与绿色。其他类型则从无法辨别特定颜色到完全丧失色彩感知能力不等。某些色彩与动画的组合甚至可能诱发光敏性用户出现癫痫发作。
虽然更高的色彩对比度在动画效果（尤其是快速动画）中，降低动画元素的色彩对比度可降低癫痫发作风险。若包含动画效果，请使用 prefers-reduced-motion @media 媒体查询特性，为选择该偏好的用户降低动画效果。
同时需确保背景与前景内容间保持足够的颜色对比度，以保障可读性。此外，切勿仅依靠色彩传递信息。例如，若通过绿色边框标记操作成功，红色边框标记操作失败，红绿色盲用户将无法正常使用网站。应同时采用文字与颜色标识，例如绿色配合勾号以及红色配合叉号，才能兼顾所有用户。
调色板设计示例
让我们举一个简单的例子来说明如何为网站选择合适的色调。想象一下，你正在为一款发生在火星上的新游戏建立一个网站。那么，让我们在 Google 搜索火星照片。那里有很多火星色彩的好例子。
使用取色工具选取基础色样本。本例中我们选取了 #D79C7A，这是一种锈色橙红色。可通过 Paletton 生成调色板的其他颜色。打开 Paletton 后，我们看到：
接下来，我们在工具左下角的“Base RGB”框中输入颜色的十六进制代码（D79C7A）：
现在我们看到的单色调色板是基于我们从火星照片中选取的颜色。如果你出于某种原因需要很多相关的颜色，那么这些颜色很可能是不错的选择。但我们真正需要的是一种强调色。一种能与基色相得益彰的颜色。要找到这种颜色，我们可以点击菜单下方的“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 的值。