为什么需要颜色搭配方案？
在 Web 开发中，颜色的搭配是一项和排版、布局等同样重要的设计任务。好的颜色搭配不仅能让页面显得更加美观，还会给用户带来更好的使用体验。
颜色搭配方案的设计可以使页面上的颜色看起来像是由同一个家族产生的，具有一致性和连贯性。它还可以帮助您定义一个色板（你的品牌特定颜色的集合），这可以是一个非常有用的工具，在不同的设计请求中使用相同的颜色集合。
Material Design 颜色搭配方案
Material Design 是 Google 发布的一套设计规范，比起一般的设计规范更注重深入研究动画和交互效果，希望为移动设备和桌面网站提供更统一、更美观的设计。
Material Design 将色彩方案分为主色和辅助色两种。主色是您设计的色板中最广泛使用的颜色，而辅助色是在需要突出某些区域或特定元素时使用的颜色。
在 Material Design 颜色搭配方案中，有 5 种主色、6 种辅助色和一个默认的背景色：
主色
- Red：#F44336
- Pink：#E91E63
- Purple：#9C27B0
- Deep Purple：#673AB7
- Indigo：#3F51B5
辅助色
- Light Blue：#03A9F4
- Cyan：#00BCD4
- Teal：#009688
- Green：#4CAF50
- Amber：#FFC107
- Orange：#FF9800
默认背景色
- Grey：#9E9E9E
当然，您可以根据自己的需要和品牌色彩，修改色板中的颜色。
如何使用 Material Design 颜色搭配方案？
当您使用 Material Design 颜色搭配方案时，主要考虑以下两个方面：
1. 遵守规范
根据设计规范，主色应该是应用程序的主要颜色。而辅助色则是在需要突出各种元素（例如，强调按钮或警告）时使用的颜色。确保在您自己的设计中使用主要颜色和辅助颜色的 Microsoft 程序。
2. 定义自己的色板
在实际设计中，您应该从 Material Design 的标准色板开始定义自己的颜色组合。通过在您的颜色设置中指定新颜色，您可以很容易地定义它们在您的应用程序中的位置。这样，您就可以轻松地在整个应用程序中保持一致的外观和感觉。
下面是一个示例代码，演示如何使用 Material Design 颜色搭配方案：
// javascriptcn.com 代码示例
/* 使用主色 */
button {
background-color: #F44336;
color: white;
}
/* 使用辅助色 */
a:hover {
color: #4CAF50;
}
/* 定义自己的色板 */
:root {
--custom-color-1: #4285F4;
--custom-color-2: #DB4437;
--custom-color-3: #F4B400;
--custom-color-4: #0F9D58;
}
/* 使用自己定义的颜色 */
p {
color: var(--custom-color-1);
}在上面的代码中，我们使用了红色作为一个按钮的背景颜色。我们还使用绿色来突出显示某些链接。最后，我们通过定义一组自定义颜色来定义自己的色板，然后使用其中的一种颜色应用于一些段落元素。
总结
在设计中，颜色搭配是一项非常关键的工作。 Material Design 颜色搭配方案通过提供一组主要颜色和辅助颜色，使得设计可以更加统一和有序。在实际中，我们在使用时应该遵守规范并定义自己的色板，以保持一致的外观和感觉。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652e0da57d4982a6ebf2037c