A study in blue
Material Blue 500
#2196F3
- Family
- Blue
- L
- 0.658
- C
- 0.169
- H
- 249°
Notes
Material Blue 500 is the hex Google's design team selected in 2014 as the default accent for Android Lollipop, the release that introduced Material Design. The value was tuned for legibility against white at button sizes rather than for body type, and the friendly mid-saturation became the dominant blue of 2010s app design - used in everything from Trello to early Google Workspace logos. In Material-themed projects it remains the canonical primary action colour. Outside that context it can feel dated against newer OKLCH-tuned blues. Body text against white falls below AA at body sizes; reserve text use for buttons and headlines 18px and above.
Palette built around Material Blue 500
Related colors
Frequently asked questions
What is Material Blue 500?
Material Blue 500 is the hex Google's design team selected in 2014 as the default accent for Android Lollipop, the release that introduced Material Design. The value was tuned for legibility against white at button sizes rather than for body type, and the friendly mid-saturation became the dominant blue of 2010s app design - used in everything from Trello to early Google Workspace logos. Its hex code is #2196F3.
What are the tints and shades of Material Blue 500?
uishades builds an 11-step OKLCH ramp for Material Blue 500 (#2196F3) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.
What colors pair well with Material Blue 500?
Its complementary color is #D07A00. Triadic partners are #E45D7C and #71A412; analogous neighbours are #7D82F6 and #00A4CB.
What are the OKLCH and RGB values of Material Blue 500?
Material Blue 500 is #2196F3 - OKLCH 0.658 0.169 249°, rgb(33 150 243), in the blue family.