[Color Picker (Tracker)] Editor V2 & custom color formats

[niels9001]

With 0.20, we now have an excellent Color Picker in PowerToys (thanks to @martinchrzan). There's an opportunity here to create something that goes beyond just picking colors and really speeding up the workflow for (front-end) developers and designers. An editor window could really help to expand the current feature set.

Here's a breakdown of features that might be interesting to add.

Current color picker improvements (Should have)

• [X] Support more zoom levels (100% / 500%?)
• [X] Theming support (light / dark / high contrast)
• [X] (Visual) feedback that the color is copied to clipboard
• [X] Support for color-picking :hover states of e.g. a button (this can be done by using the zoom functionality)
• [ ] Add keyboard shortcuts to zoom (+ - - ) and using arrow keys to control the picker for pixel accuracy.
• [ ] Making the zoom-in feature more accessible / easy to use / discoverable
• [ ] Change cursor to a color dropper when in color-picking mode.
• [ ] Show color name (for accessibility)
• [X] Add a way to still support page/window scrolling when in picker mode (e.g. color picker zoom only activated on holding keyboard key (Ctrl?)?) (Can be done by scrolling first?)

Color editor

A color editor could be a view that will show up automatically after picking a color, or can be launched directly. It would provide the following features.

History of colors (Should have)

• [X] The ability to see previously picked colors.

Color palette & tweaking (Nice to have)

• [X] Automatically generate similar color tones based on the selected color (for e.g. having a nice hover color for a button)
• [X] Tweaking the selected color within the editor to do some fine-tuning

More/configurable color code formats (Should have)

It would be great to support more color formats. And for front-end developers, it would be even better to provide code snippets for popular languages (e.g. CSS) to make it even more useful. Clicking on a color code would automatically copy it to clipboard.

• [X] Support for more color formats (Must have)
• [ ] Configurable color formats: let the user create custom color formats so they have the complete freedom to create something custom. It would be nice to re-sort the list or to set a format as the default copy-to-clipboard. The format editor would live in Settings. (Should have) Proposal: plug-in based?

There's a WinUI 2.4 UWP mock-up available for anyone to check out here: https://github.com/niels9001/ColorPickerUX

Looking forward to see other feature requests.

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[Crissov]

Custom snippets (and good presets) are good, but please note that there are a lot of number formats people will want or need to use:

• percentages with and without percent sign %% and as either integer %P or floating point number %p.
• floats in the range [0.0, 1.0] with %0. or without leading zero %.
• uppercase [0-9A-F] or lowercase [0-9a-f] single %H / %h or double hexadecimal digits %X / %x #5455
• 8-bit integers [0, 255] %i or [16,240] %I, possibly 10-bit %0 and 12-bit integers #5422 or turned into flats with the respective precision
• angles with %D or without %d degree sign ° or symbol (CSS: deg)
• angle in radians %r (CSS: rad), possibly with a factor of π incorporated %R
• angle in partial turns %t (τ, CSS: turn)
• closest X11/CSS/SVG color name %n, possibly other palettes (e.g. spot colors, Pantone, Crayola, HKS, RAL)

Users will also want to use components or channels from various color spaces and models, which are sometimes named or abbreviated the same but actually use different definitions (e.g. saturation, lightness and hue).

• sRGB representations: RGB %R/%G/%B, HSL, HSV, HSI, HWB %H/%S/%s/%l/%V/%I/%W/%B with optional alpha transparency %A or opacity %a
• wide-gamut RGB #5422 %r/%g/%b: CIE, Adobe, ProPhoto/ROMM, DCI, UHD/Rec.2020/2100, ECI
• CIELab #5440 (1931) %L/%?/%?, LCH %c/%h, Luv (1976) %u/%v, xyY, XYZ %x/%y/%z/%Y
• YUV, YCbCr/PbPr
• CMYK, CcMmYK, CMYKOG
• …

Therefore, I suggest to develop an extensible approach to variable codes wherein %1 through %9 are just shortcuts to the most frequently used combinations of generic % + number format + component.

[drms]

Mock-up looks excellent. 1 suggestion: please add # readout for 'Lab' color mode. Lab used daily in Photoshop for color image corrections because in Lab mode colors are separated from luminosity and it is very easy to check a color and know if it is correct as most common items have a narrow range and easily remembered for skin, hair, foliage, sky, water, etc. L also is an easy check for brightness; for example a face skin should normally be 65<L<75. And Lab easily converted mathematically from RGB numbers you already know. Typically we used prog applets but most are old and finicky. Don't want to open Ps just to sample a color. As suggested by others; very useful to have the color selector icon to be magnified via user choice. Some color samplers also provide for 1 pixel, 3x3, 5x5,9x9 avg selection choices (see Photoshop eye dropper) Thanks!

[Jay-o-Way]

@Crissov "there are a lot of number formats people will want or need to use" There's also the hex with the "0x"-prefix and #BBGGRR.

[balaji-ch]

Excellent . This is even better than what I have asked for in https://github.com/microsoft/PowerToys/issues/5441

