Filter Colors

HTML-in-Canvas Color Space & HDR Comparison

Interactive playground comparing 12 colors across color spaces, texture formats, and WebGL drawing buffer configurations.

HTML in sRGB

1. RGBA8 Texture Format (No Color Correction, internalFormat: gl.RGBA8)
RGBA8 / sRGB
Pure HTML Element (sRGB input)
Red#ff0000
Green#00ff00
Blue#0000ff
Cyan#00ffff
Magenta#ff00ff
Yellow#ffff00
Lavender#cbcfff
Orange#ff8000
Teal#008080
Pink#ffc0cb
Lime#a0ff20
White#ffffff
WebGL Canvas (HTML-in-Canvas)
Red#ff0000
Green#00ff00
Blue#0000ff
Cyan#00ffff
Magenta#ff00ff
Yellow#ffff00
Lavender#cbcfff
Orange#ff8000
Teal#008080
Pink#ffc0cb
Lime#a0ff20
White#ffffff
Observation: Pastel and mid-tone colors show significant wash-out in the canvas since they are double gamma corrected.
2. SRGB8_ALPHA8 Texture Format (Gamma-Corrected sRGB, internalFormat: gl.SRGB8_ALPHA8)
SRGB8_ALPHA8 / sRGB
Pure HTML Element (sRGB input)
Red#ff0000
Green#00ff00
Blue#0000ff
Cyan#00ffff
Magenta#ff00ff
Yellow#ffff00
Lavender#cbcfff
Orange#ff8000
Teal#008080
Pink#ffc0cb
Lime#a0ff20
White#ffffff
WebGL Canvas (HTML-in-Canvas)
Red#ff0000
Green#00ff00
Blue#0000ff
Cyan#00ffff
Magenta#ff00ff
Yellow#ffff00
Lavender#cbcfff
Orange#ff8000
Teal#008080
Pink#ffc0cb
Lime#a0ff20
White#ffffff
Observation: All 12 colors match perfectly between the HTML panel and the WebGL canvas.
3. Display-P3 Canvas Drawing Buffer (internalFormat: gl.RGBA16F)
Display-P3
Pure HTML Element (sRGB input)
Red#ff0000
Green#00ff00
Blue#0000ff
Cyan#00ffff
Magenta#ff00ff
Yellow#ffff00
Lavender#cbcfff
Orange#ff8000
Teal#008080
Pink#ffc0cb
Lime#a0ff20
White#ffffff
WebGL Canvas (HTML-in-Canvas)
Red#ff0000
Green#00ff00
Blue#0000ff
Cyan#00ffff
Magenta#ff00ff
Yellow#ffff00
Lavender#cbcfff
Orange#ff8000
Teal#008080
Pink#ffc0cb
Lime#a0ff20
White#ffffff
Observation: Colors match properly but cannot exceed the sRGB gamut because the HTML source definitions are limited to sRGB colorspace.

HTML in Display-P3

