[css-color-hdr] predefined HDR profile with BT.2100 and the PQ transfer curve

[svgeesus]

Via Mark Watson:

when the update to iccMax is done, it would be good to have at least
one predefined profile for HDR (e.g. BT.2100 / PQ), especially since I heard
at least one implementor say they did not intend to implement arbitrary ICC
profiles, but rather just the predefined ones

Requires some study beforehand; probably not color-4 but rather color-5

[svgeesus]

D65 whitepoint and primaries on spectral locus, so a D50 adapted primary set has negative Z values in XYZ (which is forbidden by ICC v2 and v4) and over-range a and b values in Lab (resulting in clipping to -128 - 127 a and b range and hue shifts).

ICCMax solves this, infinite PCS range. Can do spectral, or colorimetric (directly in D65, no need to adapt to D50), or colorspace encoding profile.

[svgeesus]

colorspace encoding profiles are a name only, so small to download and equivalent to a predefined name.

[svgeesus]

PQ is absolute intensity (ICCMax has AtoB3 tags to deal with that, with an absolute radiance-based tag, luminance in candelas). HLG uses a variable transfer function that relates to the display blackpoint and whitepont.

[karip]

Should HDR have its own media query? I think it’s technically possible to have HDR content in sRGB, Rec.709, P3 or Rec.2020 colorspace. It means that 'color-gamut' media query can’t be just extended with a new keyword for BT.2100.

[karip]

I’m afraid that advertisers will be tempted to abuse HDR by using a lot of bright highlights in ads. So, I hope that browsers will have means to switch off HDR rendering.

[svgeesus]

Should HDR have its own media query?

probably, yes.

I think it’s technically possible to have HDR content in sRGB, Rec.709,

No

P3 or Rec.2020 colorspace.

Yes.

It means that 'color-gamut' media query can’t be just extended with a new keyword for BT.2100.

Correct; gamut is a statement on the range of chroma/colorfulness, DR is a statement on shadow to highlight range (luminance).

[svgeesus]

I’m afraid that advertisers will be tempted to abuse HDR by using a lot of bright highlights in ads. So, I hope that browsers will have means to switch off HDR rendering.

Yes, this is an accessibility need.

[svgeesus]

Rec.2100 defines two encodings that use the PQ transfer function: narrow-range quantization and full-range quantization. It also defines the Hybrid Log-Gamma transfer function.

[svgeesus]

@karip there is now an HDR media query: see this pull request and this closed issue

[svgeesus]

On reflection, given the relative maturity of SDR color management (several decades, although of course with improvements over time) and HDR (especially HDR on devices other than television, and integration of Web content with HDR video and still images) which is in rapid flux, I think it best to keep CSS Color 4 to be SDR only.

To be sure that we are not painting ourselves into a corner, I have made an Unofficial Draft to explore adding HDR to CSS. To avoid the current problems with delta specs and version numbering, I called it CSS Color HDR although I expect it will either get merged into CSS Color 5 or become CSS Color 6 if the CSS WG adopts it.

[palemieux]

The Color on the Web CG recommends adding three HDR color spaces to cover common use cases: "rec2100-hlg", "rec2100-pq", and "rec2100-display-linear".

Details at https://github.com/w3c/ColorWeb-CG/blob/hdr_canvas_r2/hdr_html_canvas_element.md#add-color-spaces-intended-for-use-with-hdr-images

[svgeesus]

Two of those are already specified:

• rec2100-pq
• rec2100-hlg

For the third one, the need is clear.

About the naming, CSS Color 4 and Canvas both have a linear sRGB color space named srgb-linear. Why the longer name rec2100-display-linear here, is it to allow a later scene-referred space as well?

[palemieux]

Why the longer name rec2100-display-linear here, is it to allow a later scene-referred space as well?

It is merely to emphasize that it is display referred. I do not expect a scene-referred space in the future.

[svgeesus]

The Color on the Web CG recommends adding three HDR color spaces to cover common use cases: "rec2100-hlg", "rec2100-pq", and "rec2100-display-linear".

See rec2100-linear for the linear-light version.

[svgeesus]

@astearns as I have the requested items specified in my unofficial CSS Color HDR draft I have a proposed resolution:

Proposed: CSS WG adopts the CSS Color HDR draft as a work item

It can then be worked on and refined in the usual way

[svgeesus]

The CSS Working Group just discussed [css-color-hdr] Add mechanism to query HDR headroom, and agreed to the following:

• RESOLUTION adopt the CSS Color HDR draft as a work item
• RESOLVED: CSS WG adopts the CSS Color HDR draft as a work item

The full IRC log of that discussion

