UI Shades

A study in teal

Material Cyan 500

#00BCD4

Family
Teal
L
0.729
C
0.126
H
211°

Notes

Material Cyan 500 is the bright teal-blue used as an accent in Material Design 2. The hex carries enough chroma to function as a primary or strong secondary, one of the friendlier cyans in popular design systems - neither too pale nor too saturated for typical UI use. Common as a primary button colour in Material-themed designs, or as a secondary accent in palettes that need a bright cool tone. Against white it passes contrast for headlines but is borderline for body text, falling below AA below 18px.

#01bcd4
Closest named color: Material Cyan 500
#01bcd4
oklch(0.729 0.126 210.83)
rgb(1 188 212)
hsl(186.8 99.1% 41.8%)
Share
#e9ffff
#d7fcff
#acf3ff
#77e7fc
#01bcd4
#009fb7
#008499
#006d7f
#004f5e
#003641
#001d25

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Material Cyan 500

Cross-reference
Q&A

Frequently asked questions

What is Material Cyan 500?

Material Cyan 500 is the bright teal-blue used as an accent in Material Design 2. The hex carries enough chroma to function as a primary or strong secondary, one of the friendlier cyans in popular design systems - neither too pale nor too saturated for typical UI use. Its hex code is #00BCD4.

What are the tints and shades of Material Cyan 500?

uishades builds an 11-step OKLCH ramp for Material Cyan 500 (#00BCD4) - 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 Cyan 500?

Its complementary color is #EC8776. Triadic partners are #D589CC and #C5A43B; analogous neighbours are #54B1EF and #20C1AC.

What are the OKLCH and RGB values of Material Cyan 500?

Material Cyan 500 is #00BCD4 - OKLCH 0.729 0.126 211°, rgb(0 188 212), in the teal family.