Material Design Colors

Generate Material Design color palettes. Create primary, secondary, and accent colors following Google Material guidelines.

Select Color Family

blue PaletteClick to copy

Tailwind Usage

bg-blue-500
text-blue-600
border-blue-300

Material Design

Material Design uses these color palettes for consistent UI theming. Primary: 500, Primary Dark: 700, Accent: A200

All Shades

#E3F2FD

#BBDEFB

100

#90CAF9

200

#64B5F6

300

#42A5F5

400

#2196F3

500

#1E88E5

600

#1976D2

700

#1565C0

800

#0D47A1

900

Material Design Color System

Google's Material Design uses a structured color system with primary, secondary, and surface colors. Each color has tones from 50 to 900, allowing consistent theming across your app.

Primary

Main brand color displayed most frequently across screens and components.

Secondary

Accent color that emphasizes key elements like buttons and controls.

Surface

Background colors for cards, sheets, and menus.

All Tools

Color Palette Generator HEX to RGB Converter RGB to HEX Converter HSL Color Converter Tailwind Color Generator Online Color Picker Dominant Color Extractor Image Color Analyzer Palette from URL Color Harmony Generator Brand Color Extractor Material Design Colors

QuickBit Tools

Free color palette generator tools for designers and developers.