Palette · 5 colours
Material Palette
The Material palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.
:root {
--color-1: #F44336;
--color-2: #2196F3;
--color-3: #4CAF50;
--color-4: #FFEB3B;
--color-5: #9C27B0;
}// tailwind.config.js
colors: {
"material-1": "#F44336",
"material-2": "#2196F3",
"material-3": "#4CAF50",
"material-4": "#FFEB3B",
"material-5": "#9C27B0",
}Readable text on each color
White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.
| Color | Best text | Contrast | WCAG |
|---|---|---|---|
| #F44336 | Near-black | 5.13:1 | AA |
| #2196F3 | Near-black | 6.05:1 | AA |
| #4CAF50 | Near-black | 6.80:1 | AA |
| #FFEB3B | Near-black | 15.47:1 | AA |
| #9C27B0 | White | 6.30:1 | AA |
These colours on each other
2 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \ background | #F44336 | #2196F3 | #4CAF50 | #FFEB3B | #9C27B0 |
|---|---|---|---|---|---|
| #F44336 | 1.18Fails | 1.32Fails | 3.02Large only | 1.71Fails | |
| #2196F3 | 1.18Fails | 1.12Fails | 2.56Fails | 2.02Fails | |
| #4CAF50 | 1.32Fails | 1.12Fails | 2.28Fails | 2.27Fails | |
| #FFEB3B | 3.02Large only | 2.56Fails | 2.28Fails | 5.16AA | |
| #9C27B0 | 1.71Fails | 2.02Fails | 2.27Fails | 5.16AA |
About this palette
The Material palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.