Rainbows seem to be pretty popular lately, so I thought I’d share this.

While working on a graphics assignment for school, I decided I wanted my lights to cycle through the full spectrum of colors. The problem was doing so while using RGB, since the loop can get a bit messy to achieve the effect. That’s when I decided to make an RGB to HSV converter, as well as an HSV to RGB converter. For those of you who don’t know, RGB and HSV are just two different ways of representing a color as a collection of three numbers. RGB stands for Red Channel, Green Channel and Blue Channel, while HSV stands for Hue, Saturation and Brightness (V is used instead of B to avoid confusion with Blue). Below is my implementation, which is the classical one with a slight performance increase trick that I found. I will provide all the links to my resources below.

First, I’d like to show how much easier it is to walk the color spectrum using HSV instead of RGB with a capture from my ImGui widget that I used in my assignment:

As you can see, using HSV you can simply increase the Hue value by an amount to easily advance through the color spectrum. With RGB, the loop would need to have a bunch of conditionals to determine which slider (R, G or B) would need to be increased/decreased next. Now on to the code.

Here is the Color structure that I’m using, which will make it clearer when looking at the conversion code:

struct Color
{
  union
  {
    struct // RGBA Form
    {
      float r; // Color's Red Channel
      float g; // Color's Green Channel
      float b; // Color's Blue Channel
      float a; // Color's Alpha Channel
    };

    struct // HSVA Form
    {
      float h; // Color's Hue
      float s; // Color's Saturation
      float v; // Color's Brightness
      float a; // Color's Alpha
    };

    float components[4]; // r: components[0], g: components[1], etc.
  };
};

I’m using a union to preserve space while also allowing me to intuitively access the value I’m looking for, instead of assuming that R is H, G is S, and so on.

The first conversion I made was from RGB to HSV. I started using the code from this website, which is written in Java, but it was pretty straightforward to translate to C++. Later, I found a faster way of calculating it on this other website, but I think that algorithm is not as clear to understand for learning purposes, so I just took one of his optimizations for preventing division by zero and left the rest of the code the same. Feel free to read that second article and implement that faster version of the algorithm if performance is an issue for your project.

Remember that these are member functions on the Color struct defined above, so any reference to r, g, b, a, h, s or v are simply the internal variables of the “this” object. Here’s what the code looks like:

// Converts a color from RGBA to HSVA
Color Color::ToHSVA(void) const
{
  Color hsvaColor;

  float min = std::min(r, std::min(g, b));
  float max = std::max(r, std::max(g, b));
  float delta = max - min;

  // Brightness
  hsvaColor.v = max;
  // Saturation
  hsvaColor.s = delta / (max + 1e-20f);
  // Alpha stays the same
  hsvaColor.a = a;

  // Hue
  if (r == max)
    hsvaColor.h = (g - b) / (delta + 1e-20f);     // Between yellow and magenta
  else if (g == max)
    hsvaColor.h = 2 + (b - r) / (delta + 1e-20f); // between cyan and yellow
  else
    hsvaColor.h = 4 + (r - g) / (delta + 1e-20f); // between magenta and cyan

  hsvaColor.h *= 60; // To Degrees
  // Correction if under 360
  if (hsvaColor.h < 0.0f)
    hsvaColor.h += 360.0f;

  return hsvaColor;
}

As you can see, I’m adding 1e-20f to my divisors in order to prevent division by zero and saving myself of having an extra if check for that case. I also treat my Hue as degrees, since it is what ImGui was expecting and I wanted to keep that format.

To convert a color back to RGB from HSV, there is also a classical algorithm that can be used and found on the first website that I linked. Here’s what my C++ implementation looks like:

// Converts a color from HSVA to RGBA
Color Color::ToRGBA(void) const
{
  Color rgbaColor;

  // Achromatic (gray)
  if (s == 0)
  {
    rgbaColor.r = rgbaColor.g = rgbaColor.b = v / 255.0f;
    rgbaColor.a = a;
    return rgbaColor;
  }

  // Conversion values
  float tempH = h;
  tempH /= 60.0f;
  int i = (int)std::floor(tempH);
  float f = tempH - i;
  float p = v * (1 - s);
  float q = v * (1 - s * f);
  float t = v * (1 - s * (1 - f));

  // There are 6 cases, one for every 60 degrees
  switch (i)
  {
    case 0:
      rgbaColor.r = v;
      rgbaColor.g = t;
      rgbaColor.b = p;
      break;

    case 1:
      rgbaColor.r = q;
      rgbaColor.g = v;
      rgbaColor.b = p;
      break;

    case 2:
      rgbaColor.r = p;
      rgbaColor.g = v;
      rgbaColor.b = t;
      break;

    case 3:
      rgbaColor.r = p;
      rgbaColor.g = q;
      rgbaColor.b = v;
      break;

    case 4:
      rgbaColor.r = t;
      rgbaColor.g = p;
      rgbaColor.b = v;
      break;

    // Case 5
    default:
      rgbaColor.r = v;
      rgbaColor.g = p;
      rgbaColor.b = q;
      break;
  }

  // Alpha value stays the same
  rgbaColor.a = a;

  return rgbaColor;
}

Phew, that wasn’t so bad now, was it? It was a fun little thing to program and I managed to achieve exactly what I wanted in my program. Here’s a GIF of my output.

I hope you enjoyed this article!