Color Picker

Integrated Color Picker for Visual Studio 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), Additional Parsing, 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).

cpmenu

Tools->Color Picker

ColorPicker

Tools-Options-Color Picker

ColorPickerToolsOptions25

Editor

editor

Color Picker in Editor

 

I have uploaded the initial source code in CodeProject. Please share your suggestions and feedback.

Advertisements

102 thoughts on “Color Picker”

  1. Pingback: Integrated Color Picker for Visual Studio IDE. | Shemeer's World of Programming

  2. 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

    Reply

    • 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.

      Reply

  5. Pingback: Integrated Color Picker 1.1 released for Visual Studio IDE. | Shemeer's World of Programming

  6. 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

    Reply

  7. Pingback: (Instant) Desktop Color Picker. | Shemeer's World of Programming

  8. 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

    Reply

  10. 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.

    Reply

  11. 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!

    Reply

  12. Pingback: Integrated Color Picker 1.2 released for Visual Studio IDE. | Shemeer's World of Programming

  13. 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

    Reply

  14. 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.

    Reply

  16. 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!

    Reply

  18. 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

    Reply

  19. Pingback: How To Make A Color Picker In Visual Basic | BuySaleHouse

  20. 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

    Reply

    • 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.

      Reply

      • 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.

  22. 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

    Reply

  23. 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 🙂

    Reply

  24. 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.

    Reply

  25. 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.

    Reply

  26. Pingback: File Path On Footer version 1.4.9 adds support for Visual Studio 2017 – Shemeer's World of Programming

  27. 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.

    Reply

  29. 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?

    Reply

  30. 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

    Reply

  31. 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!

    Reply

  32. Hi, You previously added names to saved colors. I can’t figure out how to change the name of a saved color. I’m using v2.5

    Reply

  33. Fantastic plugin, what a lifesaver!! I ran into a bug, go to http://color.adobe.com, copy the hex code below any color, go to the plugin, and pasting that text from the clipboard crashes the plugin. I have to quit VS. It doesn’t matter if I manually type in a ‘#’ character first or not. It seems like it can’t handle the non-plain text clipboard format, I presume? If the clipboard is plain text, pasting works fine.

    Great work though, I’m loving it!!

    Reply

  35. I find the underline highlighting to be very distracting, due to the variable length and being excessively long at times. I’d much prefer an alternative display option that simply inserts a clickable color square to prefix the associated color-code – consistent, functional and not distracting to the code.

    Reply

  37. Hi,
    I really like using Color Picker in VS 2017 Enterprise. I must have missed a setting somewhere, but is it possible to open the color editor by right-clicking (or some other way) instead of when I double-click on a color in my code?

    When I double-click color text, I am selecting it to change it and I have to close the editor every time. I usually know what I want to type, but would need the editor on occasion for a color pick so opening it by right click or some other way would be much more usable.

    Reply

  38. Hello. The error mentioned by bafsar occurs when the decimal separator in the system is not a period, but for example a comma. Obviously your plugin focuses on the system decimal separator, and this seems to lead to an error. In addition, I suggest you change the way that the color in the IDE is displayed to something like this: https://1drv.ms/u/s!AiMlB6TArYixjaUqahDBvhufvlpoCg It looks much better.

    Reply

    • @Constantine I have to beg to differ that the way to display the colors as demonstrated in your image is better than the current way. One of the reasons I love this extension is BECAUSE it displays the color the way it does.

      But it would be awesome if it were a simple setting so the use can decide which way to display the colors 🙂

      Reply

  43. The error mentioned by bafsar occurs when the decimal separator in the system is not a period, but for example a comma. Obviously your plugin focuses on the system decimal separator, and this seems to lead to an error. In addition, I suggest you change the way that the color in the IDE is displayed to something like this: https://1drv.ms/u/s!AiMlB6TArYixjaUqahDBvhufvlpoCg It looks much better.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Google photo

You are commenting using your Google account. ( Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s