Introduction

Sometimes when you are designing a form, or creating some other kind of visual output, you'd like to generate an array of colors which may be shades of a single color or a discernible sequence of individual colors such as the spectrum of a rainbow.  This can be useful for coloring bars in a graph or generating a gradient around some specified color.  Unfortunately the .Net framework does not give us any sophisticated solution for this.

While any number of complex code solutions could be created to attempt to address this problem, if we think of the RGB color space spatially, we can construct a three-dimensional cube which represents all possible colors and can easily be traversed mathematically.

The RGB Color Cube

This is a RGB Color Cube:

A color value in the RGB color space has three components; the Red, Green and Blue intensity values.  These values are expressed as Bytes and are therefore limited in range to 0 through 255.  We can think of these R, G, and B values as being the axis of a three dimensional space; in other words, the x, y, and z axis of a grid.  So we can define the RGB color space as a cube, 255 units on a side, with an origin at [0,0,0] which represents the color Black.  If we are facing the cube then, the red axis runs to the left, the blue axis to the right, and the green axis points upward from black.  The furthest corner from black would be [255,255,255], or White.

The primary RGB and CMYK colors (red, green, blue, yellow, cyan, magenta, black, and white) exist at each corner of the cube:

The spectrum of full intensity colors (that is, the rainbow) is represented by following the outside edges of the cube from red, to yellow, to green and around to magenta.

And since we have defined a three dimensional space we can find any sequence of colors between two colors by measuring angles and distances.

Coding a ColorCube Class

Creating a class to represent this concept of a RGB Color Cube is really little more than a collection of functions.  There is no data-set to work with as, truly, the entire color cube concept is represented in the diagrams above.  Once we have decided to think of a color as a location within a predefined three-dimensional space, there is little more to do than math in order to generate various color sequences.  So rather than walk though writing the whole class step-by-step, we will just look at a few interesting properties of the cube and the related code.  A complete class example will be provided at the end of the article.

Brightness is Distance from Black

One interesting feature of the cube is that we can quickly determine the overall brightness of a color by measuring the distance from black using a basic distance formula:
Public Shared Function GetDistance(ByVal source As Color, ByVal target As Color) As Double
 Dim squareR As Double = CDbl(target.R) - CDbl(source.R)
 squareR *= squareR
 Dim squareG As Double = CDbl(target.G) - CDbl(source.G)
 squareG *= squareG
 Dim squareB As Double = CDbl(target.B) - CDbl(source.B)
 squareB *= squareB
 Return System.Math.Sqrt(squareR + squareG + squareB)
End Function

While searching the net for some other related information, I came across some code to calculate a similar value in terms which can be represented by a Byte.  A translation of that code is included in the class below.

Colors can be compared by brightness as part of determining similarity or to ensure sufficient visible difference in a series of similar colors.

Public Shared Function Compare(source As Color, target As Color) As Integer
 Dim delta1 As Double = GetDistance(Color.Black, source)
 Dim delta2 As Double = GetDistance(Color.Black, target)
 Return delta1.CompareTo(delta2)
End Function

Walking the Edges of the Cube

There is an algorithm used to move around the edges of the cube when generating a rainbow spectrum sequence which may be worth looking at for a moment.  The most basic color cube could be implemented with just this routine:
Public NotInheritable Class ColorCube
 Protected Sub New()
 End Sub
 
 Public Shared Function GetColorSpectrum(increment As Integer) As Color()
 Dim result As New List(Of Color)
 Dim rgb(2) As Integer
 Dim idx As Integer = 1
 Dim inc As Integer = increment
 Dim cmp As Func(Of Integer, Integer, Boolean)
 
 rgb(0) = 255
 cmp = AddressOf CompareLess
 Do
 result.Add(Color.FromArgb(rgb(0), rgb(1), rgb(2)))
 If cmp(rgb(idx), inc) Then
 rgb(idx) += inc
 Else
 Select Case idx
 Case 1
 If rgb(2) < 255 Then
 rgb(idx) = 255
 idx = 0
 cmp = AddressOf CompareGreater
 Else
 rgb(idx) = 0
 idx = 0
 cmp = AddressOf CompareLess
 End If
 Case 2
 rgb(idx) = 255
 idx = 1
 cmp = AddressOf CompareGreater
 Case 0
 If rgb(2) < 255 Then
 rgb(idx) = 0
 idx = 2
 cmp = AddressOf CompareLess
 Else
 rgb(idx) = 255
 Exit Do
 End If
 End Select
 inc *= -1
 End If
 Loop
 result.Add(Color.FromArgb(rgb(0), rgb(1), rgb(2)))
 Return result.ToArray
 End Function
 
 Protected Shared Function CompareLess(value As Integer, inc As Integer) As Boolean
 Return value < 255 - Math.Abs(inc)
 End Function
 
 Protected Shared Function CompareGreater(value As Integer, inc As Integer) As Boolean
 Return value > Math.Abs(inc)
 End Function