1. RGBA8 Texture Format (No Color Correction, internalFormat: gl.RGBA8)
RGBA8 / sRGB
Pure HTML Element (Display-P3 input)
P3 Redcolor(p3 1 0 0)
P3 Greencolor(p3 0 1 0)
P3 Bluecolor(p3 0 0 1)
P3 Cyancolor(p3 0 1 1)
P3 Magcolor(p3 1 0 1)
P3 Yelcolor(p3 1 1 0)
P3 Lavcolor(p3 P3-coords)
P3 Orangecolor(p3 1 .5 0)
P3 Tealcolor(p3 0 .5 .5)
P3 Pinkcolor(p3 P3-coords)
P3 Limecolor(p3 .6 1 .1)
P3 Whitecolor(p3 1 1 1)
WebGL Canvas (HTML-in-Canvas)
P3 Redcolor(p3 1 0 0)
P3 Greencolor(p3 0 1 0)
P3 Bluecolor(p3 0 0 1)
P3 Cyancolor(p3 0 1 1)
P3 Magcolor(p3 1 0 1)
P3 Yelcolor(p3 1 1 0)
P3 Lavcolor(p3 P3-coords)
P3 Orangecolor(p3 1 .5 0)
P3 Tealcolor(p3 0 .5 .5)
P3 Pinkcolor(p3 P3-coords)
P3 Limecolor(p3 .6 1 .1)
P3 Whitecolor(p3 1 1 1)
Observation: Extreme color shifting occurs due to lack of sRGB correction.
2. SRGB8_ALPHA8 Texture Format (Gamma-Corrected sRGB, internalFormat: gl.SRGB8_ALPHA8)
SRGB8_ALPHA8 / sRGB
Pure HTML Element (Display-P3 input)
P3 Redcolor(p3 1 0 0)
P3 Greencolor(p3 0 1 0)
P3 Bluecolor(p3 0 0 1)
P3 Cyancolor(p3 0 1 1)
P3 Magcolor(p3 1 0 1)
P3 Yelcolor(p3 1 1 0)
P3 Lavcolor(p3 P3-coords)
P3 Orangecolor(p3 1 .5 0)
P3 Tealcolor(p3 0 .5 .5)
P3 Pinkcolor(p3 P3-coords)
P3 Limecolor(p3 .6 1 .1)
P3 Whitecolor(p3 1 1 1)
WebGL Canvas (HTML-in-Canvas)
P3 Redcolor(p3 1 0 0)
P3 Greencolor(p3 0 1 0)
P3 Bluecolor(p3 0 0 1)
P3 Cyancolor(p3 0 1 1)
P3 Magcolor(p3 1 0 1)
P3 Yelcolor(p3 1 1 0)
P3 Lavcolor(p3 P3-coords)
P3 Orangecolor(p3 1 .5 0)
P3 Tealcolor(p3 0 .5 .5)
P3 Pinkcolor(p3 P3-coords)
P3 Limecolor(p3 .6 1 .1)
P3 Whitecolor(p3 1 1 1)
Observation: Colors are color-managed but the standard sRGB canvas drawing buffer clamps wide-gamut primaries.
3. Display-P3 Canvas Drawing Buffer (internalFormat: gl.RGBA16F)
Display-P3
Pure HTML Element (Display-P3 input)
P3 Redcolor(p3 1 0 0)
P3 Greencolor(p3 0 1 0)
P3 Bluecolor(p3 0 0 1)
P3 Cyancolor(p3 0 1 1)
P3 Magcolor(p3 1 0 1)
P3 Yelcolor(p3 1 1 0)
P3 Lavcolor(p3 P3-coords)
P3 Orangecolor(p3 1 .5 0)
P3 Tealcolor(p3 0 .5 .5)
P3 Pinkcolor(p3 P3-coords)
P3 Limecolor(p3 .6 1 .1)
P3 Whitecolor(p3 1 1 1)
WebGL Canvas (HTML-in-Canvas)
P3 Redcolor(p3 1 0 0)
P3 Greencolor(p3 0 1 0)
P3 Bluecolor(p3 0 0 1)
P3 Cyancolor(p3 0 1 1)
P3 Magcolor(p3 1 0 1)
P3 Yelcolor(p3 1 1 0)
P3 Lavcolor(p3 P3-coords)
P3 Orangecolor(p3 1 .5 0)
P3 Tealcolor(p3 0 .5 .5)
P3 Pinkcolor(p3 P3-coords)
P3 Limecolor(p3 .6 1 .1)
P3 Whitecolor(p3 1 1 1)
Observation: On Display-P3 monitors, all 12 wide-gamut swatches match perfectly between pure HTML and WebGL canvas.

HTML in HDR

