I just joined to Penpot to try it out, and one of the first things I noticed is that there is no support for HSL color space/picker. I understand and appreciate that at least an HSV picker is supplied but this not much useful for web development if these color values cannot be used as is in CSS. One of the important aspects of any UI Design tool for web is that the compatibility between values between the web technologies and what is available on the tool itself.
It’s possible that because I’m new that I just didn’t see the option to enable HSL color space, but if it’s indeed missing I think it’s very important to prioritise adding it to the pickers, and that it has to translate correctly to the CSS values, this is especially important for modern web development with CSS custom properties. I would even suggest that addition of LCH, LAB and CSS color function with Display-P3 support will be necessary for the near-future and onwards, especially considering that the web browsers are starting to support these color spaces as well.
Personally for me it would be a deal-breaker if any design tool does not support HSL(A) color space/picker, as there will be an enormous manual work to translate that values to HSL values and change the HSV value if the HSL value cannot be translated directly.
One additional “bug” I see is, when any color value is changed with a slider, the final value of the slider is entered into the recent colors but if the text fields for each value is incremented/decremented, a new color is added to the recent colors with each change; this makes the recent colors a bit useless as there are so many new colors added to the list which are not actually used in any of the elements. I think recent color values list should show only the color values that are applied to any element recently.
To understand your usecase better: In what workdflow do need the HSL color picker? Are you trying to recreate colors from an existing CSS that has colors defined as HSL or getting them from a corporate identity doc?
TLDR: Browsers and CSS don’t have HSV color space, but have HSL color space so any use case you can think of related to browsers and CSS are affected by lack of HSL color picker in Penpot, regardless of my personal particular use case.
As CSS supports HSL color space (also CSS Color 4 Module adds LCH and LAB as well, browser support is slowly rolling out with Safari, Chrome and Firefox recently added support), it’s very convenient to design in HSL color space and use that values directly in CSS, instead of using HSV, then selecting the HEX color and converting that to HSL, which includes manually converting. It’s both when designing from scratch and choosing colors, and also trying to recreate the existing designs/CSS color values in Penpot.
Also keep in mind, it’s not only about converting the color values from one space to another but also to have a consistent value system. For example, let’s say we have HSL color with Hue 200, Saturation 75, and different Lightness values. When we convert from HSL to HSV, it’s not only matter of mapping 100-value Lightness range in HSL to 255-value “Value” range in HSV; H and S values will change as well.
It’s also not a discussion about which color space is better in terms of perception or color accuracy, it’s about consistency, convenience and reproducibility of the color values between the design tool and the medium itself (Browsers; CSS). I would personally prefer LCH or OKLCH color spaces, but they are not supported by browsers currently, although the support is slowly being rolled out by major browsers, so it will be requirement in the upcoming months and years as well; but that doesn’t change the fact that HSL is widely used for web design/development currently and it’s a necessary color space/picker in any design tool that aims to cover web interfaces.
I understand that there could be some “work-around” to convert HSV to HSL, either with a third-party tool or through using HEX colors but that’s not what I’m looking for as the problem is not only pertaining to converting the color from Penpot to CSS or vice versa, but it’s also about quickly glancing the difference between any color directly inside the Penpot app in terms of Hue, Saturation and Lightness which also translates in that terms to the other color space.
