Color

Transmitir significado a través del color. Ahora mismo se puede acceder a todos los colores en la especificación de diseño de Material Design.

El sistema de color Material Design se puede utilizar para crear un tema de color que refleje su marca o estilo.

Picking colors

Herramienta oficial de color

The Material Design team has also built an awesome palette configuration tool: material.io/resources/color/. This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.

The output can be fed into createTheme() function:

import { createTheme } from '@material-ui/core/styles';

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

Campo de pruebas

To test a material.io/design/color color scheme with the Material-UI documentation, simply select colors using the palette and sliders below. Como alternativa, se pueden escribir valores hexadecimales en los campos de text Primary (color primario) y Secondary (color secundario).

{
  palette: {
    primary: blue,
    secondary: pink,
  },
}

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

import { createTheme } from '@material-ui/core/styles';
import purple from '@material-ui/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.

Herramientas de la comunidad

• create-mui-theme: Is an online tool for creating Material-UI themes via Material Design Color Tool.
• material-ui-theme-editor: A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview. Includes basic site templates to show various components and how they are affected by the theme
• Material palette generator: The Material palette generator can be used to generate a palette for any color you input.

2014 Material Design color palettes

These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.

Términos importantes

• Palette: A palette is a collection of colors, i.e. hues and their shades. Material-UI proporciona todos los colores incluidos en las pautas de Material Design. Esta paleta de colores ha sido diseñada con colores que funcionan en armonía unos con otros.
• Hue" & "Shade: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "rojo 50" es el tono más claro de rojo (¡rosa!), mientras que "rojo 900" es el más oscuro. Además, la mayoría de los matices vienen con tonos de "acento", prefijados con una A.

Paleta de colores

Dado un HUE (matiz) (rojo, rosa, etc.) y una SHADE (tono) (500, 600, etc.) se puede importar el color así:

import HUE from '@material-ui/core/colors/HUE';

const color = HUE[SHADE];

Ejemplos

For instance, you can refer to complementary primary and accent colors, "red 500" and "purple A200" like so:

import purple from '@material-ui/core/colors/purple';
import red from '@material-ui/core/colors/red';

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