色彩

透過色彩傳達意義。開箱即用，您可以存取 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 色彩方案，只需使用下方的調色盤和滑桿選擇色彩即可。或者，您也可以在「主要」和「次要」文字欄位中輸入十六進位值。

色彩範例中顯示的輸出可以直接貼到 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() 計算，如主題自訂章節中所述。

如果您使用預設的主要和/或次要色調，那麼透過提供色彩物件，createTheme() 將使用材質色彩中適當的色調作為 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];

範例

例如，您可以像這樣參考互補的主要色彩和強調色，「red 500」和「purple 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 標準，您可以按照主題自訂章節中的說明，提高您的最小對比度。