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.
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>
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>