#COLOR PICKER WHEEL JAVA SERIES#

To get the color off the screen is very simple. When you click in the eye dropper area, the cursor changes to a cross and the image in the eye dropper control is 15x15 pixel rectangle magnified 4 times. The eye dropper control EyedropColorPicker lets you pick a color off the screen. To get and set the value of the slider control use the Percent property, which (just for confusion) takes a value between 0-1, not 0-100 as you might expect (there is something to fix later). The lightness slider is a derived class HSLColorSlider that includes the selected HSLColor. The base class slider control is ColorSlider, this class lets you specify if you are using two or three colors, the orientation of the slider and the orientation of the value, if the value goes from 0-1 or 0-1. Util.Draw3ColorBar(Graphics dc, RectangleF r, Orientation orientation, Once angled, the GDI DrawString is drawn at point (0,0), the ‘rotating point’ is aligned according to the RotatePointAlignment setting and rotating is done by setting TranslateTransform and RotateTransform. In this class, if the angle of the text is 0, the regular formatting is used for positioning the text, but if any angle is used then an extra alignment property is used called RotatePointAlignment. SelectedHSLColor = new HSLColor(angle, saturation, SelectedHSLColor.Lightness) įor the lightness slider, I first had to write a label class which lets you specify the angle at which the text is drawn. PointF center = Util.Center(ColorWheelRectangle) ĭouble radius = Radius(ColorWheelRectangle) ĭouble dx = Math.Abs(mousepoint.X - center.X) ĭouble dy = Math.Abs(mousepoint.Y - center.Y) ĭouble angle = Math.Atan(dy / dx) / Math.PI * 180 ĭouble dist = Math.Pow((Math.Pow(dx, 2) + (Math.Pow(dy, 2))), 0. Here the Hue and Saturation is calculated based on the mouse position and the SelectedHSLColor is then updated causing part of the wheel to be redrawn. A saturation of 0 means the selected color is at the center of the circle, and a saturation of 1 means the selector's distance from the center is equal to the radius of the circle.Ĭalculating the selected color from the mouse position when the selector is moved around the wheel is done in SetColor(PointF mousepoint). The angle at which to place the selector is given by the Hue and the distance from the center is given by the Saturation. Get and Set the Color SelectorĬalculating the position for the color selector is done in ColorSelectorRectangle. In this loop, the coordinates are calculated, and the color is calculated by creating an HSL color and getting the Color property out of it. M_path.Add( new PointF(( float)x,( float)y)) I found that I cannot tell the difference between 1° and 5° steps, so I used 5° steps.ĭouble x = center.X + Math.Cos(angleR) * radius ĭouble y = center.Y - Math.Sin(angleR) * radius Since the color in the color wheel is represented by the angle (Hue), it is a matter of looping from 0 to 360 in ‘degrees’ steps. The points and colors are calculated in RecalcWheelPoints() which is called when the control is resized.

#COLOR PICKER WHEEL JAVA SERIES#

This brush lets you specify a series of points with corresponding colors and a center point with the corresponding color. The drawing of the wheel is done using PathGradientBrush. The ColorWheel class is the actual color wheel control itself. I created the HSLColor class for wrapping the RGB-HSL, and with the help of Wikipedia, it was just a simple matter of typing in the formula. The Color class already implements a GetHue, Saturation and Lightness ( Brightness), but unfortunately does not implement the Set method, so I needed a conversion from a RGB color to an HSL color.Īfter a bit of online searching, I came across this article in Wikipedia which explains the HSL color space and most conveniently also includes the equations for converting between RGB - HSL and vice versa. The color in the color wheel is represented by its hue and saturation value, where hue is the angle (0-360) with red being 0°, green 120° and blue 240°, and where the saturation is the distance from the center, where 0 (center) is white and 1 (on the circumference) is the fully saturated color.

Color control should appear as a combobox with the color picker in the dropdown container.

Opacity slider to adjust the opacity of the color.

Color wheel for selecting any arbitrary color.

Color picker (eye dropper) which lets you pick a color from anywhere on the screen.

Color table with some predefined colors.After looking at a couple of different color pickers, I decided to go ahead and implement my own version which would meet these few requirements:

I needed a color picker for a project I was working on, and I wanted something different from the standard ColorDialog. There are already several articles here on CodeProject describing different types of color pickers, and here is yet another example.

Color picker wheel java