csscanvascolorscolor-profile

The color profile of the Web


If you are familiar with color spaces (ICC profiles), you probably know, that there are "absolute units" of representing the color (XYZ, L*a*b*) and device-specific units (RGB, CMYK ...) which could mean any real color (unless it is specified using the ICC profile).

But on the web, we usually use RGB units (e.g. in CSS or when drawing onto a Canvas) without specifying any color profile. Is it somewhere defined, that the whole web uses the sRGB or some other color space?


Solution

  • Your question is a bit broad, and it's not possible to give a one sentence answer to it.

    So let's go to the specs :

    All RGB colors are specified in the sRGB color space (see [SRGB]). User agents may vary in the fidelity with which they represent these colors, but using sRGB provides a unambiguous and objectively measurable definition of what the color should be

    So this tells that sRGB for CSS <color> is expected, with some variants.

    What variants ?

    Well e.g in Safari, the browser has access to the currently used monitor's color-profile, and it will use it to adapt the authored values to match the sRGB output, through this user-set color-profile.
    Firefox has some flags to do the same.

    Note that there is a feature request to add a color-profile CSS rule, in order to allow authors to define the color-profile to be used on the page. Note that this feature-request [has been dropped] in current specs, but may still appear in future versions.


    This was for CSS <color>, but this is not the only place where colors are defined in a web page.


    Most browser nowadays do read the color-profiles embedded in images, when displayed in an <img> element.

    But since you tagged your question with canvas, one should note that this color-profile info is currently being dropped by the browser when it paints it on the canvas.
    Once again, there is a pending feature request to add more options to the 2DContext. One of these options being the color-profile.
    Currently, only Chrome is in the process of implementing it, so it's hard to tell what it will be exactly, if any.


    Also, since we're at it, it should be noted that svg does have a <color-profile> element, and a @color-profile CSS rule, which also have been proposed for CSS specs, but got dropped in the final edition.

    And there might probably also be a note about color-management in videos, but for this, I have no idea who does support it (IIRC it's quite rare, and only allowed in mp4 container).