颜色

通过颜色传达意义。开箱即用，您可以访问 Material Design 指南中的所有颜色。

Material Design 颜色系统 可用于创建反映您的品牌或风格的颜色主题。

选择颜色

官方颜色工具

Material Design 团队还构建了一个很棒的调色板配置工具：material.io/resources/color/。这可以帮助您为您的 UI 创建调色板，并衡量任何颜色组合的可访问性级别。

输出可以输入到 createTheme() 函数中

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      light: '#757ce8',
      main: '#3f50b5',
      dark: '#002884',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});

Playground

要使用 Material UI 文档测试 material.io/design/color 颜色方案，只需使用下面的调色板和滑块选择颜色。或者，您可以在 Primary 和 Secondary 文本字段中输入十六进制值。

颜色样本中显示的输出可以直接粘贴到 createTheme() 函数中（与 ThemeProvider 一起使用）

import { createTheme } from '@mui/material/styles';
import { purple } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: '#f44336',
    },
  },
});

只需要提供 main 色调（除非您希望进一步自定义 light、dark 或 contrastText），因为其他颜色将由 createTheme() 计算，如 主题定制 部分所述。

如果您使用默认的 primary 和/或 secondary 色调，那么通过提供颜色对象，createTheme() 将使用 material 颜色中适合 main、light 和 dark 的色调。

社区工具

• mui-theme-creator：一个帮助设计和定制 Material UI 组件库主题的工具。包含基本站点模板，以显示各种组件以及它们如何受到主题的影响
• Material 调色板生成器：Material 调色板生成器可用于为您输入的任何颜色生成调色板。

2014 Material Design 颜色调色板

这些颜色调色板最初由 Material Design 于 2014 年创建，由旨在和谐协作的颜色组成，可用于开发您的品牌调色板。要生成您自己的和谐调色板，请使用调色板生成工具。

重要术语

• 调色板：调色板是颜色的集合，即色调及其阴影。Material UI 提供了 Material Design 指南中的所有颜色。此颜色调色板 经过设计，其中的颜色可以彼此和谐地工作。
• 色调 & 阴影：调色板中的单个颜色由色调（例如“红色”）和阴影（例如“500”）组成。“红色 50”是红色最浅的阴影（粉红色！），而“红色 900”是最深的阴影。此外，大多数色调都带有“强调色”阴影，前缀为 A。

颜色调色板

给定一个色调（红色、粉红色等）和一个阴影（500、600 等），您可以像这样导入颜色

import { red } from '@mui/material/colors';

const color = red[500];

示例

例如，您可以像这样引用互补的 primary 和 accent 颜色，“红色 500”和“紫色 A200”

import { purple, red } from '@mui/material/colors';

const primary = red[500]; // #f44336
const accent = purple['A200']; // #e040fb
const accent = purple.A200; // #e040fb (alternative method)

可访问性

WCAG 2.1 规则 1.4.3 建议您文本和文本图像的视觉呈现具有至少 4.5:1 的对比度。Material UI 目前仅强制执行 3:1 的对比度。如果您想符合 WCAG 2.1 AA 标准，您可以按照 主题定制 部分中的描述增加您的最小对比度。