CSS for HDR values?

[greggman]

The 2D canvas API gets colors from CSS colors. Many CSS colors are defined as 8 bit colors, example

 rgb(255, 0, 255)

I'm just guessing the CSS spec doesn't handle rgb(512,0,1024) if you want 2,0,4 float values written into a the canvas. What happens here?

[svgeesus]

Many CSS colors are defined as 8 bit per component, yes. For sRGB:

#FF00FF
rgb(255 0 255)

other sRGB colors take a float (for backward compat with CSS1, this uses a percentage):

rgb(100%, 0%, 100%)

(this example happens to use integer percent values, but it need not)

rgb(87.265% 12.35867573% 45.454545%)

More recently added color functions tend to use a normalized 0.0 .. 1.0 range, for example

color(display-p3 0.73452 0.2345 0.89321)

I'm just guessing the CSS spec doesn't handle rgb(512,0,1024) if you want 2,0,4 float values written into a the canvas. What happens here?

No need to guess, the spec is explicit:

Values outside these ranges are not invalid, but are clamped to the ranges defined here at computed-value time.

The display-p3 colorspace accepts three numeric parameters, representing the red, green, and blue channels of the color, with each having a valid range of [0, 1]

(Notice that in the rgb(512,0,1024) example, GitHub displays a magenta swatch produced by simple per-component clipping, equivalent to rgb(255, 0, 255))

There are open issues on css color 4 about adding HDR support. Extending rgb() for HDR is one option. One problem is relative vs. absolute luminance. In theory, sRGB uses 80cd/m^2 for graphics white; in practice it doesn't, but scales to whatever monitor brightness has been set. For HDR content, Hybrid Log Gamma (HLG) uses relative luminance, while Perceptual Quantization (PQ) sets the peak specular white at 10,000cd/m^2.

[Crissov]

More recently added color functions tend to use a normalized 0.0 .. 1.0 range,

w3c/csswg-drafts#3450
w3c/csswg-drafts#4494

[kdashg]

I believe CSS color 4 handles this now.