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:
  

[octref]

For that I suggest you use an alternative tool, like Sip app https://sipapp.io. But anyway, I'll keep it open and I've updated the title.

[chhh]

I'm looking for the same functionality - just spawn a color-picker with a command and insert the hex/rgb value at the caret no matter what file type is open.

The vs marketpalce has two extensions with colorpickers. One doesn't work at all, the other uses ugly legacy windows color picker which is not very user-friendly.

Considering this color picker is already there...

[cburkins]

In the same boat, trying to get the color picker to activate while in a JSX file.

[DavidHanover]

I am trying to specify colors within strings inside a javascript object. Would LOVE to have color picker available to change on the fly instead of going to browser, finding hex codes from designer app, copying, going back to vscode, carefully selecting the right hex code, pasting in, making sure not have duplicate # characters, making sure the string isn't ruined by whitespace or missing " character, etc.

[vrgimael]

Same problem using JSX... Isn't there any command to force launch the picker on whatever file extension and then just paste the result in the text?

[lazar0s]

Still waiting in 2021 for the feature to show color picker at will...

[phutngo]

Why can't vscode have a setting to enable color picker outside of html and css files?

[g-rendeiro]

Based on @octref explanation about the language server limitation for certain languages, and given my need to have color picker on a .json file, I search for those terms in the extensions marketplace and found this useful plugin. I hope it can help someone!

[blaylockbk]

With the json-color-token 1.2.0 extension, you can specify which language types to invoke a HEX color picker. You can see I enabled the color picker is enabled for json, jsonc, python, and toml files. (See YECHUNAN/json-color-token#2 for explanation).

[gabriel-messas]

Let me save your lives:

Name: vscode-color-picker
Id: antiantisepticeye.vscode-color-picker
Description: let's you use vscode's css color picker in other documents
Version: 0.0.4
Publisher: AntiAntiSepticeye
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=AntiAntiSepticeye.vscode-color-picker

[georgefst]

Let me save your lives:

That is useful, thanks. Even if it's some way short of the kind of truly language-agnostic approach I envisaged in #52364 (comment).

[Kwaadpepper]

Found not way to spawn color picker in PHP files, someone managed to do this ?

[georgefst]

Found not way to spawn color picker in PHP files, someone managed to do this ?

Yes. See #52364 (comment).

[Kwaadpepper]

Found not way to spawn color picker in PHP files, someone managed to do this ?

Yes. See #52364 (comment).

Never mind just saw I has to add the php language into the extension parameter to supported languages.

  "vscode-color-picker.languages": [
      "php",
      "json",
      "python",
      "javascript",
      "typescript"
    ]

[georgefst]

If #178242 is limited to CSS-formatted colours, that's kind of disappointing. Just because most popular languages have so much ceremony around using custom datatypes that everyone prefers to use strings for everything, doesn't mean the rest of us should suffer!

At the very least, is there a reason why the last line of the screenshot doesn't seem to trigger the color picker? If rgb(r, g, b) weren't required to be in quotes, then the functionality could be used in most languages by defining a suitable rgb function (e.g. in Haskell, rgb(r,g,b) = RGBA r g b maxBound, though I'd have to disable my formatter at every use site to avoid a space between b and ().

[aiday-mar]

Hi, @georgefst, thanks for your comment.

The standalone color picker works for other language formats provided you have an extension installed that defines a DocumentColorProvider. The demo in the video, shows the default behavior when no marketplace extensions are installed, so that the user can still use the color picker when no DocumentColorProviders are present. The default is the CSS format. You may search in the marketplace for extensions that provide color functionality for the language of your choice.

The last line does not trigger a color, because there is no color present there. The PR essentially added a default DocumentColorProvider, which detects if there is a CSS color at the cursor position, and initializes the color picker with that color. If no color is detected, the default RGB(0,0,0,1) is chosen.

The value rgb(r, g, b) does not have to be in quotes when using the default provider. The only reason it is in quotes inside of the video is so that the compiler does not throw errors. As well as that the provider works even if there is a space between the values r, g and b, so there is no need to format.

[georgefst]

Ok cool, that's much more promising than I expected, thanks! I might have to try writing a colour provider extension for more idiomatic Haskell syntax, but it sounds like the "default" CSS one will be usable.