Color Space Conversions : RGB, HSL, YUV, CYMK

Simply put, Color spaces are the formats to express colors as values, Each color space provides different advantages and solve a different purpose.

In this blog, I will talk about

• What is color and how it behaves in different situation.

• What is color space and why we have so many of them.

• Purpose, Advantages of common Color Spaces.

• How to convert from one Color Space to another.
  

What is a Color

My brothers will scold me to mention it here, But to be honest, My favorite thing about color is that, It is imaginary and simply does not exists in our physical world. It's mere creation of our brain to help itself identify things better. My brain's Red can be like your brain's Green, We will never know and everything in world will works as it is. Yeah, This was too much, Sorry about that.

In Physics,

We need to start with Light, Which is a form of Radiation, Known as EMR, Short for Electro-Magnetic-Radiation.

What is Color Space

Simply put, Color spaces are the formats to express colors as values,

Each color space provides different advantages and solve a different purpose.

Details to add,

• Color Space Introduction

• Intuitive visuals during Conversion

• Applications (Veg Variation)

// Language : HLSL Shader
// (Hue, Saturation, Luminosity) TO (Red, Green, Blue)
float4 HSL2RGB(float4 hsl)
{
	float a = hsl.y * min(hsl.z, 1 - hsl.z) * 12;
	float4 n = float4(0, 0.66666, 0.33333, 0);
	float4 k = frac(n + hsl.x);
	float4 c = (hsl.z - a * max(min(k - 0.25, min(0.75 - k, 0.08333)), -0.08333));
	return c;
}

// Language : HLSL Shader
// (Red, Green, Blue) TO (Hue, Saturation, Luminosity)
float4 GetHSL(float4 color)
{
    float cMin = min(color.r, min(color.g, color.b));
    float cMax = max(color.r, max(color.g, color.b));
    float cLumin = (cMax - cMin);
    float cSum = (cMax + cMin);
    
    float hue = 0.0;
    if (cMin != cMax)
    {
        if (cMax == color.r)
            hue = (color.g - color.b) / cLumin;
        else if (cMax == color.g)
            hue = 2.0 + (color.b - color.r) / cLumin;
        else
            hue = 4.0 + (color.r - color.g) / cLumin;
        hue = hue * 60.0;
        if (hue < 0.0) hue = hue + 360.0;
        hue /= 360.0; 
    }
    else
    {
        hue = 1;
    }

    float sat = 0.0;
    if (cSum != 0)
    {
        if (cSum < 1)
            sat = cLumin / cSum;
        else
            sat = cLumin / (2 - cSum);
    }
    return float4(hue, sat, cSum/2, color.a);
}