Color 颜色

颜色承载了不同的寓意。 Out of the box you get access to all colors in the Material Design guidelines.

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

选取颜色

官方的色彩工具

Material Design 团队也搭建了一个非常棒的调色板配置工具： material.io/resources/color/。 您可以用它来为 UI 创建调色板，以及检测任何颜色组合的无障碍水平。

The output can be fed into createTheme() function:

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

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

练习

若想用 Material-UI 文档来测试 material.io/design/color 的配色方案，只需使用下面的调色板和滑块来选取颜色即可。 另外，您也可以在主要（Primary）和次要（Secondary）文本字段中输入十六进制（hex）值。

The output shown in the color sample can be pasted directly into a createTheme() function (to be used with ThemeProvider):

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

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

Only the main shades need be provided (unless you wish to further customize light, dark or contrastText), as the other colors will be calculated by createTheme(), as described in the Theme customization section.

If you are using the default primary and / or secondary shades then by providing the color object, createTheme() will use the appropriate shades from the material color for main, light and dark.

社区提供的一些工具

• mui-theme-creator：一个帮助设计和定制 Material-UI 组件库主题的工具。 包括基本的网站模板，并且展示各种组件及其受主题影响的方式。
• Material palette generator：它可用于通过您输入的任何颜色生成一系列的调色板。

2014 Material Design 调色板

这些调色板最初由 Material Design 于 2014 年创建，由一些旨在和谐搭配的颜色组成，您可以用它们来开发品牌调色板。 要生成您专属的颜色协调的调色板，请使用调色板生成工具。

一些重要的术语

• Palette：调色板是颜色的集合，即色调及其深度。 MUI provides all colors from the Material Design guidelines. This color palette has been designed with colors that work harmoniously with each other.
• Hue & Shade：调色板中的单一颜色由色调（如“red”）和深度（如“500”）组成。 "rad 50" 是红色的最浅的阴影（_ 粉红色！ _），而 "red 900" 是最暗的深红色。 除此之外，大多数的色调都带有以 A 为前缀的强调（accent）色调。

调色板

若给定了一种色调（如红色，粉红色等）以及一个阴影 （500，600 等），你可以这样导入颜色：

import HUE from '@mui/core/colors/HUE';

const color = HUE[SHADE];

例子

例如：您可以参考互补的主色和重点色，像 "red 500" 和 "purple A200" 这样的：

import purple from '@mui/core/colors/purple';
import red from '@mui/core/colors/red';

const primary = red[500]; // #f44336
const accent = purple['A200']; // #e040fb
const accent = purple.A200; // #e040fb（替代方法）