Color Picker - Support HSL, now for real

[KillyMXI]

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.

• 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

1. Rename existing modes. It's HS+V and H+SV;

2. Add proper HSL modes;

3. Add HSL numeric values option;

4. 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):

6. Make numeric fields mouse-editable (increment, decrement buttons, scroll binding) - as in Unix Timestamp Converter toy;
7. 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:

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