Click here to Skip to main content
15,177,490 members
Articles / Programming Languages / Visual Basic
Posted 6 Jan 2016

Tagged as


3 bookmarked

Triangular Color Selector

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
6 Jan 2016CPOL2 min read
Creating a simple color selector dialog


I decided to write my own color selector for use in my own .NET applications, something intuitive and simple, that would cover the entire spectrum of colors available. Plenty of such color selectors exist, but I thought it would be a good learning experience to re-invent the wheel entirely on my own. I wound up settling on the Maxwell color triangle, and getting it all to work right required dusting off some old Trigonometry books (just kidding, it only required Googling...).

Basically, what I decided to do was divide an equilateral triangle into 3 quadrilaterals, as regions where the color byte values are R = 255, G = 255 and B = 255, respectively. (The center obviously being defined as R=B=G=255).

Image 1

Within those respective regions, the values of the other two distal color components depend on the relative distance of the selected point from the other 2 vertices, those values being reduced from 255 in direct proportion to the distances.

Image 2

The trick is of course to get those relative distances, and that obviously required using the Pythagorean theorem, sines and cosines. Simple basic trigonometry. For example, it required getting the vertices of the triangle, where Sqwidth is the width of its bounding rectangle and THeight is the height from the triangle base:

//        VertexR = New PointF(Sqwidth / 2, 0)
//        VertexG = New PointF(0, THeight)
//        VertexB = New PointF(Sqwidth, THeight)

And for example, I also needed the side length of the equilateral triangle, the midpoints of each side of the triangle, the triangle center, etc.

//        TriangleSideLength = (THeight ^ 2 + (Sqwidth / 2) ^ 2) ^ 0.5
//        Dim midx As Double = Math.Abs((TriangleSideLength / 2) * Math.Cos(Rad60))
//        Dim midy As Double = Math.Abs((TriangleSideLength / 2) * Math.Sin(Rad60))
//        MidRB = New PointF(Sqwidth / 2 + midx, midy)
//        MidRG = New PointF(Sqwidth / 2 - midx, midy)
//        MidGB = New PointF(Sqwidth / 2, THeight)
//        TriangleCenter = New Point(Sqwidth / 2, Math.Abs((TriangleSideLength / 2) / Math.Cos(Rad30)))

With a few more calculations, you can get the relative distance of your selected point from each of the two vertices, to determine how much to reduce those values from 255.

Once the RGB values are calculated based on the selected point, that is defined as the "selected" color (SelectedColor), but that alone doesn't give you all possible color combinations, only all combinations where one of R, G or B is maximized (255). So, I provided a brightness track bar (BrightnessTB) that proportionally reduces the RGB values of the SelectedColor of the triangle, for the final output color. These are the values that are displayed in the NumericUpDowns (rUD, gUD and bUD).

//       rUD.Value = Int(Math.Max(0, Math.Min(255, SelectedColor.R * BrightnessTB.Value / 100)))
//       gUD.Value = Int(Math.Max(0, Math.Min(255, SelectedColor.G * BrightnessTB.Value / 100)))
//       bUD.Value = Int(Math.Max(0, Math.Min(255, SelectedColor.B * BrightnessTB.Value / 100)))

Finally, when calling a dialog to change settings, you want your current settings automatically inputted into the dialog when it opens. To allow this, I had to make a routine to calculate the point corresponding to a given color combination of RGB. (the commented out function: Public Function GetTrianglePointForColor(c As Color) As PointF)

Simple and intuitive (3 colors as 3 points of a triangle), with the satisfaction of being homegrown :-)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Programming in .NET started as a hobby, but has gradually become an essential part of my PC life Smile | :)
Unfortunately most of my programs are specifically tailored to my work and interests, so difficult to share with others!
But there are a few perhaps...

Comments and Discussions

-- There are no messages in this forum --