Material Design Color Palette
Google Material Design color reference.
Material Design Colors
Pick a color to see all formats
#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)Pick colors and get hex, RGB, HSL values. This free online how to use material design colors works right in your browser — no downloads, no sign-up, no limits.
Key Features
Live preview with instant visual feedback
Copy-ready CSS code for immediate use in projects
Interactive controls for precise adjustments
Works entirely in your browser — no installation needed
Free with unlimited use
Material Design Colors
Use the controls
Use the controls above to adjust your settings
Watch the preview
Watch the preview update in real time
Copy the generated
Copy the generated CSS code when satisfied
Paste the code
Paste the code into your project's stylesheet
Bookmark this tool
Bookmark this tool for future design work
Use Cases
Web designers creating stylesheets and themes
Developers needing quick CSS snippets
Prototyping UI designs before committing to code
Learning CSS through visual experimentation
Ensuring accessibility with proper contrast ratios
Frequently Asked Questions
Is the Material Design Color Palette free?
Yes, the Material Design Color Palette is 100% free with no limits, sign-up, or ads in results.
Can I use the generated code commercially?
Absolutely. All CSS and design code you generate is yours to use in any project.
Does the Material Design Color Palette work on mobile?
Yes, the tool is fully responsive, though a desktop provides the best experience for design work.
Tool Information
Related Tools You Might Like
Color Palette Generator from Image
Extract dominant colors from an image
RGB/HEX Converter
Convert between RGB and HEX color formats
CSS Gradient Generator
Create custom CSS gradients with preview
WCAG Contrast Checker
Check color contrast according to WCAG standards
Digital Signature Generator
Create stylized digital signatures with different fonts
Box Shadow Generator
Generate CSS box shadows
Surfboard Volume Calculator
Calculate the perfect surfboard volume based on your weight, experience level, and wave conditions.
Wave Height Converter
Convert between different wave height measurements (face height, Hawaiian scale, ocean swell).
Scuba Dive Planner
Plan your scuba dive with depth limits, bottom time, and safety decompression requirements.