End Class

This code is utilizing two helper methods making it easier to change functionality between moving from 0 to 255 and from 255 to 0 through the color component values.  This allows a relatively simple loop to walk around the edges of the cube as depicted in the image above.

Getting a Range of Colors

By organizing the RGB color space into a cube, generating a sequence of colors is little more than picking a starting color, a direction to move, and an increment of movement and then calculating a series of points along that line.  The following function will return a color which is at a given angle and distance from the specified color.  The angle is expressed in terms of azimuth (red to blue) and elevation (no green to full green).
Public Shared Function GetColorFrom(source As Color, azimuth As Double, elevation As Double, distance As Double) As Color
 Dim a, e, r, g, b As Double
 a = azimuth
 e = elevation
 r = distance * Math.Cos(a) * Math.Cos(e)
 b = distance * Math.Sin(a) * Math.Cos(e)
 g = distance * Math.Sin(e)
 If Double.IsNaN(r) Then r = 0
 If Double.IsNaN(g) Then g = 0
 If Double.IsNaN(b) Then b = 0
 Return Color.FromArgb(Math.Max(Math.Min(source.R + r, 255), 0), Math.Max(Math.Min(source.G + g, 255), 0), Math.Max(Math.Min(source.B + b, 255), 0))
End Function

This allows us, for example, to create a function which can return a selection of colors taken from a sphere surrounding a target color:

Public Shared Function GetColorsAround(target As Color, distance As Integer, increment As Integer) As Color()
 Dim result As New List(Of Color)
 For a As Integer = 0 To 359 Step increment
 For e As Integer = 0 To 359 Step increment
 Dim c As Color = GetColorFrom(target, a, e, distance)
 If Not result.Contains(c) Then
 result.Add(c)
 End If
 Next
 Next
 result.Sort(AddressOf Compare)
 Return result.ToArray
End Function

Or, with some additional helper methods, a function which can get the series of colors on a line between two given colors:

Public Shared Function GetColorSequence(source As Color, target As Color, increment As Integer) As Color()
 Dim result As New List(Of Color)
 Dim a As Double = GetAzimuthTo(source, target)
 Dim e As Double = GetElevationTo(source, target)
 Dim d As Double = GetDistance(source, target)
 For i As Integer = 0 To d Step increment
 result.Add(GetColorFrom(source, a, e, i, True))
 Next
 Return result.ToArray
End Function
Protected Shared Function GetAzimuthTo(ByVal source As Color, ByVal target As Color) As Double
 Return WrapAngle(Math.Atan2(CDbl(target.B) - CDbl(source.B), CDbl(target.R) - CDbl(source.R)))
End Function
 
Protected Shared Function GetElevationTo(ByVal source As Color, ByVal target As Color) As Double
 Return WrapAngle(Math.Atan2(CDbl(target.G) - CDbl(source.G), 255))
End Function
 
Protected Shared Function WrapAngle(ByVal radians As Double) As Double
 While radians < -Math.PI
 radians += Math.PI * 2
 End While
 While radians > Math.PI
 radians -= Math.PI * 2
 End While
 Return radians
End Function

As you can see these are mostly simple functions performing some minor trigonometry.  There's no magic in the code... the magic is in the concept of the color cube.

Summary

