Understanding Color

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.

237be48129b762b31847d6167597366d?s=128

Romain Guy

May 18, 2017
Tweet

Transcript

  1. 5.
  2. 9.

    0 1

  3. 10.

    ×

  4. 11.

    0 1

  5. 12.

  6. 13.
  7. 14.
  8. 15.
  9. 16.
  10. 20.

    RGB

  11. 21.
  12. 24.
  13. 25.
  14. 27.
  15. 33.
  16. 35.
  17. 36.
  18. 37.
  19. 38.
  20. 39.
  21. 46.
  22. 47.
  23. 48.
  24. 49.
  25. 51.
  26. 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));
  27. 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));
  28. 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));
  29. 57.

    // RGBA in Adobe RGB
 @ColorLong long c = Color.pack(1.0f,

    0.26f, 0.43f, 1.0f,
 ColorSpace.get(ColorSpace.Named.ADOBE_RGB));
  30. 58.

    Red, 16 bits Green, 16 bits Blue, 16 bits Alpha,

    10 bits Colorspace, 6 bits @ColorLong
  31. 59.

    Red, 16 bits Green, 16 bits Blue, 16 bits Alpha,

    10 bits Colorspace, 6 bits @ColorLong See android.util.Half
  32. 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.
  33. 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);
  34. 62.

    // Change the white point with chromatic adaptation
 ColorSpace d50

    = ColorSpace.adapt(
 ColorSpace.get(ColorSpace.Named.SRGB),
 ColorSpace.ILLUMINANT_D50
 );
  35. 64.

    Bitmap b = BitmapFactory.decodeStream(…);
 ColorSpace cs = b.getColorSpace();
 // Most

    likely, cs.isSrgb() == true Bitmaps are always in the RGB color model
  36. 65.

    BitmapFactory.Options opts = new BitmapFactory.Options();
 // What a silly name

    opts.inJustDecodeBounds = true;
 
 Bitmap b = BitmapFactory.decodeStream(…, opts);
 ColorSpace cs = opts.outColorSpace;
  37. 66.

    BitmapFactory.Options opts = new BitmapFactory.Options();
 // Convert at load time

    opts.inPreferredColorSpace =
 ColorSpace.get(ColorSpace.Named.SRGB);
 
 Bitmap b = BitmapFactory.decodeStream(…, opts);
  38. 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
  39. 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)
 );
  40. 69.

    // sRGB out @ColorInt int c = b.getPixel(0, 0); //

    sRGB in
 b.setPixel(0, 0, 0xfff436d);
  41. 70.
  42. 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
  43. 73.
  44. 81.
  45. 88.