colors - How do I create CSS gradients that follow the square root average? - Stack Overflow

admin管理员组

文章数量:1122826

This question stems from this minutephysics video I watched a while back: Computer Color is Broken

It describes how the correct way to blend colors is to use the square root of the average of the squares of the R, G and B values, rather than simply taking the average.

So I was curious and decided to test how CSS implements gradients with a simple Red - Green gradient:

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

<div></div>

This question stems from this minutephysics video I watched a while back: Computer Color is Broken

It describes how the correct way to blend colors is to use the square root of the average of the squares of the R, G and B values, rather than simply taking the average.

So I was curious and decided to test how CSS implements gradients with a simple Red - Green gradient:

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

<div></div>

As you can see, the gradient is kind of ugly, with dark yellow in the middle.

I decided to implement the correct gradient using gradient stops that follow the sqrt curve, and the result is definitely better:

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>

Due to the limited number of stops, the resulting render is a bit blocky, but the overall gradient does look noticeably better than the default. Adding even more stops does improve it even more:

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>

My question is, is there a way to achieve a more continuous gradient like this in CSS (either vanilla or by using some other tool)?

• css
• colors
• gradient

Share Improve this question Follow edited Dec 29, 2024 at 8:35 Pritt Balagopal asked Dec 28, 2024 at 8:00 Pritt BalagopalPritt Balagopal 1,35222 gold badges1919 silver badges3838 bronze badges 1

• 1 i could get something closer with filter:blur and zoom:, but nothing clean enough to post. Aside: If your steps are evenly-spaced, you don't need to explicitly list the %s, which cleans it up slightly... – dandavis Commented Dec 28, 2024 at 8:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 5

Using a polar colourspace with interpolation can give better results.

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

<div></div>

本文标签： colorsHow do I create CSS gradients that follow the square root averageStack Overflow