Integrated Color Picker for Visual Studio IDE.
Click here to download Color Picker extension for Visual Studio from Visual Studio Gallery.
Note: please show your support by giving a quick review in vsgallery . It only takes a few seconds.
This tool will very useful if you are working as a Web Developer or UI designer, who mainly uses Visual Studio for the day to day assignments.
This tool offers the below options,
- Highlight colors in Visual Studio Document Editor (.css”, “.scss”, “.less”, “.asp”, “.aspx”, “.htm”, “.html”, “.cshtml”, “.vbhtml”, “.xaml” are enabled by default), Customize using Tools-Options-ColorPicker.
- Edit color using double click from any enabled file (editor).
- Insert colors to any active text document
- Color Selection from Color Canvas.
- Color Selection from Available Colors.
- Color Selection from Standard Colors.
- Color Selection from Saved Colors.
- Color Selection using Eyedropper.
- Copy\Paste Color codes (Name, #HEX, rgb, rgba, hsl, hsla, hsb\hsv, cmyk). rgb and rgba are offered in different formats.
- Selected color’s Tints & Shades.
- Color code comparison of Orginal and New.
Currently this tool works with below Visual Studio versions (Visual Studio Theme supported),,
- Visual Studio 2012.
- Visual Studio 2013.
- Visual Studio 2015.
- Visual Studio 2017.
Color Picker can be accessed via Tools->Color Picker (will open a Dockable Window).
Tools->Color Picker
Tools-Options-Color Picker
Editor
Color Picker in Editor
I have uploaded the initial source code in CodeProject. Please share your suggestions and feedback.
Hi,
my first impressions:
1. I miss – since I used this in the past a lot of more often – a switch to use a HSL color specification.
2. The RGB spinboxes vary in the width depending on the count of digits to be displayed! But this non-fixed width of the spinboxes changes the total width “Color Canvas” UI element dynamically.
3. In C++ I often have to use the RGB macro, but placing the cursor inside this macro, selecting the macro, or selecting the 3 integer values does not pre-fill the color picker while opening it. I can’t even paste the values into an edit field to let the color picker switch to this RGB color values.
4. I only can copy a HTML/CSS related hexadecimal formatted number as string, but I cannot copy a list of three integer values, separated by commas, a preprocessed template like “RGB(%r, %g, %b)”, or the result of an RGB macro evaluation, the DWORD value containing the RGB+Alpha value.
Any chance to get not only cosmetical, but functional updates integrating the color picker better in the editor?
Best regards,
Martin
Thanks Martin for the feedback, All suggestions sounds good to me.
I can update this tool with your suggestions except editor support. Will reply here soon.
Hello Martin, I just released version 1.1 with some changes. Please try updating.
https://shemeerns.com/2014/07/02/integrated-color-picker-1-1-released-for-visual-studio-ide/
Excellent, Would it be possible to add a combo with the known named colors?
It is already there.
Available Colors and Standard Colors are there in the color picker combo box. I will be changing it to a list box (in next version).
Please rate this in visual studio gallery. Thank you.
I see now but you have to hover it to see the name!
Even I wanted to see the name. :). I will be uploading another version soon with the changes.
Thanks Eric for the suggestion, I have made your suggestions available in v1.1, please try updating.
https://shemeerns.com/2014/07/02/integrated-color-picker-1-1-released-for-visual-studio-ide/
Hi
Thanks for the upgrade. I love it. The only/last thing I would like now is the possibility to enlarge the form if you ever do another version of the tool. Currently, it seems that it is limited to the height of the controls on the left.
Bonne journée
Éric Moreau Conseiller Principal / Senior Consultant Moer inc. (http://www.emoreau.com) MCPD – Windows Developer, Visual Developer – Visual Basic MVP Communauté .Net Montréal – SQL User Group Co-Leader (http://www.dotnetmontreal.com) LinkedIn profile: http://www.linkedin.com/in/emoreau ________________________________
Sure, I would like to have a review from you on vsgallery, could you 🙂
Thanks for all the changes!
The only and last thought is … I want to start the color picker from my C++ source code! 😉
If I want to insert a COLOREF or want to change a COLOREF, I’d really like to use your color picker from the source code editor to get the new or change COLOREF as easy as possible back!
But this is … complaining on a high level … 😉
So – what’s about a next enhancement? A color wheel with strategies to find matching colors, to fill color palettes … eventually with automatic C++ Win32 source code generation?
No, no, just joking!
Your color picker is wonderful!
Best regards,
Martin
Thank you :).
also please do a quick review in vsgallery.
Hello sheemer, first of all thank you for a nice plugin, unfortunately I can’t be install it for VS Express 2013 for Desktop, does your installer support Express versions of VS? How can i make it work with the express version? I would be glad if you help, thanks in advance.
Cem
Unfortunately Express editions doesn’t support extensions, You might be interested in Color Picker Desktop version- https://shemeerns.com/tools/desktop-color-picker/
Please could you let me know how I can uninstall this? Since installing my visual studio takes 10 mins to open and cannot be accessed when alt-tabbing between apps. I’m prob just unlucky with this but would prefer to just remove.
Thanks
Are you still facing issues with version 2.0? Just wanted to check the mentioned issue is till there or not, Thank you.
Amazing utility, you are the best!!! Extremely useful for lightening / darkening an existing colors, so the existing color palette can be maintained, but items can be emphasized or not on the screen.
Just now I wanted to use your Color Picker in a way it doesn’t support (yet)! 😦
I have a color and I want to know if there is a name for this color.
And if there is no named color for the given RGB values, I wanted to know, which colors are near to it.
Or otherwise I wanted to filter all color names using a name fragment to look for a good matching color.
But nothing of these use cases are currently supported?
Any chance for enhancments like this?
PS: And … still often wishing to find in your color picker … the HSV or HSL values!
Hi Sheemer,
Thanks for the test version and it looks quiet good!
Thanks for picking up some of my suggestions!
Just one question, why there is a scrollbar between “Shades” and “Tints”?
Best regards,
Martin
Forgot the screenshot showing the scrollbar https://farm9.staticflickr.com/8873/17970359258_c651d23bd7.jpg and to mention … I use 125% scaling!
Glad to hear your comments. I will be uploading this to vsgallery today.
Scrollbar was given to scroll tints and shades together, probably will be doing a cosmetic change on that.
Hello Martin, Have released 1.2 version to the visual studio gallery, Thanks for sharing your comments and Please drop a feedback there in gallery.
Hi,
Sincerely I have now, after needing to switch to high-contrast-theming and to 150% zoom (control/Display or Appearance), problems with the color picker:
Some the group labels are or checkbox label is missing and the window background does not use the high-contrast-theme window background color (GetSysColor(COLOR_WINDOW)).
I think, that changing the window background color will make the group labels/checkbox label reappear!
Another thing I realized … the state of the checkbox to include or not to include the alpha value is not persistent, is it?
Could you plese take a look at the color picker or at your applications/extensions taking care for accessiblity/barrier free usage?
Many thanks in advance!
Best regards,
Martin
Hello Martin, Please share the exact steps to replicate these points. Thank you.
Sorry, for this really late, late reply!
How to reproduce the problems I realized?
To switch on high-contrast-mode:
– press and confirm the change
– or use the “high-contrast-#1 design” in personalization (control panel)
To switch desktop zoom, use the display settings, change it and re-login
Please try upgrading to version 2
my only complaint is that the dialog box is shown modally so I cant have the dialog up while coding in the IDE. its a nice utility but it would be nice to be able to have it available as a non modal dialog that way I can use it as a reference when coding.
Hi Kevin, I have made some changes to the color picker, please let me know your feedback after updating to latest version.
Please consider making the dialog non-modal with option to keep on top – thanks!
Hello KCS, Have made the color picker as a tool window, please let me know your feedback after updating to latest version
I found the standalone version thanks. Could you update it to include the extra color code conversions and the Tints & Shades tab as per the VS version? Thanks!
Sure, Will take some time.
Any chance that the next version will support normalized color values? I.e. instead of from 0 to 255, it will have an option to have from 0f to 1f?
This is a good addition, Surely I will consider this in next release.
Hey I was updating the extension, just thought of confirming, Can you write the below ARGB to normalized color (in expected format)
ARGB: 225, 191, 162, 91
Normalized: ?
Normalised it would be: 0.88, 0.75, 0.64, 0.36, basically every number divided by 255.
But now that you mention it, please also support RGBA (i.e. alpha in the end), as usually in APIs alpha comes in the end, so:
ARGB Norm: 0.88, 0.75, 0.64, 0.36
RGBA Norm: 0.75, 0.64, 0.36, 0.88
Thanks ;-]
Please let me know your feedback after installing version 1.3 from visual studio gallery
Hi, the color-picker plugin is relay good and helpful. Great work!
It would be great, if your Plugin can also support the Visual Studio 2013 Dark Theme. (You can change the theme in the settings) There are some compatibly problems.
Thanks
RK
Thanks reporting. will address this issue in the coming version,
This should be good in version 2, Please let me know your feedbacks
Pingback: How To Make A Color Picker In Visual Basic | BuySaleHouse
Hi Shemeer,
I recently tried to use the color picker as tool window, but … since I’m using desktop zoom and was in a debug session with docked windows like callstack, watch, etc. the content of the color picker tool window was not completely accessible and partly out of sight.
Could you please add scrollbars for the case, the window size is insufficient to display the complete color picker window content?
BTW wouldn’t be nice to have the nearest (to the current color) available/standard color in view/highlighted if switching to the related tab?
And … the W3C specifies guidelines for colors to be used, e.g. formulas to calculate the hue and brightness distances.
For UI design it might be very helpful to have the ability to compare two colors to get informan about the “difference” between those two colors and if they are usable within the W3C defined range.
So it would be nice to be able to compare the current color with a color chosen in a tab.
Or nice would be a function that calculates the color just fulfilling the rules of the W3C changing the hue and the brightness.
So far from me!
Best regards,
Martin
As usual thanks for the great points, will be checking these points in coming version.
Could you you please share the scrollbar requirement case with steps to replicate the same.
I use 1920×1280 display resolution and 150% display zoom.
I have docked windows in VS2015 at the bottom of the main window.
Now open the color picker and drag it to the center of the client area to make it a “document” window with a tab in the row of document tabs.
Now resize the bottom docked windows (callstack, watch, auto, local, etc.) dragging the splitter to the top, so that there is not enough available height anymore to show the complete color picker contents.
This should be good in version 2, Please let me know your feedbacks
Thanks for the color picker tool. I have to admit that it’s only useful to me if it detects a color already existing in my CSS file and then allows me to change it from what it was. Editors like RubyMine do this, as an example – https://www.jetbrains.com/help/ruby/2016.2/changing-color-values-in-style-sheets.html
Thanks for the suggestion, next version should have this functionality.
How can I change the background color of the Color Picker dialog? Blackish text and background make the labels impossible to read.
Also, is there a way to clear “saved” colors”?
Finally, an enhancement, how about an “eye dropper” tool to pick a color from anywhere on the screen?
Thanks,
djg
Hello David,
How can I replicate the background color issue?
You can use the del (delete) key to delete a saved color.
Are you not able to use the ‘eye dropper’ any where in the screen?
Thank you.
This should be good in version 2, Please let me know your feedback.
Hi there, thanks for this great plugin. I have one suggestion. Do you think we could attach names to Saved Colors? Also, it would be great if the list could be re-ordered. For bonus points, grouping of colors would be fantastic 🙂
Thanks for the comment, added color names 🙂 in latest version.
Oh also, it would be useful to edit the extensions which are analyzed for color codes. If that’s too much, adding .cs files would be helpful as I have some theme palettes defined in C# code.
Please update to latest version and add the required file extension using Tools-Options-Color Picker, Let me know your feedback.
Hey,
Awesome plugin.
A couple suggestions for improvement:
#1 Pasting a full color code with mouse Right-Click doesnt seem to work properly. The color doesnt change.
See screenshot: http://imgur.com/a/AozIm
#2 Pasting a color code without the hash part using the keyboard CTRL+V results in an error message. Keep in mind the right part of the code was correctly selected before pasting, but it still failed.
See screenshot: http://imgur.com/a/mNm4s
Regards.
Thanks for reporting this, please update to latest version and let me know the feedback.
I like that it underlines all the css colors in the appropriate color. The only problem that I have with it is that it also highlights JQuery IDs with colors as well.
For example, if I type $(‘#ddBasicSearch’), it underlines the #ddBa part in a tan color.
I cannot find a way to change the default behavior of this or find a way to prevent code underlining. Either one would solve my problem.
Thanks for the comment, you can disable the color highlighting option from Tools-Options-Color Picker in latest version.
Thanks. That is exactly what I needed. Awesome tool.
Hey, when I go to install the color picker, it does not allow me to install to VS2017. Any Idea?
Hello, Is it throwing any exception, which version of vs 2017, what is the OS?
Hello since I updated my Visual Studio to 2017 two things happened. First double click on any color opens the Color Picker which is very frustrating. Second There seems to no options on Tools -> Options anymore. How can I disable double click Color Picker opening?
Are you using version 2.3? Latest version got an option to enable/disable color highlighting.
I don’t want to disable color highlighting. I want to prevent Color Picker from showing when I double click on a color. I mean if I have color=”orange” and i double click orange, Color Picker shows up, which is kind of annoying if you just want to copy the color. About the version, you were right. I didn’t use the latest version. Now I have options but there is not an option to disable this behavior.
Will add another option in next version, thanks for your reply.
Thank you sir. Best regards.
Hello, Please update to version 2.4 to get this feature, Please have your rating posted in visual studio marketplace.
Great tool! Gave you 5 stars on the msdn page. One request: could you have an option to put the tabs under the color codes group box? This way it docks to the left or right side of VS nicely
Fantastic tool! Many thanks for making this available.
The only suggestion I have is that since I often work with colors in VS source or in XML files where the color is represented simply as a set of 3 0-255 values, would it be possible to add one more “recognizer” to your color recognizer algo that can see those values as colors?
For instance, I might have in an xml file
backColor=”123, 244, 5″
If I change that to a hex representation, your tool sees the color, for instance, #efdfed
If I change it to rgb, your tool can see it, ie rgb(123, 244, 5)
But, it can’t see the color if it’s just the bare three numbers.
In any case, fantastic work again!
Thanks Darin for the good words, let me check the possibility in version.
Thanks for the reply. If there’s any way I can help, let me know. I saw the source of the older version but didn’t see any updated links out there.
In any case, thanks again!