Color System

Material-UI's color system provides a comprehensive palette based on Material Design guidelines with consistent color values across all hues and accessibility-friendly combinations.

Color Palette Structure

Each color in the Material-UI palette follows a consistent structure with main color variants and accent colors.

interface Color {
  50: string;   // Lightest shade
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;  // Main color
  600: string;
  700: string;
  800: string;
  900: string;  // Darkest shade
  A100: string; // Accent color variant
  A200: string; // Accent color variant
  A400: string; // Accent color variant
  A700: string; // Accent color variant
}

Capabilities

Common Colors

Basic black and white colors used throughout the Material Design system.

interface CommonColors {
  black: string; // '#000'
  white: string; // '#fff'
}

const common: CommonColors;

Usage Examples:

import { common } from '@material-ui/core/colors';

const theme = createMuiTheme({
  palette: {
    background: {
      paper: common.white,
      default: '#f5f5f5',
    },
    text: {
      primary: common.black,
    },
  },
});

Red Color Palette

Red color variants following Material Design specifications.

const red: Color;

Red color values:

• red[50]: '#ffebee'
• red[100]: '#ffcdd2'
• red[200]: '#ef9a9a'
• red[300]: '#e57373'
• red[400]: '#ef5350'
• red[500]: '#f44336' (main)
• red[600]: '#e53935'
• red[700]: '#d32f2f'
• red[800]: '#c62828'
• red[900]: '#b71c1c'
• red.A100: '#ff8a80'
• red.A200: '#ff5252'
• red.A400: '#ff1744'
• red.A700: '#d50000'

Pink Color Palette

Pink color variants following Material Design specifications.

const pink: Color;

Purple Color Palette

Purple color variants following Material Design specifications.

const purple: Color;

Deep Purple Color Palette

Deep purple color variants following Material Design specifications.

const deepPurple: Color;

Indigo Color Palette

Indigo color variants following Material Design specifications.

const indigo: Color;

Blue Color Palette

Blue color variants following Material Design specifications.

const blue: Color;

Blue color values:

• blue[50]: '#e3f2fd'
• blue[100]: '#bbdefb'
• blue[200]: '#90caf9'
• blue[300]: '#64b5f6'
• blue[400]: '#42a5f5'
• blue[500]: '#2196f3' (main)
• blue[600]: '#1e88e5'
• blue[700]: '#1976d2'
• blue[800]: '#1565c0'
• blue[900]: '#0d47a1'
• blue.A100: '#82b1ff'
• blue.A200: '#448aff'
• blue.A400: '#2979ff'
• blue.A700: '#2962ff'

Light Blue Color Palette

Light blue color variants following Material Design specifications.

const lightBlue: Color;

Cyan Color Palette

Cyan color variants following Material Design specifications.

const cyan: Color;

Teal Color Palette

Teal color variants following Material Design specifications.

const teal: Color;

Green Color Palette

Green color variants following Material Design specifications.

const green: Color;

Green color values:

• green[50]: '#e8f5e8'
• green[100]: '#c8e6c9'
• green[200]: '#a5d6a7'
• green[300]: '#81c784'
• green[400]: '#66bb6a'
• green[500]: '#4caf50' (main)
• green[600]: '#43a047'
• green[700]: '#388e3c'
• green[800]: '#2e7d32'
• green[900]: '#1b5e20'
• green.A100: '#b9f6ca'
• green.A200: '#69f0ae'
• green.A400: '#00e676'
• green.A700: '#00c853'

Light Green Color Palette

Light green color variants following Material Design specifications.

const lightGreen: Color;

Lime Color Palette

Lime color variants following Material Design specifications.

const lime: Color;

Yellow Color Palette

Yellow color variants following Material Design specifications.

const yellow: Color;

Amber Color Palette

Amber color variants following Material Design specifications.

const amber: Color;

Orange Color Palette

Orange color variants following Material Design specifications.

const orange: Color;

Deep Orange Color Palette

Deep orange color variants following Material Design specifications.

const deepOrange: Color;

Brown Color Palette

