Advertise

Material Design Colors

The Material Design palette: 19 colors, shades 50–900 and accents.

About Material Design Colors

Every color of the Material Design palette with its shades 50 to 900 and the accent colors A100 to A700. Click a swatch to copy the HEX code, or export a whole color as CSS variables.

How to use

  1. Pick a color, type any color code (HEX, RGB, HSL, a CSS name…) or open an image.
  2. Adjust the options – the result updates instantly.
  3. Click any code or swatch to copy it, or send the color to another tool with Open in….

Everything runs in your browser: your colors and images are never uploaded or stored.

Related tools

HTML Color NamesAll 141 HTML / CSS color names with HEX and RGB codes. Web Safe ColorsThe classic 216 web-safe colors in one clickable chart. Flat UI ColorsThe 20 popular flat UI colors – Turquoise, Emerald, Peter River… Tailwind CSS ColorsThe Tailwind CSS default palette, 22 colors × 11 shades. HTML Color PickerPick any color and copy its HEX, RGB, HSL, HSV and CMYK codes. Color Wheel & HarmoniesFind complementary, analogous, triadic and other matching colors. Image Color PickerUpload a photo and click it to get the color of any pixel. HEX to RGBConvert a HEX color code to RGB (and RGBA).