Style Color

Color

Material design for Android Wear uses a darker color palette.

Darker color palettes Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Defining your palette

Darker colors are more suitable for social environments as they make screens less obtrusive. When used in OLED displays, darker colors also better preserve battery life.

To create a dark color palette for your app, modify only the brightness value of your app’s primary color, leaving the hue and saturation values intact. Grays should be avoided, as any tint of color is more battery-efficient than any shade of gray or white.

UI regions

The example palette displayed here depicts a dark color palette for Wear:

UI region

Suggested brightness value

1 App color

Default color palette value

2 Dark background

15%

3 Lighter background

30%

4 Lighter UI element

40%

5 Lighter UI element

55%

6 Active UI element

65%

7 Accent

100%

Battery friendly colors

To extract different colors from a source color, you may adjust the brightness value of that source color.

Use the darker spectrum of colors for large parts of the UI, such as the background color. Reserve lighter colors for accents and UI elements.

Battery friendly colors

Darker colors extracted from the app color may be applied across UI elements.

Color correction Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The following hues require color correction for accessible use on watch faces and apps:

Yellow: Yellow hues between 45°-75° on the color spectrum should use the hue, saturation, and brightness (HSB) values in this diagram for dark backgrounds (UI region 2 and 3 above).

Color correction

Color adjustments for yellow hues between 45° and 75°

45°-50°

50°-55°

55°-60°

60°-65°

55°-70°

70°-75°

Lighter background

Hue

18°

22°

29°

59°

141°

161°

Saturation

68%

44%

23%

5%

15%

41%

Brightness

30%

30%

30%

30%

30%

30%

Dark background

Hue

18°

22°

29°

59°

141°

161°

Saturation

68%

44%

23%

5%

15%

41%

Brightness

15%

15%

15%

15%

15%

15%

Dark color palette for Wear Expand and collapse content An arrow that points down when collapsed and points up when expanded.

This color palette is optimized to preserve battery life.

Red 500

Red color palette

Pink 500

Pink color palette

Purple 500

Purple color palette

Deep Purple 500

Deep purple color palette

Indigo 500

Indigo color palette

Blue 500

Blue color palette

Light Blue 500

Color-corrected for blue range

Cyan 500

Cyan color palette

Teal 500

Teal color palette

Green 500

Green color palette

LIght Green 500

Light green color palette

Lime 500

Lime color palette color-corrected for yellow range

Yellow 500

Yellow color palette color-corrected for yellow range

Amber 500

Amber color palette color-corrected for yellow range

Orange 500

Orange color palette

Deep Orange 500

Deep orange color palette

Brown 500

Brown color palette

Grey 500

Grey color palette

Blue Gray 500

Blue gray color palette

Black and White 500

Black and white color palette