Android Color Management: What Developers and Designers Need to Know

Nick Butcher
Nov 13, 2017 · 5 min read

In the recent Oreo release, Android gained initial support for color management — which helps match color outputs across devices. With the update, Android devices can now display colors outside of the sRGB color gamut. If you’re not familiar with color profiles or what wide color gamuts are, then I highly recommend this video from Google I/O on understanding color:

tl;dw; color management ensures that colors look the same on different displays. For example the color #ff0000 (pure red for those that don’t read hex codes) may appear differently depending upon the screen technology showing it — some screens are capable of showing more saturated or intense colors than others. Saying #ff0000 in sRGB specifies a specific shade of red (in the sRGB color space) so color managed displays can produce the exact desired color.

In this post I’d like to outline what Android app designers and developers need to know about these changes.

Displaying wide color gamut images

<activity
android:name=".WideColorActivity"
android:colorMode="wideColorGamut" />

You can also set this programmatically but you need to do so during onCreate before your Window is created. Wide color gamut support is opt-in as it requires more system resources (which might result in a performance decrease in your app):

When wide color gamut mode is enabled, the activity’s window uses more memory and GPU processing for screen composition. Before enabling wide color gamut mode, you should carefully consider if the activity truly benefits from it. For example, an activity that displays photos in fullscreen is a good candidate for wide color gamut mode, but an activity that shows small thumbnails is not.” — developer documentation

Note that if you are using a single Activity architecture then it may make sense to break out wide color gamut image display into a new Activity.

Here’s an example showing two activities displaying the same wide color gamut test image (a PNG with the Display P3 color profile embedded), the top activity declares a wide color gamut color mode, the bottom does not.

Image for post
Image for post
Activities displaying wide color gamut content need to opt in to wide color mode (top)

Color accurate rendering

Many applications have desaturated their assets to compensate for this stretching. As a consequence, colors may appear muted when displayed on devices with calibrated displays. That is on color-accurate devices, such as the Pixel 2, desaturated assets will appear less vivid than on non-accurate displays. Once color-accurate rendering is widespread, app makers can stop altering assets and be confident that their content displays as intended. Until then however, there are some steps that you can take to ensure that your content looks great on both color accurate displays, and on non-color-managed devices.

Android 8.0 adds a new widecg resource qualifier which you can use to alter colors on devices whose screen has a wide color gamut and wide color gamut rendering is supported (also nowidecg for the inverse).

Note that wide color gamut support is distinct from whether the current activity is running in wideColorGamut color mode. That is this qualifier will apply if the device supports color accurate rendering, irrespective of whether the activity is running in wide color mode.

For example an application may declare a base palette of colors in res/values/colors.xml:

<!-— desaturated colors used on non color accurate displays -->
<color name=”palette1">#5bc3cc</color>
<color name=”palette2">#302c54</color>
<color name=”palette3">#c7416b</color>
<color name=”palette4">#e37b5b</color>
<color name=”palette5">#ffd64f</color>

…and an alternate set in res/values-widecg/colors.xml:

<!-— desired colors as rendered on color accurate displays -->
<color name=”palette1">#36c1cd</color>
<color name=”palette2">#251f55</color>
<color name=”palette3">#c8144e</color>
<color name=”palette4">#e4572e</color>
<color name=”palette5">#ffc914</color>
Image for post
Image for post
Provide different colors to be used on color accurate (left) and older devices

You can use the same technique with raster assets (e.g. res/drawable-widecg-mdpi/foo.png) but this will require shipping near-duplicate assets so it may not be worth the trade-off of increasing the size of your app. Consider moving to vector assets which can be colored dynamically.

Wider support coming

The reality of modern displays is that designers and developers now need to have an understanding of color management and how to apply it within their app. As more devices ship with wide gamut displays and color-accurate rendering, it’s important to get ahead of the wave and update your apps to provide the best experience. We consider this the best way to deliver a great experience to your users where the colors they see are those you intended.

Related reading

Google Design

Stories by Googlers on the people, product, and practice of UX at Google

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store