Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Not just another color picker...

0.00/5 (No votes)
28 Jun 2007 1  
An advanced color picker control for your VB.NET applications.
Screenshot - ColorPicker.jpg

Introduction

This is an advanced color picker dialog box written entirely in VB.NET.

Background

So here I am, back at it once more. I needed a color-picker control for a project I'm working on, and like most developers, I turned to my handy toolbar to see what Microsoft had for me in Visual Studio.

It wasn't long before I had a color dialog box coded and ready to use... ran my app, clicked on the select color icon, and there it was - or there something was. I guess technically, it is a color selection tool... I mean, there are colors on the dialog box and you can pick them... but (and I am being kind here) it was hideous.

So I next turned to The Code Project to see what other devs had come up with. I found several that were close to what I wanted, but the best was an older one written in C# by Danny Blanchard that mimicked the Photoshop Color Picker.

So I decided I'd take Danny's code and see if I could decipher enough of the C# to convert his control into a VB.NET control, and this is the result of that work.

Using the Code

There are two Zips for this article: ColorPickerProject.ZIP contains the source code for the dialog box, and ColorPickerDemo.ZIP contains a very simple VB.NET project that makes use of the dialog box.

Public properties
StartPosition Allows you to set the startup position for the dialog box
HeaderText This is the text displayed at the very top of the dialog box
DialogLabel This is the text that will be displayed in the label just above the color box
RGB Gets or sets the current color the dialog box is pointing at
Public event
  • ColorPickerChanged: Anytime the RGB property of the dialog box changes (either from mouse movement or keyboard entry), this event is raised. You can trap the event by adding a handler before showing the dialog box, like this:
  • Private Sub SelectColor()
        Dim OriginalColor As Color = Color.FromArgb(120, 120, 120)
        Dim cp As New ColorPicker.cp
    
        cp.StartPosition = FormStartPosition.CenterScreen
        cp.HeaderText = "This is a demo of the Color Picker Dialog Box"
        cp.DialogLabel = "Select Background Color"
        cp.RGB = OriginalColor
    
        AddHandler cp.ColorPickerChanged, AddressOf ColorChanged
    
        cp.ShowDialog()
    
        If cp.DialogResult = Windows.Forms.DialogResult.OK Then
            SampleLabel.BackColor = cp.RGB
        Else
            SampleLabel.BackColor = OriginalColor
        End If
    End Sub
    
    Private Sub ColorChanged(ByVal _rgb As Color, ByVal _MarkerColor As Color)
        SampleLabel.BackColor = _rgb
        SampleLabel.ForeColor = _MarkerColor
        SampleLabel.Refresh()
    End Sub

Points of Interest

You will probably notice from the screenshot above that I am not allowing the user to change the CMYK values. This was done for a number of reasons, starting with the most important: I don't use CMYK! LOL. Also, CMYK to RGB is not an exact science. There are far more colors in RGB than there are in CMYK, which means there are multiple RGB values for each CMYK value. Ultimately, this results in an accurate RGB to CMYK... but not the other way around.

It's also interesting to note that very few leaders in the printing industry will agree on how to convert in either direction... everyone seems to use their own conversation, resulting in close but not quite approximations... sounds funky to you? Let me explain how this is:

CMYK (Cyan, Magenta, Yellow, and Key or Black) was developed to save printers money. You see, black ink is far less expensive than colored inks. Printers learned they could reduce the amount of colored ink they use by a little, and increase the amount of black used, and the result is a very realistic approximation to a True Color image... the less colored ink you use - the more black you have to use to make up for the loss of color. Of course, you can only go so far with this before the image loses its color information. Still, you can take an RGB and calculate the CMYK value - and then you could reduce the CMY and increase the K, and still have the same RGB... and that's why you cannot say "This is the formula for converting". At best, all you can say is, "This is one of the ways you can convert".

Anyone still reading the CMYK vs. RGB debate by this point really needs to consider getting away from their PC a little more! Believe me... it's pretty boring stuff.

Nevertheless, I did find a nice conversion formula that Adobe uses, and that's what I put into this control.

HSL anyone? HSL is Hue, Saturation and Luminesc (brightness), which is yet another way of looking at colors, and is the backbone of all color conversion processes. This dialog box takes all RGB values and converts them into HSL values, then displays the results in the text boxes. You can anchor any of the HSL or RGB values by clicking on the radio button next to the appropriate value you want to anchor.

History

Re-uploaded the demo project - the original one wasn't pointing correctly to the local DLL, and may have cause an unresolved warning if you loaded it into Visual Studio.

The link to Danny's original control did not make it into my original article. I've re-added the link to his name mentioned in the Background section.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here