Material Palette
Google Material Design primary colors
Color Swatches
#F44336rgb(244, 67, 54)
#2196F3rgb(33, 150, 243)
#4CAF50rgb(76, 175, 80)
#FF9800rgb(255, 152, 0)
#9C27B0rgb(156, 39, 176)
CSS Variables
:root {
--palette-1: #F44336;
--palette-2: #2196F3;
--palette-3: #4CAF50;
--palette-4: #FF9800;
--palette-5: #9C27B0;
}Tailwind Config
theme: {
extend: {
colors: {
palette: {
1: "#F44336",
2: "#2196F3",
3: "#4CAF50",
4: "#FF9800",
5: "#9C27B0",
},
},
},
},Usage Suggestions
- • Use as primary/secondary/accent colors in UI components
- • Apply for backgrounds, borders, and text contrast
- • Export to design tools (Figma, Sketch) via hex values
- • Combine with our Color Contrast Checker for accessibility