7

When using React, it would be nice to be able to have access to a color picker with hex code when using inline styling. Any extensions or settings out there to remedy this?

Gama11
  • 31,714
  • 9
  • 78
  • 100
Ryan Mcguinn
  • 595
  • 2
  • 10
  • 17
  • What I have seen with vscode is color code auto complete when working with css files. – Isaac Sekamatte Feb 07 '18 at 04:28
  • 1
    I use strictly inline styles in my React applications, but I still keep a CSS file with a .testColor{ color:#ffffff; } class in it in all of my projects. It's not as convenient as having the ability to visually edit colors in JSX, but it works very well for keeping you in your project when you do want to experiment with colors for eventual use in a JSX file. – hawkeyegold Feb 07 '18 at 16:03
  • @hawkeyegold not the answer I was hoping for but that seems like a pretty good workaround. Thanks! – Ryan Mcguinn Feb 08 '18 at 08:42
  • This related issue might of interest: https://github.com/Microsoft/vscode/issues/52364 – ford04 Apr 11 '19 at 08:39
  • See https://stackoverflow.com/a/76066924/836330 for native functionality coming to vscode. – Mark Apr 20 '23 at 18:12
  • Does this answer your question? [How can I enable the VS Code Color Picker outside of CSS-like scopes?](https://stackoverflow.com/questions/50622898/how-can-i-enable-the-vs-code-color-picker-outside-of-css-like-scopes) – starball May 04 '23 at 10:30

2 Answers2

8

I ran into this problem myself, so I built Color Pick.

adamwatters
  • 96
  • 1
  • 3
1

I've created an extension that uses macOS native color picker, and it works well with inline styles and any file formats, as long as the selected color is in a CSS compliant notation (hex, rgba(...) etc)

Dae
  • 2,345
  • 2
  • 22
  • 34