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.

More palettes