Brown color variants following Material Design specifications.

const brown: Color;

Grey Color Palette

Grey color variants following Material Design specifications.

const grey: Color;

Grey color values:

• grey[50]: '#fafafa'
• grey[100]: '#f5f5f5'
• grey[200]: '#eeeeee'
• grey[300]: '#e0e0e0'
• grey[400]: '#bdbdbd'
• grey[500]: '#9e9e9e' (main)
• grey[600]: '#757575'
• grey[700]: '#616161'
• grey[800]: '#424242'
• grey[900]: '#212121'
• Note: Grey palette does not include accent colors (A100-A700)

Blue Grey Color Palette

Blue grey color variants following Material Design specifications.

const blueGrey: Color;

Usage Examples

Basic Color Usage

import { red, blue, green } from '@material-ui/core/colors';

// Use main colors (500 variants)
const primaryColor = blue[500];    // '#2196f3'
const secondaryColor = red[500];   // '#f44336'
const successColor = green[500];   // '#4caf50'

// Use lighter/darker variants
const lightBackground = blue[50];  // '#e3f2fd'
const darkBackground = blue[900];  // '#0d47a1'

// Use accent colors
const accentColor = blue.A400;     // '#2979ff'

Theme Integration

import { createMuiTheme } from '@material-ui/core/styles';
import { blue, pink, red } from '@material-ui/core/colors';

const theme = createMuiTheme({
  palette: {
    primary: {
      light: blue[300],
      main: blue[500],
      dark: blue[700],
      contrastText: '#fff',
    },
    secondary: {
      light: pink[300],
      main: pink[500],
      dark: pink[700],
      contrastText: '#fff',
    },
    error: {
      light: red[300],
      main: red[500],
      dark: red[700],
      contrastText: '#fff',
    },
  },
});

Component Color Props

import { Button, Chip } from '@material-ui/core';
import { green } from '@material-ui/core/colors';

// Using palette colors in component styles
const useStyles = makeStyles((theme) => ({
  successButton: {
    backgroundColor: green[500],
    color: theme.palette.getContrastText(green[500]),
    '&:hover': {
      backgroundColor: green[700],
    },
  },
}));

// Direct style application
<Button style={{ backgroundColor: green[500], color: 'white' }}>
  Success Action
</Button>

Custom Color Variants

import { amber, deepOrange } from '@material-ui/core/colors';

const theme = createMuiTheme({
  palette: {
    // Extend theme with custom colors
    warning: {
      light: amber[300],
      main: amber[500],
      dark: amber[700],
      contrastText: 'rgba(0, 0, 0, 0.87)',
    },
    info: {
      light: deepOrange[300],
      main: deepOrange[500],
      dark: deepOrange[700],
      contrastText: '#fff',
    },
  },
});

Accessibility Considerations

Material-UI colors are designed with accessibility in mind, providing sufficient contrast ratios when used properly:

import { grey, blue } from '@material-ui/core/colors';

// Good contrast combinations
const goodContrast = {
  background: grey[50],   // Light background
  text: grey[900],        // Dark text
};

const primaryButton = {
  background: blue[500],  // Blue background
  text: '#fff',          // White text (high contrast)
};

// Use theme.palette.getContrastText() for automatic contrast text selection
const theme = createMuiTheme();
const contrastText = theme.palette.getContrastText(blue[500]); // Returns '#fff'

Color Selection Guidelines

1. Primary Color: Choose from blue, indigo, or other vibrant colors for main brand elements

2. Secondary Color: Select complementary colors like pink, red, or purple for accent elements

3. Neutral Colors: Use grey variants for text, borders, and background elements

4. Semantic Colors:

   • Success: green variants
   • Warning: amber/yellow variants
   • Error: red variants
   • Info: blue/cyan variants

5. Shade Selection:

   • 50-200: Very light backgrounds, hover states
   • 300-400: Light elements, disabled states
   • 500: Main brand colors
   • 600-700: Dark variants for hover/active states
   • 800-900: Very dark elements, high emphasis text
   • A100-A700: Accent colors for special emphasis