Question 349632 in CSS Question posted in
Some basic documentation can be found here.

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search