Click here to Skip to main content
13,198,322 members (54,596 online)
Click here to Skip to main content
Add your own
alternative version


2 bookmarked
Posted 6 Jan 2016

Triangular Color Selector

, 6 Jan 2016
Rate this:
Please Sign up or sign in to vote.
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).

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.

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

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171020.1 | Last Updated 6 Jan 2016
Article Copyright 2016 by mycenean
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid