Creating an RGB HSB Scroller for Color Editing

Introduction

Welcome to my article. Today, I will show you how to make a color scroller, the reason being that it is sometimes very difficult getting the precise colour combination. After getting the color combination, get the corresponding color code.

Before I continue, let’s get some background on how precisely colors work and which Color models are there. Have a read through the following to get a better understanding of colors and color models:

• RGB
• HSL/HSV
• CMYK
• CIE 1931

For further information on color systems, read here.

Our Project

Create a new Windows Forms project and design the form to resemble Figure 1.

Figure 1: Our design

Get things started by adding the Form Load event:

   Private Sub Form1_Load(ByVal sender As System.Object, _
         ByVal e As System.EventArgs) Handles MyBase.Load
      RBG_Scroll(RedBar, New Windows.Forms.ScrollEventArgs _
         (ScrollEventType.EndScroll, 0))
   End Sub

Add a common event handler for the RGB scrollers:

   Private Sub RBG_Scroll(ByVal sender As System.Object, _
         ByVal e As System.Windows.Forms.ScrollEventArgs) _
         Handles RedBar.Scroll, GreenBar.Scroll, BlueBar.Scroll
      Dim rgbColor As Color

      rgbColor = Color.FromArgb(0, RedBar.Value, _
         GreenBar.Value, BlueBar.Value)
      HueBar.Value = CInt(rgbColor.GetHue())
      SaturationBar.Value = _
         CInt(rgbColor.GetSaturation() * 100.0F)
      BrightnessBar.Value = _
         CInt(rgbColor.GetBrightness() * 100.0F)

      RefreshDisplay()
   End Sub

The Hue, Saturation & Values scrolling event is a bit more work. Let us add that now:

   Private Sub Hue_Scroll(ByVal sender As Object, _
         ByVal e As System.Windows.Forms.ScrollEventArgs) _
         Handles HueBar.Scroll, SaturationBar.Scroll, _
         BrightnessBar.Scroll

      Dim useRed As Integer
      Dim useGreen As Integer
      Dim useBlue As Integer
      Dim useHue As Single
      Dim useSaturation As Single
      Dim useBrightness As Single
      Dim hueSector As Integer
      Dim factor As Single
      Dim target1 As Single
      Dim target2 As Single
      Dim target3 As Single

      useHue = CSng(HueBar.Value)
      useSaturation = _
         CSng(SaturationBar.Value) / 100.0F
      useBrightness = _
         CSng(BrightnessBar.Value) / 100.0F

      If (useSaturation = 0.0F) Then
         useRed = CInt(useBrightness * 255)
         useGreen = useRed
         useBlue = useRed
      Else
         hueSector = CInt(useHue / 60.0F)
         factor = Math.Abs((useHue / 60.0F) - _
            CSng(hueSector))
         target1 = useBrightness * _
            (1 - useSaturation)
         target2 = useBrightness * _
            (1 - (factor * useSaturation))
         target3 = useBrightness * _
            (1 - ((1 - factor) * useSaturation))

         Select Case hueSector
            Case 0, 6
               useRed = CInt(useBrightness * 255.0F)
               useGreen = CInt(target3 * 255.0F)
               useBlue = CInt(target1 * 255.0F)
            Case 1
               useRed = CInt(target2 * 255.0F)
               useGreen = CInt(useBrightness * 255.0F)
               useBlue = CInt(target1 * 255.0F)
            Case 2
               useRed = CInt(target1 * 255.0F)
               useGreen = CInt(useBrightness * 255.0F)
               useBlue = CInt(target3 * 255.0F)
            Case 3
               useRed = CInt(target1 * 255.0F)
               useGreen = CInt(target2 * 255.0F)
               useBlue = CInt(useBrightness * 255.0F)
            Case 4
               useRed = CInt(target3 * 255.0F)
               useGreen = CInt(target1 * 255.0F)
               useBlue = CInt(useBrightness * 255.0F)
            Case 5
               useRed = CInt(useBrightness * 255.0F)
               useGreen = CInt(target1 * 255.0F)
               useBlue = CInt(target2 * 255.0F)
         End Select
      End If

      RedBar.Value = useRed
      GreenBar.Value = useGreen
      BlueBar.Value = useBlue
      RefreshDisplay()


   End Sub

Add the RefreshDisplay sub procedure:

   Private Sub RefreshDisplay()
      NumberRed.Text = CStr(RedBar.Value)
      NumberGreen.Text = CStr(GreenBar.Value)
      NumberBlue.Text = CStr(BlueBar.Value)
      NumberHue.Text = CStr(HueBar.Value)
      NumberSaturation.Text = Format(CDec(SaturationBar.Value) _
         / 100@, "0.00")
      NumberBrightness.Text = Format(CDec(BrightnessBar.Value) _
         / 100@, "0.00")

      ShowColor.BackColor = Color.FromArgb(255, RedBar.Value, _
         GreenBar.Value, BlueBar.Value)
   End Sub

Our scrollers in action:

Figure 2 Run time

Conclusion

The world of colors is quite exciting; knowing the difference between each color model and how to use each model properly is quite handy. Until next time, cheers!