Quick paste

[sindresorhus]

I think it would be useful to be able to quickly paste a color in either Hex, HSL, or RGB. You can already do this by selecting the correct text field first, but I think it would be nice if we could support this as long as the app is active.

Open questions:

• What should the keyboard shortcut be? Should we use Command+V for this? Or should it be Shift+Command+V?
• Where and how should it be presented in the UI? (Button to paste)

The implementation should be simple as we already have the initializers. We just try initializing the colors on after another.

Feedback wanted

[m8ins]

My first time "contributing to open source" – exciting!

I think the shortcut should be Shift+CMD+V. I think I would prefer this because CMD+V usually pastes inside the active input element or somewhere in the app in general. e.g.: when I press CMD+V in Finder, it pastes into the main window. As there are three possible paste-targets in the color picker, I think Shift should be used as a modifier to the action. Does that make sense?

The button to paste the color in the text field could be added to the far-right end of the input field and only appear on hover. I'm not sure how well this works accessibility-wise in a Mac-app. Showing the button only while hovering the respective field would make it clear which field will be pasted into, while at the same time de-cluttering the interface. And it would also have high discoverability: it's intended as a shortcut so I don't have to click the field and then paste. So I would stumble upon it when I want to click the field and the "paste"-button becomes visible inside that field.

[sindresorhus]

I agree with using Shift+Command+v. I have implemented the menu item and keyboard shortcut for this now.

I don't think it makes sense to place the paste button inside the inputs, because the pasting is not tied to a specific format. The intention of the button is that you can click it to paste any of the supported formats, just like the keyboard shortcut.

[m8ins]

Yeah, you're right, one central button might be a smarter idea.

One button above the three input fields might work. The button should be near the input fields so that connection between button and inputs is clear. And I like the idea that the button is above the input fields because then the information 'flows' from top to bottom: the button on top affects the three input fields on the bottom.

[sindresorhus]

The problem with having the button right above the inputs is that it will be a lone centered button. It's kind of a waste of vertical space and it will also not look that good. Let's try to explore some other possible solutions too.

[sindresorhus]

@m8ins What do you think of something like this? (Placing the paste button on a row above)

[m8ins]

Sorry for my silence, I just moved and was a bit busy unpacking the boxes.

I like the placement! Not sure about the icon, though – I'd interpret it as "download" rather than "paste/import". Which icon set do you use, SF Icons? I could look through there if I find another icon that might fit.

[sindresorhus]

Yeah, I'm not happy about the paste icon. Forgot to mention that. I couldn't find a good icon for it. Help with that is most welcome. It's SF Symbols.

The idea is that we can add more buttons there in the future. Maybe a contrast checker, or something else.

[sindresorhus]

Someone suggested doc.on.clipboard, but I feel it looks too close to doc.on.doc.fill copy buttons.

[m8ins]

I think you're right, it could be a bit confusing to use doc.on.clipboard and doc.on.doc.fill right next to each other. What about paintbrush, would this make sense?

[sindresorhus]

Thanks. I'm going with that for now.