CSS HSL-Triangle

Question

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>

• isherwood: Please see How to Ask and take the tour, then revise your title to ask a clear, specific question.

Answer 1

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>

Answer 2

The linear-gradient term should not appear twice in your property value. You're effectively nesting gradients here. Take the second one out, along with the extra closing parenthesis.

#colorTriangle {
 width: 250px;
 height: 200px;
 background-image: linear-gradient(
 hsl(0, 100%, 50%), 
 hsl(0, 0%, 100%), 
 hsl(0, 100%, 0%)
 );
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

<div id="colorTriangle"></div>