ToolHop.

ADVERT

Material Design Color Palette Tool

Browse Google’s Material Design color palettes. View all shades, copy hex codes instantly, and preview text on background colors.

How to use this tool

  1. Browse color families and click any swatch to copy its HEX value.
  2. Use the live preview block to check white and black text readability.
  3. Paste copied values into design files, CSS variables, or utility configs.

Palette coverage

  • Includes standard Material shades from 50 to 900 plus accent tiers where available.
  • Grouped by family to speed visual scanning during palette selection.
  • Click-to-copy workflow keeps color handoff fast and consistent.

Usage notes

  • Prefer consistent shade scales across UI states for a cohesive system.
  • Validate contrast before using lighter shades for text or controls.
  • Store selected swatches as semantic tokens instead of raw color names.

FAQ

Can I copy HEX codes directly from each swatch?
Yes. Click any swatch and its HEX value is copied to your clipboard.
Does the tool include accent colors?
Yes. Families that provide accent variants include A100 to A700 values.
Can I preview text on a selected color?
Yes. Selecting a swatch opens a sample block with both white and black text.

ADVERT

More like this

ADVERT