Making Sense of Color Management(abookapart.com)

over 3 years ago from Marc Edwards, Founder at Bjango

  • Marc EdwardsMarc Edwards, over 3 years ago (edited over 3 years ago )

    It will likely help you understand what’s going on, but it might not lead to a solution you like. Let me explain a little further.

    I assume you’re working on a 5K iMac. As you may know, the 5K iMacs use the Display P3 colour space (DCI-P3 with a gamma of 2.2 instead of 2.6). The new MacBook Pros do, too. In short, this means they can display a wider range of colours than previous Macs could. Previous Macs were sRGB-like*.

    Most design for screen (web, iOS, Android) targets sRGB. If you have a colour that’s bright red in the sRGB colour space (#ff0000) and keep the value the same (#ff0000), but display it in the Display P3 colour space, it will be brighter. This is often what happens with apps that aren’t correctly colour managed, and is the likely cause of “hot hot” colours.

    There’s two decent solutions.

    Option 1: Set your display to sRGB

    If you set your display to use the sRGB colour space (often called “sRGB emulation” on external third party displays), the problem disappears, and you can use software that isn’t colour management aware. Ultimately, this is just a band-aid solution, but as it stands, the web, iOS, and Android all typically treat images with no ICC profile as sRGB. It’s a pragmatic fix. The issue with the 5K iMac is that I’m not aware if this is possible. I don’t have a Display P3 Mac to test, so I can’t give a definitive answer on how to do it.

    Option 2: Use software that understands colour management

    Photoshop, Illustrator and Affinity Designer all have various ways to set a document’s colour profile, or to proof the current document as sRGB. In Photoshop, choosing Edit → Assign Profile will do it.

    Or, you can just preview the current document as sRGB, if you don’t want to actually assign a profile. Choose View → Proof Setup → Internet Standard (sRGB) to do that.

    Using software that is colour management aware will also let you build Display P3 native assets, for the newer Macs and iOS devices. I honestly don’t think there’s a huge need to do this just yet — sRGB is the lowest common denominator and being able to use colours outside the sRGB gamut isn’t usually worth the extra disk space (iOS typically bundles separate sRGB and Display P3 assets, and the Display P3 assets are a lot bigger if you save them the recommended way).


    *It’s a bit more complicated than that, but I think “sRGB-like” is close enough for this context.

    Full disclosure: I played a small role in this book and am listed as a Technical Editor. The book is good, and as far as I am aware, it is entirely correct. I favour option 1 above for UI design (a very pragmatic approach), but option 2 is definitely the right way to go in many cases, and is what the book promotes and covers in detail.

    5 points
    • Daniel GoldenDaniel Golden, over 3 years ago (edited over 3 years ago )

      Marc, we need to take your DN comments and replies and compile them into a book. You leave a ton of nuggets lying around in miscellaneous threads on DN.

      3 points
    • Duke CavinskiDuke Cavinski, over 3 years ago

      This is fantastic and you're amazing for replying to this detail.

      What I could add is basically this (yes, 5k iMac)

      1. Using the straight up sRGB profile makes the colors too vibrant (and incorrect looking) than the vanilla iMac profile, I've found, particularly noticeable in OSX icons and such.

      2. I use Sketch, which is sRGB. It looks "overly vibrant" when designing in the software, but exports to a correct gamma.

      3. Sketch colors don't seem to change much when swapping between vanilla and sRGB, just slightly.

      It's a little painful to see it overly "hot hot" when designing, but I've got the right hex colors (selected before this new color profile) and I'm just relying on it looking right for most other folks.

      0 points
      • Marc EdwardsMarc Edwards, over 3 years ago

        Thanks, and no problem.

        1. I don’t think there’s a way to switch the iMac to sRGB. I thought there was, and I hope there is, but the methods I know of don’t seem to work. I’d love to know more.

        2. Using Sketch Mirror or Skala Preview should show the correct colours on your device (even if it’s an iPhone 7 or iPad Pro with a Display P3 screen).

        3. Yeah. I think this relates to 1.

        This really should be fixable. It’s only a software issue. If there’s no obvious solution, I might end up getting a third party display that can be set to sRGB.

        0 points