3

I'm bored and I'd like to create my own color picket.

First I'd like to generate a color swatch. How would I create a color swatch?

This is a two part question.

  1. How do I draw a single pixel point given an ARGB value.

  2. What values existing in those ARGB values? What are my ranges?

Would looping and drawing these points be efficient? My intention is to create this image in memory, then cast it to a Drawing.Image class, then set it to a picturebox.

Thanks for the suggestions.

2 Answers 2

7

It's relatively simple, as long as you're smart about performance-related issues. Color pickers are one of my favorite wheels to re-implement when I'm bored or feeling creative.

You can draw a single pixel point given an ARGB value using the SetPixel method of the Bitmap class. Looping over each pixel of a new, appropriately-sized Bitmap object, and setting it to the appropriate color, is the easiest way to get this done. If you do this once when your color picker is opened, and cache the bitmap object in a class-level variable, repainting it onto the control when necessary instead of redrawing it each time, the performance is perfectly respectable.

Otherwise, SetPixel is about the slowest way of painting a bitmap imaginable. There are tricks to speed it up, like locking the bitmap and/or dropping into native code, but these don't make things any simpler. What will simplify your code drastically, and even provide a modest performance increase, is using a gradient brush for drawing purposes, instead. The Graphics class encapsulates the drawing functionality of GDI+ extremely well, and creating a LinearGradientBrush object to do your drawing
is quite straightforward.

As far as your second question, what are the ranges of the values you need to use, the first order of business is understanding the color models that you want to present on your color picker. The two choices that are probably most common and easy to work with are RGB and HSV (also known as HSB; HSL is something entirely different).

In the RGB color space, a single color is represented by its component values of red, green, and blue. The standard scale represents those values from 0 (minimum) to 255 (maximum). White is represented by (255, 255, 255), while black is represented as (0, 0, 0). Since this is the native color space for monitors, many graphics programs use it. Of course, it's not very intuitive to humans, who have difficulty figuring out exactly how to express, say, orange, purple, or brown in the RGB model.

Rather, the HSV model is much more intuitive, and generally the one you see used to draw fancy looking color grids/gradients. This is the model used (by default) on Photoshop's color picker, which is probably the most famous of all:

   Adobe Photoshop Color Picker

In HSV, a color is represented by three attribute values: hue, saturation, and value (or brightness).

  • Hue corresponds roughly to the degrees of a color circle, so it ranges from 0 to 360.

         The Color Circle, indicating degrees of hue

The saturation and value attributes are often thought of as percentages, ranging from 0 to 100 (although they can really be represented by any range of values).

  • Saturation describes the distance of the color from the center of the circle. Colors on the edge of the circle are fully saturated (100), while colors towards the center are unsaturated (white, or 0).

         Saturation

  • Value (or brightness) is intuitive. A fully bright color has the maximum value of 100, while a color lacking brightness has the minimum value of 0 (black).

         Value

Since this answer is getting long already, I'll refer you to a couple of sample implementations of color pickers already available on the Internet, instead of explaining the step-by-step here:

  • The ColorPicker.NET control is a very comprehensive offering, with a surprisingly thorough article
    to accompany it.

  • A Primer on Building a Color Picker User Control with GDI+ in VB.NET or C# from the MSDN Magazine is the first color picker implementation I ever saw online, and though relatively simple by comparison, does an outstanding job of explaining the technical details. (I've taken many of the explanatory diagrams used in this answer from his article.)

1
  • Fantastic answer. Definitely gave me a lot to think about. Thank you!
    – delete
    Feb 21, 2011 at 13:04
0

I'd say get an image of the color pane you want, then detect where the mouse cursor is on the image. The pointer position is X and Y properties in MouseEventArgs. From those coordinates, calculate the color/transparency.

RGB range is 0-255 and A is 0-100

Hope this help

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.