Visual studio code color picker

Question

I love visual studio code but there's one thing that is missing in my opinion.
A color picker.
Does anyone know if there's a color picker for visual studio code just like in visual studio?

Answer 1

You do NOT need a third-party extension for this

This feature has been built into VS Code since 2017, but is disabled by default and needs to be enabled first. In my case I kept seeing it repeated everywhere that this feature was built into VS Code, but despite being on the latest version no amount of hovering or right-clicking over colours triggered it. Even some digging through Google and the original GitHub issues didn't bring up the fact that this feature is disabled by default.

---

To enable VS Code's built-in colour picker

Go to Settings (Ctrl+,) and search for the Color Decorators option:

Color Decorators
Controls whether the editor should render the inline color decorators and color picker.

Check the box to enable it (if it isn't already checked). Exit Settings, and go back to your file with colours in it. Close and re-open VS Code if necessary.

You should now see a coloured square next to each colour - click on these boxes to bring up the color picker.

---

Bonus tip

Although you no longer need to install a third-party extension for this, there are still useful extensions for working with colours that VS Code doesn't (yet) come built-in with. If you work with colours a lot (eg. front-end web dev) I highly recommend installing the Color Highlight extension by Sergei N - I've used this for years and can't count the amount of my time it's saved by allowing me to quickly scan through a file for a colour that I need to adjust.

Answer 2

VS Code now offers a standalone color picker in April 2023 release: https://code.visualstudio.com/updates/v1_78#_standalone-color-picker

Answer 3

With vscode Insiders v1.78 now (and presumably in Stable v1.78 early May 2023) is the ability to have color decorators (the little color box in front of a detected css-formatted color value) in all files, not just html, css, scss, etc.

• A "css-formatted color value" means that values like "red" or "white" do not work to trigger the color decorator box merely with the setting mentioned below, but a color picker can still be invoked with the command below.

See Making a standalone color picker appear for inserting colors

For other file types this can be enabled with the setting:

Editor: Default Color Decorators   // disabled by default
Controls whether inline color decorators should be shown using the default color provider

Here it is working in a text and javascript file:

In addition, even without the color decorators setting above enabled - maybe you don't want the color decorators shown all the time in your files - you can bring up a color picker with the command:

editor.action.showOrFocusStandaloneColorPicker
Show or Focus Standalone Color Picker

Other relevant commands:

editor.action.hideColorPicker
Action that hides the color picker

editor.action.insertColorWithStandaloneColorPicker
Action that inserts color with standalone color picker

In action:

[There are a few bugs as this is brand new.]

Answer 4

For anyone else encountering this issue but not finding a solution in the above answers, this answer from Hashim Aziz led me to the solution for my issue. I was seeing the Color Picker built into VS Code just stop functioning for new colour codes I typed in. I was working on a large CSS of 3,000+ lines and I did not realise that alongside an Enable/Disable toggle for the Color Picker function, it also has a limit to the number of color pickers it will render at once, as seen in the below screenshot. Mine was set to a default of 500, so when I set it to 5000, it fixed my issue. Hopefully this helps someone else in the future!

Answer 5

• Open Visual Studio Code and click on Extensions tab (ctrl + shift + x)
• Search for vscode-color-picker and click on install.
• vscode-color-picker

Answer 6

Sometimes you need to pick a color inside js or txt files, in that case you can just type 'color picker' within Google search.

https://www.google.com/search?q=color+picker

Answer 7

I have battled with this for a while, fortunately I was able to find a way around it... Try this.

1. Open Visual Studio Code and install the "VS Color Picker" extension. The "Install" button will be changed to "Disable"...if that is displayed then you are sure the extension is installed.
2. Press "CTRL + SHIFT + P", a drop-down box will be displayed at the top of VS Code, the items there are arranged in alphabetical order, so you might want to scroll down to find the installed extension "VS Color Picker", or you can use the search box provided to get the installed extension.
3. Hover over the "VS Color Picker" extension, towards the right a settings symbol will show, click on it and a "Keyboard Shortcut" window will be opened, inside this new window you will find the "VS Color Picker" extension, double-click on it, and you will see a pop-up box requesting you to input your desired shortcut for calling the extension...put what you feel comfortable with, for me, I used "Alt + Shift + P", then press enter and close the window....then try it and let me know if it works…thanks.

Answer 8

In release 1.15.1 they have added a color picker.

https://code.visualstudio.com/updates/v1_15#_color-picker

Answer 9

I know it's a bit old topic but it may help someone. To make color pick working you need as Mia mentioned Install Node.js and add it to $PATH. It will ask you during installation about adding both Node.js and NPM (Node Package Manager) to PATH.

If picker still doesn't work there are 3 settings (quote from official description):

1. If the dialog box is not shown correctly, set colorHelper.disableGpu to 1.
2. If that wasn't solved yet, set colorHelper.disableShadow to true.
3. If that wasn't solved yet, set colorHelper.disableTransparent to true.

For me setting colorHelper.disableTransparent to true fixed the problem. colorHelper.disableGpu and colorHelper.disableShadow left default.

To get to that settings press Ctrl+,

Answer 10

The extension Color Picker does actually work but you need to Install Node.Js from this website, also note that when you first try to use the plugin it does an initial configuration which takes a few minutes.