Material Palette

CSS variables

:root {
  --color-1: #F44336;
  --color-2: #2196F3;
  --color-3: #4CAF50;
  --color-4: #FFEB3B;
  --color-5: #9C27B0;
}

Tailwind config

// tailwind.config.js
colors: {
  "material-1": "#F44336",
  "material-2": "#2196F3",
  "material-3": "#4CAF50",
  "material-4": "#FFEB3B",
  "material-5": "#9C27B0",
}

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.

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.

#F44336Near-black5.13:1AA

#2196F3Near-black6.05:1AA

#4CAF50Near-black6.80:1AA

#FFEB3BNear-black15.47:1AA

#9C27B0White6.30:1AA

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	·

More palettes

Gradients in the same range

Sunset Color Wheel Rose Gold

Material Palette

Related

Gradients in the same range