15,177,490 members
Articles / Programming Languages / Visual Basic
Tip/Trick
Posted 6 Jan 2016

11.2K views
3 bookmarked

# Triangular Color Selector

Rate me:
6 Jan 2016CPOL2 min read
Creating a simple color selector dialog

## Introduction

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:

VB.NET
```//
//        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.

VB.NET
```//
//        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`).

VB.NET
```//
//       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 :-)

## About the Author

 Unknown
Programming in .NET started as a hobby, but has gradually become an essential part of my PC life
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 --