Material Design Color Picker Free Online Tool 2026

Last updated March 22, 2026

Material Design Color Picker Examples

The Material Design Color Picker provides access to Google's complete Material Design color palette. Below are examples of color values, shade scales, and theme configurations.

Blue Palette — All Shades

Blue 50:   #E3F2FD   (text: #000000)
Blue 100:  #BBDEFB   (text: #000000)
Blue 200:  #90CAF9   (text: #000000)
Blue 300:  #64B5F6   (text: #000000)
Blue 400:  #42A5F5   (text: #000000)
Blue 500:  #2196F3   (text: #FFFFFF) ← primary
Blue 600:  #1E88E5   (text: #FFFFFF)
Blue 700:  #1976D2   (text: #FFFFFF)
Blue 800:  #1565C0   (text: #FFFFFF)
Blue 900:  #0D47A1   (text: #FFFFFF)

Accent:
Blue A100: #82B1FF   (text: #000000)
Blue A200: #448AFF   (text: #FFFFFF)
Blue A400: #2979FF   (text: #FFFFFF)
Blue A700: #2962FF   (text: #FFFFFF)

Red Palette

Red 50:   #FFEBEE
Red 100:  #FFCDD2
Red 200:  #EF9A9A
Red 300:  #E57373
Red 400:  #EF5350
Red 500:  #F44336   ← primary
Red 600:  #E53935
Red 700:  #D32F2F
Red 800:  #C62828
Red 900:  #B71C1C

Red A100: #FF8A80
Red A200: #FF5252
Red A400: #FF1744
Red A700: #D50000

Material Design Theme — CSS Custom Properties

:root {
  /* Primary: Indigo */
  --md-primary-50:  #E8EAF6;
  --md-primary-100: #C5CAE9;
  --md-primary-200: #9FA8DA;
  --md-primary-300: #7986CB;
  --md-primary-400: #5C6BC0;
  --md-primary-500: #3F51B5;
  --md-primary-600: #3949AB;
  --md-primary-700: #303F9F;
  --md-primary-800: #283593;
  --md-primary-900: #1A237E;

  /* Accent: Pink */
  --md-accent-100: #FF80AB;
  --md-accent-200: #FF4081;
  --md-accent-400: #F50057;
  --md-accent-700: #C51162;
}

Android XML Theme

<!-- res/values/colors.xml -->
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorPrimaryLight">#C5CAE9</color>
</resources>

Flutter Theme Data

ThemeData(
  primarySwatch: Colors.indigo,
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xFF3F51B5),
    secondary: const Color(0xFFFF4081),
  ),
)

Material UI (React) Theme

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

const theme = createTheme({
  palette: {
    primary: {
      light: '#7986CB',
      main: '#3F51B5',
      dark: '#303F9F',
      contrastText: '#FFFFFF',
    },
    secondary: {
      light: '#FF80AB',
      main: '#FF4081',
      dark: '#F50057',
      contrastText: '#FFFFFF',
    },
  },
});

Common Primary + Accent Pairings

• Indigo 500 + Pink A200 — classic Material Design pairing
• Blue 700 + Orange A400 — high contrast, energetic
• Teal 500 + Deep Orange A200 — warm and cool balance
• Purple 600 + Lime A400 — bold and vibrant
• Blue Grey 700 + Cyan A400 — professional and modern

Dark Theme Color Mapping

Light theme:
  Surface:    #FFFFFF
  Background: #FAFAFA
  Primary:    #3F51B5

Dark theme:
  Surface:    #121212
  Background: #1E1E1E
  Primary:    #7986CB  (lighter shade for dark backgrounds)

Common Use Cases

• Building Android apps with official Material Design colors
• Configuring Material UI, Vuetify, or Angular Material themes
• Finding exact hex values for Material Design swatches
• Choosing primary and accent color combinations
• Exporting theme configurations for Android, Flutter, or web
• Verifying text color contrast for each swatch

Browse all 19 color families with their full shade ranges. Click any swatch to copy the hex code or export a complete theme configuration for your platform.