如何创建遵循平方根平均值的CSS渐变？

我之前看了Minutephysics的《Computer Color is Broken》视频，里面提到正确的颜色混合方式应该是对R、G、B值先取平方的平均值，再开平方根，而非直接对RGB值做简单平均。

出于好奇，我测试了CSS默认渐变的效果，做了一个简单的红-绿线性渐变：

div {
    width: 600px;
    height: 600px;
    background: linear-gradient(to right, rgb(0,255,0), rgb(255,0,0));
}

<div></div>

可以看到，这个渐变的中间区域出现了偏暗的黄色，观感很差。

于是我尝试按照平方根曲线手动设置渐变断点，效果明显改善：

div {
    width: 600px;
    height: 600px;
    background: linear-gradient(to right, 
        rgb(000,255,000),
        rgb(127,221,000) 25%,
        rgb(180,180,000) 50%,
        rgb(221,127,000) 75%,
        rgb(255,000,000) 100%
    );
}

<div></div>

不过因为断点数量有限，渲染结果略有块状，但整体观感比默认渐变好很多。增加更多断点后，平滑度会进一步提升：

div {
    width: 600px;
    height: 600px;
    background: linear-gradient(to right, 
        rgb(000,255,000),
        rgb(090,239,000) 12.5%,
        rgb(127,221,000) 25%,
        rgb(156,201,000) 37.5%,
        rgb(180,180,000) 50%,
        rgb(201,156,000) 62.5%,
        rgb(221,127,000) 75%,
        rgb(239,090,000) 87.5%,
        rgb(255,000,000) 100%
    );
}

<div></div>

我的问题是：能否通过原生CSS或其他工具直接实现这类符合感知的平滑渐变，而不需要手动添加大量渐变断点？

内容的提问来源于stack exchange，提问作者Pritt Balagopal