Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Romain Guy

May 18, 2017
Tweet

More Decks by Romain Guy

Other Decks in Programming

Transcript

  1. 0 1

  2. ×

  3. 0 1

  4. RGB

  5. // 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));
  6. // 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));
  7. // 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));
  8. // RGBA in Adobe RGB
 @ColorLong long c = Color.pack(1.0f,

    0.26f, 0.43f, 1.0f,
 ColorSpace.get(ColorSpace.Named.ADOBE_RGB));
  9. Red, 16 bits Green, 16 bits Blue, 16 bits Alpha,

    10 bits Colorspace, 6 bits @ColorLong
  10. Red, 16 bits Green, 16 bits Blue, 16 bits Alpha,

    10 bits Colorspace, 6 bits @ColorLong See android.util.Half
  11. 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.
  12. // 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);
  13. // Change the white point with chromatic adaptation
 ColorSpace d50

    = ColorSpace.adapt(
 ColorSpace.get(ColorSpace.Named.SRGB),
 ColorSpace.ILLUMINANT_D50
 );
  14. Bitmap b = BitmapFactory.decodeStream(…);
 ColorSpace cs = b.getColorSpace();
 // Most

    likely, cs.isSrgb() == true Bitmaps are always in the RGB color model
  15. BitmapFactory.Options opts = new BitmapFactory.Options();
 // What a silly name

    opts.inJustDecodeBounds = true;
 
 Bitmap b = BitmapFactory.decodeStream(…, opts);
 ColorSpace cs = opts.outColorSpace;
  16. BitmapFactory.Options opts = new BitmapFactory.Options();
 // Convert at load time

    opts.inPreferredColorSpace =
 ColorSpace.get(ColorSpace.Named.SRGB);
 
 Bitmap b = BitmapFactory.decodeStream(…, opts);
  17. 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
  18. // Let’s create a wide gamut bitmap Bitmap b =

    Bitmap.createBitmap(
 1920, 1080,
 Bitmap.Config.ARGB_8888, false,
 ColorSpace.get(ColorSpace.Named.ADOBE_RGB)
 );
  19. // sRGB out @ColorInt int c = b.getPixel(0, 0); //

    sRGB in
 b.setPixel(0, 0, 0xfff436d);
  20. // 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