Material Design Colors: Google Palette Guide

Material Design Color System

Material Design is Google's design system, providing a palette of 19 primary colors with 14 shades each (from 50 to 900 + accent shades A100-A700).

Palette Structure

Each color has a shade scale:

Color Usage Rules

Primary Color

Used for toolbars, large blocks, and the main accent. Choose shade 500.

Secondary Color

For action buttons (FAB), toggles, links. Usually accent shade A200.

Background Colors

Light shades (50-100) for card and page backgrounds.

Material Design 3

The new version (Material You) automatically generates a palette from a single color, creating tonal groups and surfaces.

See also: Tailwind CSS Colors, Color Wheel, Contrast Checker