3

I have a website that uses some very vibrant colours. One of them, according to Photoshop is (in hex): #75d0ed

Looking that colour Photoshop (with an Adobe RGB (1998)) working space, it is electric blue, but in the browser (which I guess is sRGB), it looks very bland.

Is there anything I can do about this? Is there any way of changing the colour space of a website so it's not sRGB? Or is there some other way I might preserve the vibrant Photoshop colours on a website?

Improve this question
1
  • The Adobe RGB value 117 208 237 (#75d0ed) is outside of the sRGB gamut.
    – user30494
    Commented Mar 20, 2015 at 20:58

3 Answers 3

Reset to default
3

When working in sRGB colour space, there are two problems with this colour.

1) The given colour (Adobe RGB 117 208 237 or #75d0ed) is defined in terms of the Adobe RGB colour space.
If an ignorant browser directly uses this RGB value as sRGB value, the result would obviously be a completely wrong colour:
enter image description here

2) The given colour is outside of the sRGB gamut.
Therefore, the Adobe RGB value of the given colour value cannot be correctly converted to a corresponding sRGB value.

You may want to consider two solutions for these problems:

a)
Various browsers support ICC profiles (ICC version 2 or even version 4).
You may work in Adobe RGB colour space and use the given colour if you embed the Adobe RGB (1998) ICC Profile.
For example, both of the following squares have the same RGB value 117 208 237; however, the first square has the Adobe RGB (1998) ICC Profile and the second square has the sRGB IEC61966-2.1 ICC Profile.
enter image description here enter image description here
If both colours look identical, your browser does not support ICC profiles (like Internet Explorer 8). For further tests see Is your system ICC Version 4 ready?

b)
You may convert the Adobe RGB values to sRGB values and then work in sRGB colour space. If you cannot correctly convert the Adobe RGB value to a corresponding sRGB value (as in the given example, since the colour is outside of the sRGB gamut), you may want to select the closest matching sRGB colour.
For example, the given Adobe RGB value 117 208 237 corresponds to the sRGB value −8.3 209.2 238.7, which is outside of the sRGB gamut. The sRGB value of the closest matching sRGB colour is 0 209 239.
enter image description here enter image description here

Note: The actual appearance of these examples depends on the capability and calibration of your system.

Improve this answer
6
  • Fantastic. How do you go about adding an ICC profile to your webpage, though?
    – Django Reinhardt
    Commented Mar 21, 2015 at 16:58
  • 1
    @DjangoReinhardt For my examples, I added the ICC profiles to the individual image files. Compatible browsers honour the embedded ICC profiles without any further changes to the webpage. I do not know which other objects support embedding ICC profiles (some are listed here).
    – user30494
    Commented Mar 21, 2015 at 18:50
  • This looks promising: w3.org/TR/2003/CR-css3-color-20030514/#icc-color
    – Django Reinhardt
    Commented Mar 21, 2015 at 19:06
  • Very nice Loong, thanks for your reply. Your profile image looks promissing :) How do you calculated the value? Or it's simply eyeballing?
    – p2or
    Commented Mar 25, 2015 at 8:19
  • @poor All numerical values have been calculated; visual judgement is not necessary. Which particular value are you referring to? The closest matching sRGB colour can be obtained in Photoshop: you paint your image in Adobe RGB and then use ‘Convert to profile…’ in order to convert it to sRGB.
    – user30494
    Commented Mar 25, 2015 at 9:40
2

Yes, it's because of Adobe RGB color space, it's much larger than sRGB.

Best practice for sRGB is to preview the colors in Save for Web Dialog. If you want to see the result immidiatly you can setup sRGB as default color space in photoshop. Click Edit > Color Settings and choose sRGB as RGB Workspace.

If the color profile of the photoshop file and your working profile is not matching, a dialog appears when you open up the photoshop file. To prevent issues, don't convert the colors to another profile.

Note: Websites are displayed in sRGB, it's impossible to change the color space of browsers. Also there is no universal display calibration, so nobody will see the same blue on their screens anyway, but you can try to get a average color of it by testing different screens.

Further links:

Improve this answer
10
  • I thought as much. It's a shame... the designer is going to be upset! Isn't there any way to change this?
    – Django Reinhardt
    Commented Mar 20, 2015 at 21:12
  • @DjangoReinhardt Typically designers know about this limitation.
    – p2or
    Commented Mar 20, 2015 at 21:23
  • The designer should have really designed in sRGB space, I guess. It's going to be tricky because this is their brand's colour.
    – Django Reinhardt
    Commented Mar 20, 2015 at 21:26
  • How will that change anything?
    – Django Reinhardt
    Commented Mar 20, 2015 at 21:30
  • You're really not understanding the situation here. The designer did NOT work in sRGB -- which is why he chose a colour outside of that gamut. It's brand colour that works well in print, and is very vibrant in their offices, but is not going to translate to their website. It has nothing to do with the colour space I'm working in.
    – Django Reinhardt
    Commented Mar 20, 2015 at 21:37
1

This article by Marc Edwards (who comments here too) should be used to set up Photoshop for designing websites: http://bjango.com/articles/photoshop/

Additionally, if you were to start with a new PSD, opening a new document of type 'Web' should do that for you by default (in Photoshop CC at least): https://cloudup.com/cjx5xj8jcjO (and if not using 'web' Document type, make sure you select 'Dont color manage this document' for Color Profile).

Improve this answer
1
  • 1
    Divya Manian, could you please explain a bit more what we'll find behind the link you provide and why it answers the question? That way, your answer is still of value in case the link breaks at a later time. Link rot is the main reason we really dislike link-only answers here. Thanks for your effort and keep contributing!
    – Hanna
    Commented Mar 20, 2015 at 21:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.