Out-of-the-box color picker

[michelkaporin]

To improve user experience when working with styling in CSS files we plan to add a colour picker.

There are current implementations of colour picker in extension marketplace but they are heavy-weight and do not form part of the core code.

[ajitid]

With custom color palette and color converter too (RGB(A) <-> HEX <-> HSL and others) please :)

[michelkaporin]

The initial plan is to have the following features (which could be extended going further):

1. Ability to select color, shade and transparency
2. Ability to switch between CSS Color Module Level 3 standard colours
   • RGB values
   • hexadecimal values
   • HSL values (CSS3)
3. View and edit current selected color value inside colour picker
4. View initially selected colour from the editor

Going further we could extend the picker with:

1. Colour palettes
2. Showing all the colors of current file to easy pick an existing color
3. Color eyedropper (not sure how feasible is it at the current stage)

Let me know if you find something else very useful and that it is not on the list.

[ajitid]

On "going further":

4. Extending your point 2 by detecting all colors used in the current project and making a color palette out of it.
5. Naming colors present in the color palette. So one can type something like btn-hover (which is then suggested by Intellisense) and press enter rather than typing #43aaaa to get the color.
6. Dynamic coloring- A checkbox, when ticked and a color in the palette if changed, all of its occurrence in the project will be changed.

[anseki]

Hi,
I expect this great feature, and I will do maintenance my "Color Picker" extension until this feature is added to VS Code.

And I hope that the feature supports customizing a format of an output, when picking a color or converting colors.
E.g. it allow us to choose 70% or 0.7. Also, FED or ffeedd, etc.

[dstorey]

I like the plan.

Some additional ideas:

• It would be nice to default to hex shorthand where available (like Extension API: cursor position (determining current location and moving it) #111 rather than Error: Failed to move '*' to the recycle bin. #111111)
• It would be really cool if VS Code understood your linter rules and defaulted to that format for colours if you have one specified. I could imagine this wouldn't be easy as there are more than one CSS linter.
• CSS4 extends hex to be able to specify the alpha channel (4 and 8 digit hex). This may be nice to add but as it isn't well supported yet, maybe this would just encourage interop issues.
• Where you specify both a colour and a background-colour in the same ruleset, it would be really brilliant if the colour picker warned (and maybe clamped the sliders) when the two colours don't meet the two recommended colour contrast ratios. You probably couldn't do it beyond the current ruleset as you don't know outside the browser what will get inherited like you can in F12, but at least it is something.

[isidorn]

@michelkaporin has delivered color picker to master, you can try it out in vscode insiders.
Closing