You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
"Color Picker & Contrast" toy offers a mode selection, with two options labeled as "HSV" and "HSL".
The truth is, neither of them is actually HSL.
Both are variants of HSV, with parameters rearranged between 2D and 1D sliders.
Current "HSV" - HSV with Value on a separate slider;
Current "HSL" - HSV with Hue on a separate slider.
There are dropdowns to choose the color model for displayed numeric values. It only offers "RGB" and "HSV" options.
I often need to manipulate colors in HSL color space (I mentioned in #93 before).
More importantly, if you need to adjust the text contrast in your combined toy, Lightness of HSL is the best way to do it (until we dig too deep into the color theory).
Current implementation is (1) mislabeled, (2) suboptimal for it's purposes.
Solution/Idea
Rename existing modes. It's HS+V and H+SV;
Add proper HSL modes;
Add HSL numeric values option;
Rearrange mode dropdowns and numeric fields. Dropdowns under each color seem superfluous. Being able to display sliders and numeric fields of different modes seems unnecessary. There are two possible solutions:
a. Show RGB numeric values at all times, and additional 3 numeric values according to the currently selected sliders mode;
b. Introduce RGB mode with RG+B sliders (other permutations optional);
Extras (might worth a separate issue but I think above steps have to be sorted out first):
Make numeric fields mouse-editable (increment, decrement buttons, scroll binding) - as in Unix Timestamp Converter toy;
Add ability to copy/paste CSS strings of colors in different color models .
Example of HSL Saturation+Lightness square, Hue is on a separate (circular) slider:
(Note how Lightness goes from always black to always white.)
Examples of HSL Hue+Lightness (left) and Hue+Saturation (right) squares:
What's the Problem?
"Color Picker & Contrast" toy offers a mode selection, with two options labeled as "HSV" and "HSL".
The truth is, neither of them is actually HSL.
Both are variants of HSV, with parameters rearranged between 2D and 1D sliders.
There are dropdowns to choose the color model for displayed numeric values. It only offers "RGB" and "HSV" options.
I often need to manipulate colors in HSL color space (I mentioned in #93 before).
More importantly, if you need to adjust the text contrast in your combined toy, Lightness of HSL is the best way to do it (until we dig too deep into the color theory).
Current implementation is (1) mislabeled, (2) suboptimal for it's purposes.
Solution/Idea
Rename existing modes. It's HS+V and H+SV;
Add proper HSL modes;
Add HSL numeric values option;
Rearrange mode dropdowns and numeric fields. Dropdowns under each color seem superfluous. Being able to display sliders and numeric fields of different modes seems unnecessary. There are two possible solutions:
a. Show RGB numeric values at all times, and additional 3 numeric values according to the currently selected sliders mode;
b. Introduce RGB mode with RG+B sliders (other permutations optional);
Extras (might worth a separate issue but I think above steps have to be sorted out first):
Example of HSL Saturation+Lightness square, Hue is on a separate (circular) slider:
![image](https://user-images.githubusercontent.com/13851064/180661168-c283cab8-1226-4738-890c-c2cb1295851f.png)
(Note how Lightness goes from always black to always white.)
Examples of HSL Hue+Lightness (left) and Hue+Saturation (right) squares:
![example with HL and HS squares](https://camo.githubusercontent.com/2c23a37b2997b6473710f1ffd2839762b7535aaa85d88a43801f335152f6c08f/68747470733a2f2f707265766965772e726564642e69742f63736733716e726277666536312e706e673f77696474683d34373726666f726d61743d706e67266175746f3d7765627026733d36376338386539343861663261353230386538346465393964663935343836343535326535336261)
Alternatives
none
Priorities
No response
DevToys Version
Version 1.0.9.0 | X64 | RELEASE | 8bcfa60 | 8bcfa60
Comments
https://en.wikipedia.org/wiki/HSL_and_HSV
https://drafts.csswg.org/css-color/#the-hsl-notation
The text was updated successfully, but these errors were encountered: