JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<aside>
	<div style="background: #fff">Normal max</div>
	<div style="background: color(rec2020 1 1 1);">Rec.2020 max</div>
	<div hdr-fill="color(rec2020 1 1 1)">HDR 100%</div>
	<div hdr-fill="color(rec2020 5 5 5)">HDR 500%</div>
</aside>

<aside>
	<div style="background: #f00"></div>
	<div style="background: color(rec2020 1 0 0);"></div>
	<div hdr-fill="color(rec2020 1 0 0)"></div>
	<div hdr-fill="color(rec2020 5 0 0)"></div>
</aside>

<aside>
	<div style="background: #0f0"></div>
	<div style="background: color(rec2020 0 1 0);"></div>
	<div hdr-fill="color(rec2020 0 1 0)"></div>
	<div hdr-fill="color(rec2020 0 5 0)"></div>
</aside>

<aside>
	<div style="background: #00f"></div>
	<div style="background: color(rec2020 0 0 1);"></div>
	<div hdr-fill="color(rec2020 0 0 1)"></div>
	<div hdr-fill="color(rec2020 0 0 5)"></div>
</aside>

<aside>
	<div style="background: #f0f"></div>
	<div style="background: color(rec2020 1 0 1);"></div>
	<div hdr-fill="color(rec2020 1 0 1)"></div>
	<div hdr-fill="color(rec2020 5 0 5)"></div>
</aside>

<aside>
	<div style="background: #0ff"></div>
	<div style="background: color(rec2020 0 1 1);"></div>
	<div hdr-fill="color(rec2020 0 1 1)"></div>
	<div hdr-fill="color(rec2020 0 5 5)"></div>
</aside>

<aside>
	<div style="background: #ff0"></div>
	<div style="background: color(rec2020 1 1 0);"></div>
	<div hdr-fill="color(rec2020 1 1 0)"></div>
	<div hdr-fill="color(rec2020 5 5 0)"></div>
</aside>

CSS

div {
	width: 100%;
	height: calc(100vh / 7);
	align-content: center;
	text-align: center;
	font-family: monospace;
	font-weight: 700;
	position: relative;
}

div::after {
	display: block;
	content: attr(style) attr(hdr-fill);
	font-size: 6pt;
}

aside {
	display: flex;
}

body {
	margin: 0;
}

canvas {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

JavaScript

// HDR colour support
document.querySelectorAll("div[hdr-fill]").forEach(node => {
	const canvas = document.createElement("canvas");
	canvas.width = 100;
	canvas.height = 100;
	
	const ctx = canvas.getContext("2d", { colorSpace: "rec2100-hlg", pixelFormat: "float16" });
	
	const desiredColour = node.getAttribute("hdr-fill");
	
	ctx.fillStyle = desiredColour;
	ctx.fillRect(0, 0, 100, 100);
	
	node.appendChild(canvas);
});