<frances__> <@frances_> rossen: let's start with the first few issues [11:03] <@frances_> pierre: present background behind issues and areas to collaborate [11:03] <@frances_> rossen: I will try and help you [11:04] <@frances_> pierre: sounds great, might not solve in 10 minutes, maybe solve later [11:05] <@frances_> pierre: presentation on adding HDR imagery to html canvas for css requirements [11:05] <@frances_> pierre: highlight some work on color on web[CUT]
<chris> scribenick: frances
<dholbert> scribenick: frances__
<frances__> pierre: so far the web has standard images. effort to bring to both tv and movies, pcs, higher dynamic range images, much broader range of lumniscence, darker and brighter than png images used to
<frances__> pierre: in order to enable this, higher pixel beyond 8 bits beyond power law gamma transfer function, much effort done in the past decade
<fantasai> [pal expains SDR - standard images, whose ranges 0-100 nits, the range of luminance in a standard laptop]
<frances__> on streaming services, blue ray, and cinema, want to bring to pcs
<frances__> pal: web community group has been bringing high range images on html canvas. web gpu and so forth
<frances__> pal: straw man proposed to add HDR imagery through a series of steps
<dbaron> s/web community group/color on the web community group/
<frances__> pal: add series of 8 bit color per pixel, assist with mapping to displace that might not be high dynamic range, add api
<fantasai> [Slide: add HDR colorspaces to Canvas; add higher bit depth to Canvas etc. ; add image color volumne info to Canvas ; add display color volumn info query ; recommendations for mapping to/from HDR ]
<frances__> pal: render on displays that might not have required/narrow and render HDR images, welcome feedback
<frances__> pal: pause for questions
<frances__> rossen: suggests to keep going
<chrishtr> q+
<frances__> pal: HDR colorspaces fulfill two objectives: mapping between pixel values and emitted light
<frances__> pal: also reference viewing environment (ambient light and reference display)
<chrishtr> q-
<frances__> pal: ITU-R standard recommendation bt.2100 built on and recommends three colorspaces
<chrishtr> q+
<frances__> pal: uses hlg transfer function, uses pq transfer function, and linear light where rib corresponds to reference white (1,1,1)
<chris> q+
<frances__> pal: same color primaries and reference viewing environment, add support to the three areas
<chrishtr> q-
<frances__> pal: issue is high dynamic range image for narrow range image display
<frances__> pal: should a single algorithm be mandated or recommended?
<fantasai> i/pal: issue is/pal: Request is for CSS to add these three color spaces, as we are planning to add also to Canvas
<frances__> pal: how should a single algorithm be selected?
<frances__> pal: the cg has been considering a call for proposals
<frances__> pal: what is the capabilities of the display for minimum and maximum display luminance and of reference white?
<frances__> pal: possiblility to increase fingerprinting surfs and introduces privacy concerns
<frances__> rossen: focus the conversation
<frances__> rossen: what is the path forward?
<PaulG> q+
<Rossen_> ack chrishtr
<fantasai> i/pal: what is/pal: Also some applications might want to provide their own mapping, so would need some information from the UA
<frances__> chris: what are the colorspaces suggesting for canvas, are they all available in css ideally?
<frances__> rossen: confirms, yes would be ideal
<dbaron> I'm curious what "add a color space to CSS" means -- add it as part of mechanism for specifying colors, add the ability to use it as a working color space for compositing, other things?
<frances__> chris: on other issue, there is already an unofficial draft created. waiting for interest shown
<frances__> chris: brought down to simple high level proposed resolution, and propose to work on the draft together
<schenney> The trick is figuring out a HDR->SDR mapping that works when color information is spread across lots of elements (as opposed to a single image)
<Rossen_> ack chrishtr
<Rossen_> ack chris
<Rossen_> ack PaulG
<dbaron> https://drafts.csswg.org/css-color-hdr/
<chris> Paul, please have a look at https://drafts.csswg.org/css-color-hdr/#a11y
<frances__> paulg : has question and concern on samsung browser full canvas interface. would be excited. Is there a lag time between canvas and web implementation?
<chris> q+
<frances__> paulg: a hack with no script and can leave alot of people out on accessibility
<frances__> paulg: what coordination to do with color coordinations to accommodate for higher luminance?
<Rossen_> ack chris
<fantasai> s/a hack with no script and/if these are only available for Canvas, devs might use Canvas rather than Web in the interim, which/
<pal> q+
<frances__> chris lilley: already have accessibility considerations on the draft
<florian> q+ to ask if these 3 color spaces achieve different things, or if they are different ways to achieve the same thing
<frances__> rossen: let's answer high level bit to continue working on in csswg, and move onto other issues
<Rossen_> ack pal
<Rossen_> Zakim, close queue
<Zakim> ok, Rossen_, the speaker queue is closed
<frances__> pal: thank group for opportunity, focus on the colors
<Rossen_> ack florian
<Zakim> florian, you wanted to ask if these 3 color spaces achieve different things, or if they are different ways to achieve the same thing
<chris> Proposed Resolution: CSS WG adopts the CSS Color HDR draft as a work item
<frances__> florian: question: out of 3 color spaces, bigger range?
<frances__> chris lilley: yes, better use cases
<chrishtr> sgtm
<frances__> rossen: objections?
<fantasai> s/bigger range/are they different ways of achieving the same thing that we expect one to win, or do we need all three/
<fantasai> s/yes, better use cases/we need all three, they have different use cases/
<chris> Resolution: CSS WG adopts the CSS Color HDR draft as a work item
<frances__> RESOLUTION adopt the CSS Color HDR draft as a work item
<fantasai> RESOLVED: CSS WG adopts the CSS Color HDR draft as a work item
<bradk> Rossen_: is that Hawai’i?
<frances__> rossen: archive is in the IRC
<frances__> rossen: next-issue #9511

[svgeesus]

Closed by 6eb6f42