[akhilesh-balaji]

Hi, it would be nice if you could turn the mouse into a color dropper when the color picker is activated, as well as some kind of animation to show that the color has been copied to the clipboard.

[ghost]

@niels9001 It would be nice if you could add the tracker label

[TobiasSekan]

* sRGB representations: RGB `%R`/`%G`/`%B`, HSL, HSV, HSI, HWB `%H`/`%S`/`%s`/`%l`/`%V`/`%I`/`%W`/`%B` with optional alpha transparency `%A` or opacity `%a`

Note that the saturation values are different for the same color on the different color formats with the same hue value (HSB, HSI, HSL, HSV)

[Crissov]

It is true that there are at least three definitions of saturation S in sRGB representations; it should be the same in HSV and HSB, though. There are also at least two definitions of hue H (before even considering CIELCh or CIEHLC).

sRGB representation	Chroma	Hue	Saturation	other component
HSL	range(R, G, B)	60°·H′	C/(1−|2·L−1|) → 0	mid(R, G, B) =: lightness
HSV or HSB	range(R, G, B)	60°·H′	C/V → 0	max(R, G, B) =: value = brightness
HSI	gmean(α, β)	atan2(β, α)	1−m/I → 0	avg(R, G, B) =: intensity

It's always tempting but really unhelpful to use nice round example values, e.g. multiples of 25% or of 30°, in color components, because in those corner cases the different definitions may actually yield equal results.

[ectoanonymous]

I would like to see a color palette to choose from too. It would help front-end developers a lot in their workflow.

[niels9001]

@ectoanonymous A color palette generated by the picked color?

[ectoanonymous]

@niels9001 No, not to be generated by picked color, but like the Normal color picker box (like Photoshop have or the paint legacy had).

[niels9001]

@ectoanonymous Do you have a screenshot? Clicking on the selected color will provide you a colorpicker control that allows for tweaking. See gif in the first post.

[ectoanonymous]

@niels9001 That gif is ok, but it would be more awesome if we have photoshop like box (see attached screenshot). When we pick some color from window, it shows up in that box, and that box is also manually accessible with some shortcut key.

The pallet shown in gif (first post) is ok, but this kind of box is more convenient and selected color will be more customizable.

EDIT: One more thing, You can also produce the color, if the color you want is not on the screen using that box (the thing I mentioned above about manually accessing it with some shortcut key.).

[martinchrzan]

@ectoanonymous What are you missing here? You can configure your color -

[ectoanonymous]

@martinchrzan where can I try it? The PowerToys version I'm running doesn't show that!

[martinchrzan]

Upcoming V2 version, draft PR #7710

[Jay-o-Way]

Something looks wrong with the sliders. Is any one slider supposed to change the appearance of the colors (on the rows) above it? 🤔 What happens if I slide the bottom one to black? Please show in the UI , next to the sliders, what color model the sliders use. HSV or HSL?

[Jay-o-Way]

but like the Normal color picker box

@ectoanonymous Define "normal" please?

[martinchrzan]

It is not wrong. Sliders are setting HSV color spectrum (sliders are in the same order) - so changing one slider affects everything else For example if I change S (second one) to 25% then my first slider (hue) is in the range - (0°, 25%, currentV) - left side of gradient - (360°, 25%, currentV) The same goes for the third slider (Value/Brightness) - its gradient range is from (currentH, 25%, 0%) to (currentH, 25%, 100%) The resulting color (shown on top is) (currentH, currentS, currentV). This is different (and probably the source of confusion) from setting RGB values as they are all independent.

Similar behavior can be seen in - https://github.com/windows-toolkit/WindowsCommunityToolkit/pull/3379

[ectoanonymous]

@Jay-o-Way by normal, I meant the one in the screenshot. Btw v2 is much better #7710

[niels9001]

We could add the H S V descriptions if that would clarify things.

[Jay-o-Way]

Martin: good explanation, thanks. Especially the comparison with RGB that are independent. Niels: Yes, we should declare the format of the sliders. Just to be sure: is it HSV or HSB?

I'm curious: Color pickers or color wheels come in about a million different GUIs - and with different color spaces. Even between different MS apps*. Is there a reason HSV/HSB (and not, for example, HSL) is the chosen one to have sliders? Here, the exact (numerical) HSV values are not visible or editable.

* Don't look at Microsoft for help. Here are the color editor possibilities in five different MS apps:

App	HSV?	HSL?	RGB?	HEX?
3D Builder	HSV 0-100%			#HEX
Office		HSL 0-255	RGB 0-255
Paint		HSL 0-240	RGB 0-255
Paint 3D			RGB 0-255	#HEX
Windows Settings	HSV 0-100%		RGB 0-255	#HEX

Absolutely ridiculous

[martinchrzan]

No specific reason, I just find using HSV to be more intuitive when using sliders - you pick what kind of color you need in the first slider (red,green,blue...) and then you just tune it with saturation and brightness. In compare to RGB, you don't know what color you are choosing, because every part is just a partial result at the end. So if I want a yellow color. I need to know how to combine RGB values to get to that, where in HSV I just pick yellow immediately.

