<!DOCTYPE html>
<style>
.box {
    position: relative;
    display: inline-block;
    margin: 5px;
    width: 40px;
    height: 40px;
}

canvas {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    background-color: black;
}
</style>
<script>

function drawColorIntoCanvas(color, canvas) {
    var gl = canvas.getContext("webgl");
    gl.clearColor(color[0], color[1], color[2], 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
}

function drawColorWithSpaceIntoCanvas(color, space, canvas) {
    var gl = canvas.getContext("webgl");
    if ("drawingBufferColorSpace" in gl) {
        gl.drawingBufferColorSpace = space;
    }
    gl.clearColor(color[0], color[1], color[2], 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
}

function run() {
    var boxes = document.querySelectorAll(".box");
    for (var i = 0; i < boxes.length; i++) {
        var box = boxes[i];
        var canvas = document.createElement("canvas");
        canvas.width = 20;
        canvas.height = 20;

        var backgroundColor = window.getComputedStyle(box).backgroundColor;
        var matches = /rgb\((\d+),\s(\d+),\s(\d+)\)/.exec(backgroundColor);
        if (matches) {
            drawColorIntoCanvas([matches[1] / 255, matches[2] / 255, matches[3] / 255], canvas);
        } else {
            matches = /color\(([^\s]+)\s(1|0(?:\.\d+)?)\s(1|0(?:\.\d+)?)\s(1|0(?:\.\d+)?)\)/.exec(backgroundColor);
            if (matches) {
                drawColorWithSpaceIntoCanvas([matches[2], matches[3], matches[4]], matches[1], canvas);
            } else {
                console.log(`Unrecognized backgroundColor '${backgroundColor}'`);
                drawColorIntoCanvas([0, 0, 0], canvas);
            }
        }
        box.appendChild(canvas);
    }
}

window.addEventListener("load", run, false);
</script>
<body>
<p>The boxes below should all be uniform in color. Any difference is likely to be extremely subtle.</p>
<div class="box" style="background-color: red"></div>
<div class="box" style="background-color: green"></div>
<div class="box" style="background-color: blue"></div>
<p>rgb red, srgb red, display-p3 red (should be brighter):</p>
<div class="box" style="background-color: rgb(255, 0, 0)"></div>
<div class="box" style="background-color: color(srgb 1 0 0)"></div>
<div class="box" style="background-color: color(display-p3 1 0 0)"></div>
</body>