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), 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

ColorPickerToolsOptions

Editor

editor

Color Picker in Editor

 

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

71 thoughts on “Color Picker

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s