Visualising HDR Peaks: The WebGL shader is configured to highlight colors with values greater than 1.0 in Cyan, while normal LDR colors are dimmed.
1. RGBA8 Texture Format (No Color Correction, internalFormat: gl.RGBA8)
RGBA8 / sRGB
Pure HTML Element (HDR input)
HDR Redcolor(p3 1.5 0 0)
HDR Greencolor(p3 0 1.5 0)
HDR Bluecolor(p3 0 0 1.5)
HDR Cyancolor(p3 0 1.5 1.5)
HDR Magcolor(p3 1.5 0 1.5)
HDR Yelcolor(p3 1.5 1.5 0)
HDR Lavcolor(p3 HDR-coords)
HDR Orangecolor(p3 1.5 .75 0)
HDR Tealcolor(p3 0 .8 .8)
HDR Pinkcolor(p3 HDR-coords)
HDR Limecolor(p3 .9 1.5 .15)
HDR Whitecolor(p3 1.5 1.5 1.5)
WebGL Canvas (HTML-in-Canvas)
HDR Redcolor(p3 1.5 0 0)
HDR Greencolor(p3 0 1.5 0)
HDR Bluecolor(p3 0 0 1.5)
HDR Cyancolor(p3 0 1.5 1.5)
HDR Magcolor(p3 1.5 0 1.5)
HDR Yelcolor(p3 1.5 1.5 0)
HDR Lavcolor(p3 HDR-coords)
HDR Orangecolor(p3 1.5 .75 0)
HDR Tealcolor(p3 0 .8 .8)
HDR Pinkcolor(p3 HDR-coords)
HDR Limecolor(p3 .9 1.5 .15)
HDR Whitecolor(p3 1.5 1.5 1.5)
Expected: The canvas shows no Cyan highlights because the standard RGBA8 format clamps all color channels to 1.0 during upload, losing the HDR peaks.
2. SRGB8_ALPHA8 Texture Format (Gamma-Corrected sRGB, internalFormat: gl.SRGB8_ALPHA8)
SRGB8_ALPHA8 / sRGB
Pure HTML Element (HDR input)
HDR Redcolor(p3 1.5 0 0)
HDR Greencolor(p3 0 1.5 0)
HDR Bluecolor(p3 0 0 1.5)
HDR Cyancolor(p3 0 1.5 1.5)
HDR Magcolor(p3 1.5 0 1.5)
HDR Yelcolor(p3 1.5 1.5 0)
HDR Lavcolor(p3 HDR-coords)
HDR Orangecolor(p3 1.5 .75 0)
HDR Tealcolor(p3 0 .8 .8)
HDR Pinkcolor(p3 HDR-coords)
HDR Limecolor(p3 .9 1.5 .15)
HDR Whitecolor(p3 1.5 1.5 1.5)
WebGL Canvas (HTML-in-Canvas)
HDR Redcolor(p3 1.5 0 0)
HDR Greencolor(p3 0 1.5 0)
HDR Bluecolor(p3 0 0 1.5)
HDR Cyancolor(p3 0 1.5 1.5)
HDR Magcolor(p3 1.5 0 1.5)
HDR Yelcolor(p3 1.5 1.5 0)
HDR Lavcolor(p3 HDR-coords)
HDR Orangecolor(p3 1.5 .75 0)
HDR Tealcolor(p3 0 .8 .8)
HDR Pinkcolor(p3 HDR-coords)
HDR Limecolor(p3 .9 1.5 .15)
HDR Whitecolor(p3 1.5 1.5 1.5)
Expected: The canvas shows no Cyan highlights because the standard SRGB8_ALPHA8 format also clamps all color channels to 1.0 during upload.
3. RGBA16F Texture Format (High Dynamic Range, internalFormat: gl.RGBA16F)
RGBA16F / Display-P3
Pure HTML Element (HDR input)
HDR Redcolor(p3 1.5 0 0)
HDR Greencolor(p3 0 1.5 0)
HDR Bluecolor(p3 0 0 1.5)
HDR Cyancolor(p3 0 1.5 1.5)
HDR Magcolor(p3 1.5 0 1.5)
HDR Yelcolor(p3 1.5 1.5 0)
HDR Lavcolor(p3 HDR-coords)
HDR Orangecolor(p3 1.5 .75 0)
HDR Tealcolor(p3 0 .8 .8)
HDR Pinkcolor(p3 HDR-coords)
HDR Limecolor(p3 .9 1.5 .15)
HDR Whitecolor(p3 1.5 1.5 1.5)
WebGL Canvas (HTML-in-Canvas)
HDR Redcolor(p3 1.5 0 0)
HDR Greencolor(p3 0 1.5 0)
HDR Bluecolor(p3 0 0 1.5)
HDR Cyancolor(p3 0 1.5 1.5)
HDR Magcolor(p3 1.5 0 1.5)
HDR Yelcolor(p3 1.5 1.5 0)
HDR Lavcolor(p3 HDR-coords)
HDR Orangecolor(p3 1.5 .75 0)
HDR Tealcolor(p3 0 .8 .8)
HDR Pinkcolor(p3 HDR-coords)
HDR Limecolor(p3 .9 1.5 .15)
HDR Whitecolor(p3 1.5 1.5 1.5)
Current Limitation: Even with an RGBA16F floating-point texture format, the canvas does not show Cyan highlights. This is because the browser compositor currently rasterizes HTML layout subtrees to an 8-bit (LDR) intermediate target before uploading to WebGL, clamping values to 1.0.
View Source