Search code examples
javascriptcsscss-calccss-gradients

CSS HSL-Triangle


I try to build a website with a color picker.

For that, I would like to use some sort of semicircle with which you can choose the hue and a triangle with which you can choose the saturation and lightness.

See the triangle in the middle

I got my semicircle/color wheel and also the triangle shape so I only need the background/color of the triangle.

For that, I need a linear-gradient in another linear-gradient (like a gradient-array).

#colorTriangle {
    width: 250px;
    height: 200px;
    background-image: linear-gradient(hsl(0, 100%, 50%), linear-gradient(hsl(0, 0%, 100%), hsl(0, 100%, 0%)));
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
<div id="colorTriangle"></div>


Solution

  • Since your triangle supposed to be equilateral, its height would be h = (a√3)/2.
    Or here we can use h = 0.866a.

    And instead of linear-gradient I'd use radial-gradient:

    #colorTriangle {
        --a: 250px;
        width: var(--a);
        height: calc(.866 * var(--a));
        background-color:#777;
        background-image: 
          radial-gradient(circle at 50% 0, hsl(0, 100%, 50%), #0000 var(--a)),
          radial-gradient(circle at 100% 100%, hsl(0, 0%, 100%), #0000 var(--a)), 
          radial-gradient(circle at 0 100%, hsl(0, 100%, 0%), #0000 var(--a));
        background-blend-mode:hard-light;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
    <div id="colorTriangle"></div>