Material Design 中的颜色规范介绍-JavaScript中文网-JavaScript教程资源分享门户

在现代的用户界面设计中，颜色是一个非常关键的元素。为了实现更简单、更一致和更有品质的设计，Google 推出了一套 Material Design 颜色规范。在本文中，我们将深入介绍这些规范，围绕如何在前端应用中使用 Material Design 中的颜色。

Material Design 中的颜色系统

在 Material Design 中，有两种类型的颜色系统：基础颜色和扩展颜色。

基础颜色

基础颜色System，包括黑、白和灰色以及它们的变体和渐变。这个基础颜色系统是构建所有 Material Design 调色板的起点。

白色

这是纯白色，用于背景、分割线和支持型元素。

/* CSS */
background-color: #FFFFFF;

黑色

这是纯黑色，用于颜色填充以及需要强烈对比的文本。

/* CSS */
color: #000000;

灰色

Material Design 中有 9 种不同程度的灰色，这些灰色在整个系统中广泛用于边框、分割线和背景颜色等。

/* CSS */
background-color: #F5F5F5;

扩展颜色

Material Design 中的扩展颜色系统由 Accent 调色板和 Primary 调色板组成。

Primary

Primary 调色板通常用于表示品牌和应用程序的重点颜色。自定义 Primary 调色板可以帮助界面具有品牌特色，同时也可以使应用程序看起来更加美观。

/* CSS */
color: #3F51B5;

Accent

Accent 调色板用于突出显示视觉元素，例如按钮、滑块和交互图标。通常建议选取鲜艳、明亮且具有鲜明对比的颜色。

/* CSS */
background-color: #FF4081;

###默认调色板

Material Design 还提供了一套默认调色板，其中包括多个选项，以满足各种设计需求。这是基于“认知重量”定位的，使用这个默认调色板可以获得一致性和可预测性。

/* CSS */
/* 在这里使用默认调色板 */
color: var(--mdc-theme-primary);

如何在前端中使用 Material Design 颜色

使用 Material Design 的颜色系统在前端应用开发中是很常见的。您可以将相应的 CSS 属性应用于任何 HTML 元素以匹配 Material Design 风格。

例如，在以下示例中，我们将一个背景颜色设置为主调色板的颜色：

<div style="background-color: #3F51B5; height: 100vh;"></div>

但是，这样做有一个缺点，即不利于维护。因此，更值得推荐的方法是指定颜色变量并在各个页面中使用它们。

/* CSS */
:host {
  --primary-color: #3F51B5;
}

background-color: var(--primary-color);

这种方法可以使颜色变得易于维护，如果你需要谨慎使用颜色并保持与 Material Design 组件的一致性。

结论

Material Design 颜色规范可以确保您的应用程序具有一致的外观和感觉，同时还可以确保正确地使用颜色和明亮度带来更好的可读性和用户体验。在前端应用程序中使用 Material Design 颜色是一个好习惯，并且可以在很大程度上提高用户体验。通过本文所述方法，在前端应用程序中有效地使用 Material Design 颜色，可以使开发人员使网站更具可读性和可扩展性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/673249e50bc820c5823cb781