By visualizing the RGB color space as a three-dimensional cube, it becomes possible to generate arrays of Color instances representing a spectrum or other sequence using relatively simple mathematical calculations.  Simple functions can be written to generate a series of colors for a number of different sequences.

Appendix A: Complete Code Sample

''' <summary>
''' Describes the RGB color space as a 3D cube with the origin at Black.
''' </summary>
''' <remarks></remarks>
Public NotInheritable Class ColorCube
 Protected Sub New()
 End Sub
 
 ''' <summary>
 ''' Compares two colors according to their distance from the origin of the cube (black).
 ''' </summary>
 ''' <param name="source"></param>
 ''' <param name="target"></param>
 ''' <returns></returns>
 ''' <remarks></remarks>
 Public Shared Function Compare(source As Color, target As Color) As Integer
 Dim delta1 As Double = GetDistance(Color.Black, source)
 Dim delta2 As Double = GetDistance(Color.Black, target)
 Return delta1.CompareTo(delta2)
 End Function
 
 ''' <summary>
 ''' Returns an integer between 0 and 255 indicating the perceived brightness of the color.
 ''' </summary>
 ''' <param name="target">A System.Drawing.Color instance.</param>
 ''' <returns>An integer indicating the brightness with 0 being dark and 255 being bright.</returns>
 ''' <remarks>
 ''' Formula found using web search at:
 ''' with reference to : http://alienryderflex.com/hsp.html
 ''' Effectively the same as measuring a color's distance from black, but constrained to a 0-255 range.
 ''' </remarks>
 Public Shared Function GetBrightness(target As Color) As Integer
 Return CInt(Math.Sqrt(0.241 * target.R ^ 2 + 0.691 * target.G ^ 2 + 0.068 * target.B ^ 2))
 End Function
 
 ''' <summary>
 ''' Gets a color from within the cube starting at the origin and moving a given distance in the specified direction.
 ''' </summary>
 ''' <param name="azimuth">The side-to-side angle in degrees; 0 points toward red and 90 points toward blue.</param>
 ''' <param name="elevation">The top-to-bottom angle in degrees; 0 is no green and 90 points toward full green.</param>
 ''' <param name="distance">The distance to travel within the cube; 500 is max.</param>
 ''' <returns>The color within the cube at the given distance in the specified direction.</returns>
 ''' <remarks></remarks>
 Public Shared Function GetColorFrom(azimuth As Integer, elevation As Integer, distance As Integer) As Color
 Return GetColorFrom(Color.Black, azimuth, elevation, distance)
 End Function
 
 ''' <summary>
 ''' Gets a color from within the cube starting at the specified location and moving a given distance in the specified direction.
 ''' </summary>
 ''' <param name="source">The source location within the cube from which to start moving.</param>
 ''' <param name="azimuth">The side-to-side angle in degrees; 0 points toward red and 90 points toward blue.</param>
 ''' <param name="elevation">The top-to-bottom angle in degrees; 0 is no green and 90 points toward full green.</param>
 ''' <param name="distance">The distance to travel within the cube; the approximate distance from black to white is 500.</param>
 ''' <returns>The color within the cube at the given distance in the specified direction.</returns>
 ''' <remarks></remarks>
 Public Shared Function GetColorFrom(source As Color, azimuth As Double, elevation As Double, distance As Double, Optional isRadians As Boolean = False) As Color
 If azimuth < 0 OrElse azimuth > 90 Then Throw New ArgumentException("azimuth", "Value must be between 0 and 90.")
 If elevation < 0 OrElse elevation > 90 Then Throw New ArgumentException("elevation", "Value must be between 0 and 90.")
 Dim a, e, r, g, b As Double
 If isRadians Then
 a = azimuth
 e = elevation
 Else
 a = DegreesToRadians(azimuth)
 e = DegreesToRadians(elevation)
 End If
 r = distance * Math.Cos(a) * Math.Cos(e)
 b = distance * Math.Sin(a) * Math.Cos(e)
 g = distance * Math.Sin(e)
 If Double.IsNaN(r) Then r = 0
 If Double.IsNaN(g) Then g = 0
 If Double.IsNaN(b) Then b = 0
 Return Color.FromArgb(Math.Max(Math.Min(source.R + r, 255), 0), Math.Max(Math.Min(source.G + g, 255), 0), Math.Max(Math.Min(source.B + b, 255), 0))
 End Function
 
 ''' <summary>
 ''' Creates an array of colors from a selection within a sphere around the specified color.
 ''' </summary>
 ''' <param name="target">The color to select around.</param>
 ''' <param name="distance">The radius of the selection sphere.</param>
 ''' <param name="increment">The increment within the sphere at which a selection is taken; larger numbers result in smaller selection sets.</param>
 ''' <returns>An array of colors located around the specified color within the cube.</returns>
 ''' <remarks></remarks>
 Public Shared Function GetColorsAround(target As Color, distance As Integer, increment As Integer) As Color()
 Dim result As New List(Of Color)
 For a As Integer = 0 To 359 Step increment
 For e As Integer = 0 To 359 Step increment
 Dim c As Color = GetColorFrom(target, a, e, distance)
 If Not result.Contains(c) Then
 result.Add(c)
 End If
 Next
 Next
 result.Sort(AddressOf Compare)
 Return result.ToArray
 End Function
 
 ''' <summary>
 ''' Creates an array of colors in a gradient sequence between two specified colors.
 ''' </summary>
 ''' <param name="source">The starting color in the sequence.</param>
 ''' <param name="target">The end color in the sequence.</param>
 ''' <param name="increment">The increment between colors.</param>
 ''' <returns>A gradient array of colors.</returns>
 ''' <remarks></remarks>
 Public Shared Function GetColorSequence(source As Color, target As Color, increment As Integer) As Color()
 Dim result As New List(Of Color)
 Dim a As Double = GetAzimuthTo(source, target)
 Dim e As Double = GetElevationTo(source, target)
 Dim d As Double = GetDistance(source, target)
 For i As Integer = 0 To d Step increment
 result.Add(GetColorFrom(source, a, e, i, True))
 Next
 Return result.ToArray
 End Function
 
 ''' <summary>
 ''' Creates a rainbow array of colors by selecting from the edges of the cube in ROYGBIV order at the specified increment.
 ''' </summary>
 ''' <param name="increment">The increment along the edges at which a selection is taken; larger numbers result in smaller selection sets.</param>
 ''' <returns>An array of colors in ROYGBIV order at the given increment.</returns>
 ''' <remarks></remarks>
 Public Shared Function GetColorSpectrum(increment As Integer) As Color()
 Dim result As New List(Of Color)
 Dim rgb(2) As Integer
 Dim idx As Integer = 1
 Dim inc As Integer = increment
 Dim cmp As Func(Of Integer, Integer, Boolean)
 
 rgb(0) = 255
 cmp = AddressOf CompareLess
 Do
 result.Add(Color.FromArgb(rgb(0), rgb(1), rgb(2)))
 If cmp(rgb(idx), inc) Then
 rgb(idx) += inc
 Else
 Select Case idx
 Case 1
 If rgb(2) < 255 Then
 rgb(idx) = 255
 idx = 0
 cmp = AddressOf CompareGreater
 Else
 rgb(idx) = 0
 idx = 0
 cmp = AddressOf CompareLess
 End If
 Case 2
 rgb(idx) = 255
 idx = 1
 cmp = AddressOf CompareGreater
 Case 0
 If rgb(2) < 255 Then
 rgb(idx) = 0
 idx = 2
 cmp = AddressOf CompareLess
 Else
 rgb(idx) = 255
 Exit Do
 End If
 End Select
 inc *= -1
 End If
 Loop
 result.Add(Color.FromArgb(rgb(0), rgb(1), rgb(2)))
 Return result.ToArray
 End Function
 
 ''' <summary>
 ''' Gets the distance between two colors within the cube.
 ''' </summary>
 ''' <param name="source">The source color in the cube.</param>
 ''' <param name="target">The target color in the cube.</param>
 ''' <returns>The distance between the source and target colors.</returns>
 ''' <remarks></remarks>
 Public Shared Function GetDistance(ByVal source As Color, ByVal target As Color) As Double
 Dim squareR As Double = CDbl(target.R) - CDbl(source.R)
 squareR *= squareR
 Dim squareG As Double = CDbl(target.G) - CDbl(source.G)
 squareG *= squareG
 Dim squareB As Double = CDbl(target.B) - CDbl(source.B)
 squareB *= squareB
 Return System.Math.Sqrt(squareR + squareG + squareB)
 End Function
 
 ''' <summary>
 ''' Converts a RGB color into its Hue, Saturation, and Luminance (HSL) values.
 ''' </summary>
 ''' <param name="rgb">The color to convert.</param>
 ''' <returns>The HSL representation of the color.</returns>
 ''' <remarks>
 ''' Source algorithm found using web search at:
 ''' (Adapted to VB)
 ''' </remarks>
 Public Shared Function GetHSL(ByVal rgb As Color) As HSLColor
 Dim h, s, l As Double
 Dim r As Double = rgb.R / 255.0
 Dim g As Double = rgb.G / 255.0
 Dim b As Double = rgb.B / 255.0
 Dim v, m, vm As Double
 Dim r2, g2, b2 As Double
 
 h = 0
 s = 0
 l = 0
 v = Math.Max(r, g)
 v = Math.Max(v, b)
 m = Math.Min(r, g)
 m = Math.Min(m, b)
 l = (m + v) / 2.0
 If l <= 0.0 Then
 Exit Function
 End If
 
 vm = v - m
 s = vm
 If s > 0.0 Then
 s /= If((l <= 0.5), (v + m), (2.0 - v - m))
 Else
 Exit Function
 End If
 
 r2 = (v - r) / vm
 g2 = (v - g) / vm
 b2 = (v - b) / vm
 
 If (r = v) Then
 h = If(g = m, 5.0 + b2, 1.0 - g2)
 ElseIf (g = v) Then
 h = If(b = m, 1.0 + r2, 3.0 - b2)
 Else
 h = If(r = m, 3.0 + g2, 5.0 - r2)
 End If
 
 h /= 6.0
 Return New HSLColor(h, s, l)
 End Function
 
 Protected Shared Function CompareLess(value As Integer, inc As Integer) As Boolean
 Return value < 255 - Math.Abs(inc)
 End Function
 
 Protected Shared Function CompareGreater(value As Integer, inc As Integer) As Boolean
 Return value > 0 + Math.Abs(inc)
 End Function
 
 Protected Shared Function DegreesToRadians(ByVal degrees As Double) As Double
 Return degrees * (Math.PI / 180.0)
 End Function
 
 Protected Shared Function RadiansToDegrees(ByVal radians As Double) As Double
 Return CSng(radians * (180.0 / Math.PI))
 End Function
 
 Protected Shared Function GetAzimuthTo(ByVal source As Color, ByVal target As Color) As Double
 Return WrapAngle(Math.Atan2(CDbl(target.B) - CDbl(source.B), CDbl(target.R) - CDbl(source.R)))
 End Function
 
 Protected Shared Function GetElevationTo(ByVal source As Color, ByVal target As Color) As Double
 Return WrapAngle(Math.Atan2(CDbl(target.G) - CDbl(source.G), 255))
 End Function
 
 Protected Shared Function WrapAngle(ByVal radians As Double) As Double
 While radians < -Math.PI
 radians += Math.PI * 2
 End While
 While radians > Math.PI
 radians -= Math.PI * 2
 End While
 Return radians
 End Function
 
 ''' <summary>
 ''' Describes a RGB color in Hue, Saturation, and Luminance values.
 ''' </summary>
 ''' <remarks></remarks>
 Public Structure HSLColor
 ''' <summary>
 ''' The color hue.
 ''' </summary>
 ''' <remarks></remarks>
 Public H As Double
 ''' <summary>
 ''' The color saturation.
 ''' </summary>
 ''' <remarks></remarks>
 Public S As Double
 ''' <summary>
 ''' The color luminance.
 ''' </summary>
 ''' <remarks></remarks>
 Public L As Double
 
 Public Sub New(hValue As Double, sValue As Double, lValue As Double)
 H = hValue
 S = sValue
 L = lValue
 End Sub
 End Structure
End Class