Understanding Color

Why doesn't your application look the same across multiple devices? Why does your designer's mock look different on your computer? After learning what color really is, you will understand how to setup your design environment and how to use new APIs in Android O to manage colors properly and take advantage of wide color gamut displays.

Transcript

1. UNDERSTANDING COLOR @romainguy
2. UNDERSTANDING COLOR @romainguy
3. What is color?
4. A visual perception that can be described by hue, brightness and colorfulness
6. ⚛ ☢ ☀ ♨ 10-16 108 wavelength (m)
7. ⚛ ☢ ☀ ♨ 10-16 108 wavelength (m) 380 700 nanometers
8. 0 1 Short Medium Long
9. 0 1
10. ×
11. 0 1
12. ☀
13. ☀ ×
14. × ☀ ×
15. × ☀ ×
17. What is color?
18. For developers, a tuple of numbers in a color model with a color space
19. RGB CMYK L*a*b*
20. RGB
21. #ff436d
22. 255,67,109
23. 1.0,0.26,0.43
26. COLOR SPACE?
28. 3 primaries
29. 3 primaries white point
30. transfer functions 3 primaries white point
31. sRGB AdobeRGB ProPhotoRGB
32. Transfer functions?
34. sRGB P3 Adobe RGB sRGB
40. What you saw is how Android handles color spaces Colors are unmanaged
41. Source COLOR MANAGEMENT
42. Source Destination COLOR MANAGEMENT
43. New in O! Source Destination COLOR MANAGEMENT
44. Assign Convert
45. When in doubt… sRGB!
50. // ARGB in sRGB @ColorInt int c = 0xfff436d;
52. // Color instance in sRGB
 Color c = Color.valueOf(1.0f, 0.26f, 0.43f);
53. // Color instance in sRGB
 Color c = Color.valueOf(1.0f, 0.26f, 0.43f);
54. // Color instance in sRGB
 Color c = Color.valueOf(1.0f, 0.26f, 0.43f); // Color instance in Adobe RGB
 Color c = Color.valueOf(1.0f, 0.26f, 0.43f, 1.0f,
 ColorSpace.get(ColorSpace.Named.ADOBE_RGB));
55. // Color instance in sRGB
 Color c = Color.valueOf(1.0f, 0.26f, 0.43f); // Color instance in Adobe RGB
 Color c = Color.valueOf(1.0f, 0.26f, 0.43f, 1.0f,
 ColorSpace.get(ColorSpace.Named.ADOBE_RGB));
56. // Color instance in sRGB
 Color c = Color.valueOf(1.0f, 0.26f, 0.43f); // Color instance in Adobe RGB
 Color c = Color.valueOf(1.0f, 0.26f, 0.43f, 1.0f,
 ColorSpace.get(ColorSpace.Named.ADOBE_RGB)); // From Adobe RGB to Display P3
 Color r = c.convert(
 ColorSpace.get(ColorSpace.Named.DISPLAY_P3));
57. // RGBA in Adobe RGB
 @ColorLong long c = Color.pack(1.0f, 0.26f, 0.43f, 1.0f,
 ColorSpace.get(ColorSpace.Named.ADOBE_RGB));
58. Red, 16 bits Green, 16 bits Blue, 16 bits Alpha, 10 bits Colorspace, 6 bits @ColorLong
59. Red, 16 bits Green, 16 bits Blue, 16 bits Alpha, 10 bits Colorspace, 6 bits @ColorLong See android.util.Half
60. ColorSpace cs = ColorSpace.get(ColorSpace.Named.ADOBE_RGB);
 cs.isWideGamut(); // Returns true
 cs.getModel(); // Returns ColorSpace.Model.RGB // Cast to ColorSpace.Rgb to get primaries, white point, etc.
61. // Use connectors for conversions
 ColorSpace.Connector c = ColorSpace.connect(
 ColorSpace.get(ColorSpace.Named.SRGB),
 ColorSpace.get(ColorSpace.Named.ADOBE_RGB)
 );
 float[] adobeRGB = c.transform(1.0f, 0.26f, 0.43f);
62. // Change the white point with chromatic adaptation
 ColorSpace d50 = ColorSpace.adapt(
 ColorSpace.get(ColorSpace.Named.SRGB),
 ColorSpace.ILLUMINANT_D50
 );
63. Bitmap b = BitmapFactory.decodeStream(…);
 ColorSpace cs = b.getColorSpace();
 // Most likely, cs.isSrgb() == true
64. Bitmap b = BitmapFactory.decodeStream(…);
 ColorSpace cs = b.getColorSpace();
 // Most likely, cs.isSrgb() == true Bitmaps are always in the RGB color model
65. BitmapFactory.Options opts = new BitmapFactory.Options();
 // What a silly name opts.inJustDecodeBounds = true;
 
 Bitmap b = BitmapFactory.decodeStream(…, opts);
 ColorSpace cs = opts.outColorSpace;
66. BitmapFactory.Options opts = new BitmapFactory.Options();
 // Convert at load time opts.inPreferredColorSpace =
 ColorSpace.get(ColorSpace.Named.SRGB);
 
 Bitmap b = BitmapFactory.decodeStream(…, opts);
67. BitmapFactory.Options opts = new BitmapFactory.Options();
 // Convert at load time opts.inPreferredColorSpace =
 ColorSpace.get(ColorSpace.Named.SRGB);
 
 Bitmap b = BitmapFactory.decodeStream(…, opts); 16 bit bitmaps are always in linear extended sRGB
68. // Let’s create a wide gamut bitmap Bitmap b = Bitmap.createBitmap(
 1920, 1080,
 Bitmap.Config.ARGB_8888, false,
 ColorSpace.get(ColorSpace.Named.ADOBE_RGB)
 );
69. // sRGB out @ColorInt int c = b.getPixel(0, 0); // sRGB in
 b.setPixel(0, 0, 0xfff436d);
71. // Preserve color space
 ByteBuffer dst = ByteBuffer.allocate(b.getByteCount());
 b.copyPixelsToBuffer(dst);
 dst.rewind();

72. // Preserve color space
 ByteBuffer dst = ByteBuffer.allocate(b.getByteCount());
 b.copyPixelsToBuffer(dst);
 dst.rewind();
 // If the bitmap’s config is RGBA_F16
 // the byte buffer contains half floats
 // See android.util.Half
73. sRGB
74. non-sRGB sRGB
75. [Color Space] [Color space]
76. <activity
 android:colorMode="wideColorGamut" />
77. non-sRGB sRGB sRGB No wide gamut support ARGB_8888
78. non-sRGB extended sRGB sRGB Wide gamut support RGBA_F16
79. Extended sRGB? (scRGB)
80. res/*-widecg
82. Configuration c = getResources().getConfiguration();
 c.isScreenWideColorGamut();

83. Configuration c = getResources().getConfiguration();
 c.isScreenWideColorGamut();
 Display d = view.getDisplay();
 d.isWideColorGamut()
84. DON’T PANIC
85. DON’T PANIC —— — — — — — —— —
86. https://goo.gl/aeJc06 Learn more about transfer functions Starts at minute 29 android.graphics.ColorSpace.Rgb
87. https://goo.gl/5w7AQ2 Learn about banding and dithering Starts at minute 36
88. Questions