6

RGB or sRGB?

over 4 years ago from , Creative Director

Have we turned the page on color spaces or are we still sticking to straight RGB these days? I know Sketch embeds sRGB data, but displays RGB, and I know Photoshop has the option to embed or not. Curious if anyone has any insights on this?

8 comments

  • Marc EdwardsMarc Edwards, over 4 years ago

    Are you talking about saving PNGs used in iOS apps? Android apps? For the web? Or is the question more about general colour management and setup?

    Actually embedding an ICC profile in your UI images won’t help much — if there’s no profile, iOS and Android treat them as sRGB. Web browser behaviour is a bit more complex, but Safari treats images with no profile as sRGB as well.

    If you want to target Display P3 (as found on some new iOS devices), you will need to embed an ICC profile in your images though.

    Sketch doesn’t embed ICC profiles in PNGs it saves. If you have “Save for web” turned on, it just includes a gamma chunk. If you turn “Save for web” off, it’ll just include an sRGB chunk (and no gamma info).

    10 points
    • David Molanphy, over 4 years ago

      Thanks, Marc. It was more of a general color management question.

      Historically, I've always turned off color management on files I export for web and was curious if these new 5k displays would mark a shift in how we save for web. Apparently not.

      0 points
      • Marc EdwardsMarc Edwards, over 4 years ago

        In terms of saving PNGs, the best current approach is the same as before — just use Save for Web or Export As in Photoshop, or export as normal in Sketch.

        But, the 2016 MacBook Pro and 5K iMacs do have wide gamut (Display P3) screens. They do complicate things a little. Design tools that are not colour managed will show wildly oversaturated colours (they’ll assume sRGB, but present the values in Display P3). In Photoshop, Illustrator and Affinity Designer, that’s fairly easy to work with — just set the document to use the sRGB colour space and everything should have the correct appearance.

        1 point
        • David Molanphy, over 4 years ago

          Huh. Good to know. Thanks again for the insights!

          0 points
        • Erik ShawErik Shaw, over 4 years ago

          Hey Marc, can you reveal your color management/profile configuration for web and app output in Affinity Designer? For example, what do you have in the general preferences for "Color Profiles" and what options do you select when exporting? Thanks!

          0 points
          • Marc EdwardsMarc Edwards, over 4 years ago

            If you’re using an sRGB display

            If you want life to be easy, you can pretty much avoid colour management. It works as long as your display is sRGB (or very close to it), and as long as you’re exporting sRGB assets. If you’re building iOS, Android, macOS or web apps, you probably are.

            That means the settings you need are:

            • RGB colour profile in Preferences: “Display”.
            • Document colour format: “RGB/8” or “RGB/16”.
            • Document colour profile: “Display”.
            • Export settings: Disable “Embed ICC profile”.

            Affinity Designer settings

            The preferences setting doesn’t really matter. It’s just for new document creation. The document colour profile does matter though.

            Some pundits will tell you this is a bad idea. If they do, their background is probably in print design. Don’t listen to them. This is a perfectly valid strategy, and it eliminates most of the common issues.

            However, if you’re using an sRGB display, you can also use the method below. You just won’t really be gaining anything by doing so.

            If you’re using a Display P3 or non-sRGB display

            If you own a 5K iMac, a 2016 MacBook Pro, or are using a Display P3, AdobeRGB or some other kind of wide gamut display, you need to work a little differently. The settings you need are:

            • RGB colour profile in Preferences: “sRGB IEC61966-2.1”.
            • Document colour format: “RGB/8” or “RGB/16”.
            • Document colour profile: “sRGB IEC61966-2.1”.
            • Export settings: Disable “Embed ICC profile”.

            Affinity Designer settings

            This means the document is assigned an sRGB profile, and what you see while editing will be converted from sRGB to your display’s profile. Note this may cause banding on the canvas that won’t be in the exported files.

            I hope that helps. :)

            0 points
            • Erik ShawErik Shaw, over 4 years ago

              Thanks so much for the overview! So, with a standard sRGB monitor, I should set the default and document RGB profile to "Display" and un-check "Embed ICC Profile"during export. Right? I ask because your screenshot has "sRGB IEC6..." as default, but as you noted, this doesn't really matter.

              Also, what about "Black Point Compensation" and "Rendering Intent"?

              0 points
              • Marc EdwardsMarc Edwards, over 4 years ago

                Thanks so much for the overview!

                Not a problem. I should write some of this stuff up as an article. :D Sorry about the error in the images. I’ve edited the post to fix that.

                So, with a standard sRGB monitor, I should set the default and document RGB profile to "Display" and un-check "Embed ICC Profile" during export. Right?

                Yep, that’s what I’d do. Embedding ICC profiles in sRGB images will just add around 3KB to each one, with no other difference for iOS apps, Android apps, and in most cases on the web. You may as well have smaller images.

                Also, what about "Black Point Compensation" and "Rendering Intent"?

                The both control various aspects of how colour profile conversion works. The default of Relative Colorimetric is a good choice. My understanding of black point compensation isn’t quite as good, but I believe it’s only used for RGB to CMYK conversions, so it shouldn’t matter either way when designing mobile apps and websites.

                0 points