Shortcut for opening color picker and insert color of selected format

[probablykasper]

Problem

A huge dealbreaker for me is that VSCode just doesn't let me use the color picker ever, because I'm using Sass files. There does not seem to be any color picker extension that provides the functionality either, that isn't Windows-specific (I'm running macOS).

Feature request

I'd like the ability to spawn a color picker anywhere. So there would be a command that does exactly that, and when you're done it inserts the color code.

A nice inclusion would be if it could know if the cursor is in a color code, and accordingly update that color code. VSCode seems to do this only in a few file types now, which is a bummer for anyone not using those. I don't demand this, as long as I can get a color picker I'm content.

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Color picker is being closed prematurely (#37304)
• updating multiple colors with color picker is not happening. (#48990)
• Allow disabling color picker (#42344)
• Color picker: when user start changing color the picker should not easily close (#33568)
• Color picker: dismissing the picker with ESC should not apply changes (#31641)

[justablob]

I'd love to see this feature aswell, +1.

[octref]

I'm closing this as Sass do not have a language server, which is needed to support this feature.

A simplified explanation as to how color picker works:

• VS Code ask language server of a language X: "What's the colors in a document?"
• LS responds with a list of code ranges that represent colors in the document
• VS Code renders a color box (picker) next to the colors

CSS/Less/Scss have language servers that can respond with color information properly. Sass doesn't have a LS to begin with.

[probablykasper]

@octref That was not the main thing this is about. I want to spawn a color picker anywhere (using a shortcut), regardless of whether there's already a color code in the document or not.

[octref]

@SpectralKH If you mean you want to spawn a color picker that doesn't have anything to do with the color code in a document, you can implement it as a Webview extension or look for existing extensions: https://marketplace.visualstudio.com/search?term=color%20picker&target=VSCode&category=All%20categories&sortBy=Relevance

[probablykasper]

@octref None of the existing ones work for me (on macOS). This should be built-in and consistent between platforms.

[octref]

If you mean you want this kind of color picker, but for Sass, see my response about Language Server above:

We have this component built-in, but we do not have resource to add support for each language so it shows this color picker component.

[probablykasper]

@octref I want that color picker brought up by a shortcut anywhere.

[octref]

You bring it up with a shortcut and pick a color, what do you expect to happen then?

[probablykasper]

@octref I expect the popup from the image you shared to show up. Then I'd pick a color and press enter or something for the color code to be pasted in.

To change the type of color code type (HEX, RGB, etc) to paste in, you could

• Have the place that says "rgb(0, 0, 0)" be clickable, to toggle between color code types
• Have the place that says "rgb(0, 0, 0)" be clickable, to open a drop-down menu with color code types.
• Have a bar with different buttons like this: