Hex Calculator

Material Design to Hex

Look up the official hex code for any Google Material Design 500-tier color name, like Blue 500, Red 500, Amber 500, or Deep Purple 500.

Hex result
#2196F3

How Material Design to Hex Conversion Works

Google's Material Design system defines 19 base hues, each with an official 500-tier hex value from m2.material.io. This tool looks up your input name (case-insensitive, e.g. "Blue 500") against that fixed set and returns the matching hex code.

Material Design to Hex Example, Step by Step

Blue 500 = #2196F3

Blue 500 = #2196F3

Input: "Blue 500"

Lowercase and compare against 19 known hue names
Match found: Blue 500

Result: #2196F3
StepDescriptionResult
Take the input name"Blue 500"input string
Normalize casinglowercase for comparison"blue 500"
Match against the 19 hue namesexact string matchfound: Blue 500
Return the hex valueBlue 500's official hex#2196F3

The lookup requires an exact name match including the '500' suffix — entering just 'Blue' or a different tier like 'Blue 700' won't resolve, since only the 500-tier values are stored.

Common Mistakes With Material Design to Hex

  • Leaving off the "500" suffix, since the lookup matches the full name including the tier number.
  • Entering a different tonal shade (like 300 or 700) that isn't part of this base 500-tier set.
  • Mixing up similarly-named hues, like Purple 500 vs. Deep Purple 500, which have different hex values.

Frequently Asked Questions

Which Material Design colors does this tool support?

All 19 official 500-tier hues from m2.material.io: Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, and Blue Grey.

How do I format the color name?

Use the hue name plus "500", like "Blue 500" or "Deep Purple 500". The lookup is case-insensitive, so "blue 500" also works.

What's the hex value of Material Blue 500?

#2196F3 — the official Material Design Blue 500 value.

What happens if I enter a shade other than 500, like Blue 300?

It won't match — this tool only covers the base 500-tier value for each of the 19 hues, not the full 50-900 tonal range.

What happens if I misspell a color name?

The tool returns an error asking you to check the spelling, since it requires an exact match against the 19 known hue names.

Related Tools