[niels9001]

I personally wouldn't care about those specifics at all. As a user, I just want to tweak my color slightly to fine-tune it or to create a shade that would work well next to the color I just picked (e.g. a roll-over color for a button).

I'm not sure if we're trying to over-engineer stuff by providing gazillion ways of tweaking the color that was just picked. It's meant to be a simple colorpicker. Not an advanced color palette tool. Adobe will probably do a way better job at something like that :). I think @martinchrzan did a great job here providing the flexibility of slightly tweaking the color tones (the S and V sliders) and changing the the color altogether with the H slider.

But hey, that's my $0.02 :).

I'd be in favor of getting this in as is (#7710) - if there's a big demand for any other (advanced) features we could look at that later. Make sure to create an issue for it so it can be tracked, with a solid explanation of what it should do and why!

[Crissov]

We could add the H S V descriptions if that would clarify things.

Definitely. I would prefer Lab sliders, though, or have both (and perhaps a switch to toggle between HSV and HSL), and RGB should be right-aligned percentages since the 8-bit values are always in Hex.

PS: https://ux.stackexchange.com/questions/88055/most-user-friendly-color-picker

[jeansagi]

Is there only one shortcut to copy the default color format?

It would be awesome to have several shortcuts to copy the first (default) format, another to copy the second, and so on.

As a developer, I for example, sometimes need to copy in rgb format and sometimes in HEX format. For me there is no use in the fancy interface although it is very welcome. It's just it will be a burden to keep changing configurations or using the mouse to select one format or another.

J.

El mar., 3 nov. 2020 a las 2:47, martinchrzan (notifications@github.com) escribió:

Upcoming V2 version, draft PR #7710 https://github.com/microsoft/PowerToys/pull/7710

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/microsoft/PowerToys/issues/5379#issuecomment-720957481, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFY3AEMCNZC3HAO5PGO3ZOTSN6YRNANCNFSM4PQXGDKQ .

--

J.

[ectoanonymous]

@niels9001 [BUG] Color picker is behind the start menu, however it's selecting color from start menu.

[ghost]

This is a known issue. But you can still click on the tile in the start menu and get its color copied to the clipboard

[ectoanonymous]

@alannt777 I've never seen anything above the start menu in windows. Start menu is always on the top of everything. I wonder about it, if it's fixed in the upcoming v2?

[ghost]

You can't go on top of the start menu. But the "color editor" that is coming with v2 is a window. But the actual color picker is still going to be behind the start menu

[ghost]

I just build and ran the prototype and it's awesome:

[ectoanonymous]

@alannt777 Can you share that prototype with me? I'm too excited for that.

[ghost]

It doesn't really work outside that window.

[ghost]

If you want a working prototype, you can checkout this PR #7710 and build it

[drms]

Still hoping Lab color numbers output/displayed sometime soon too.

Doug

[crutkas]

@niels9001 [BUG] Color picker is behind the start menu, however it's selecting color from start menu.

known limitation, parts of the OS will have highest Z-Order, nothing we can do

[crutkas]

@niels9001, shouldn't we deem this done?

[Crissov]

Before closing as resolved @crutkas, can someone please update the checkboxes in the initial post by @niels9001 and open up new issues for the remaining requirements? (or reopen the respective ones closed as duplicates of this issue.)

[enricogior]

@Crissov this issue is resolved and we are not making more changes for 0.27. After 0.27 is released feel free to open a new issue. Thank you.

[ghost]

@enricogior Can I create another tracker for:

• Add keyboard shortcuts to zoom (+ - - ) and using arrow keys to control the picker for pixel accuracy.
• Making the zoom-in feature more accessible / easy to use / discoverable
• Change cursor to a color dropper when in color-picking mode.
• Show color name (for accessibility)

• Configurable color formats: let the user create custom color formats so they have the complete freedom to create something custom. It would be nice to re-sort the list or to set a format as the default copy-to-clipboard. The format editor would live in Settings. (Should have)

[niels9001]

@alant777 Please create separate issues - I foresee some pretty extensive discussions around some of these topics, better to track those separately :).

[ghost]

@niels9001 OK!

[crutkas]

Shipped with 0.27 release. https://github.com/microsoft/PowerToys/releases/tag/v0.27.0

[kethan1]

@crutkas With 0.27, there appears to be no way to add a custom format

[ghost]

@crutkas With 0.27, there appears to be no way to add a custom format

@kethan1 We did not add it yet. Tracking issue #8305

[martinchrzan]

Yes, it can also detect the current lighting in the room and compare it with your iris size so it can compensate for the Vulkan bit offset that happens with HDR 11 in the left corner of your screen... ;)

Lol, no. It grabs the screen in the same way as when you do a print screen (but picks only 1 pixel) - you get what you see in RGB, that's it. There is no interception on different layers, decoding different color spaces, etc.