{"id":18314,"date":"2024-11-06T19:40:40","date_gmt":"2024-11-06T19:40:40","guid":{"rendered":"\/?p=18314"},"modified":"2024-11-06T19:46:16","modified_gmt":"2024-11-06T19:46:16","slug":"rgb-to-hsl-conversion-equations-dana-and-eternal-species","status":"publish","type":"post","link":"\/?p=18314","title":{"rendered":"RGB to HSL Conversion Equations, Dana, Brian and the eternal species"},"content":{"rendered":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
I was looking at the AIA 171 videos at Solar Dynamics Observatory. I took on of the images into paint and checked the RBG and HSL values. I was surprised that the hue did not change. It almost seems as they used a fixed hue and changed the saturation and intensity. What are the equations relating RGB and HSL? Both directions?<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n
\n
ChatGPT said:<\/h6>\n
\n
\n
\n
\n
\n
\n
ChatGPT<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n

The conversion between RGB (Red, Green, Blue) and HSL (Hue, Saturation, Lightness) is a bit intricate, as it involves transformations based on the relative intensity of each RGB component. Here are the equations to convert both ways, starting with RGB to HSL and then HSL back to RGB.<\/p>\n

RGB to HSL Conversion<\/h3>\n

Given normalized values RR<\/span>R<\/span><\/span><\/span><\/span>, GG<\/span>G<\/span><\/span><\/span><\/span>, and BB<\/span>B<\/span><\/span><\/span><\/span> (scaled between 0 and 1):<\/p>\n

    \n
  1. Calculate Maximum and Minimum RGB values:<\/strong>Cmax=max\u2061(R,G,B)C_{\\text{max}} = \\max(R, G, B)<\/span>C<\/span>max<\/span><\/span><\/span><\/span>\u200b<\/span><\/span><\/span><\/span><\/span>=<\/span><\/span>max<\/span>(<\/span>R<\/span>,<\/span>G<\/span>,<\/span>B<\/span>)<\/span><\/span><\/span><\/span><\/span> Cmin=min\u2061(R,G,B)C_{\\text{min}} = \\min(R, G, B)<\/span>C<\/span>min<\/span><\/span><\/span><\/span>\u200b<\/span><\/span><\/span><\/span><\/span>=<\/span><\/span>min<\/span>(<\/span>R<\/span>,<\/span>G<\/span>,<\/span>B<\/span>)<\/span><\/span><\/span><\/span><\/span> \u0394=Cmax\u2212Cmin\\Delta = C_{\\text{max}} – C_{\\text{min}}<\/span>\u0394<\/span>=<\/span><\/span>C<\/span>max<\/span><\/span><\/span><\/span>\u200b<\/span><\/span><\/span><\/span><\/span>\u2212<\/span><\/span>C<\/span>min<\/span><\/span><\/span><\/span>\u200b<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/li>\n
  2. Calculate Lightness (L):<\/strong>L=Cmax+Cmin2L = \\frac{C_{\\text{max}} + C_{\\text{min}}}{2}<\/span>L<\/span>=<\/span><\/span>2C<\/span>max<\/span><\/span><\/span>\u200b<\/span><\/span>+<\/span>C<\/span>min<\/span><\/span><\/span>\u200b<\/span><\/span><\/span>\u200b<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/li>\n
  3. Calculate Saturation (S):<\/strong>S={\u03941\u2212\u22232L\u22121\u2223if\u00a0\u0394\u226000if\u00a0\u0394=0S = \\begin{cases} \\frac{\\Delta}{1 – |2L – 1|} & \\text{if } \\Delta \\neq 0 \\\\ 0 & \\text{if } \\Delta = 0 \\end{cases}<\/span>S<\/span>=<\/span><\/span>{<\/span><\/span>1\u2212<\/span>\u22232L<\/span>\u2212<\/span>1\u2223<\/span><\/span>\u0394<\/span><\/span>\u200b<\/span><\/span>0<\/span>\u200b<\/span><\/span><\/span><\/span>if\u00a0<\/span>\u0394\ue020<\/span><\/span><\/span><\/span>=<\/span>0if\u00a0<\/span>\u0394=<\/span>0<\/span>\u200b<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/li>\n
  4. Calculate Hue (H):<\/strong>H={60\u00d7G\u2212B\u0394+360if\u00a0Cmax=R60\u00d7B\u2212R\u0394+120if\u00a0Cmax=G60\u00d7R\u2212G\u0394+240if\u00a0Cmax=BH = \\begin{cases} 60 \\times \\frac{G – B}{\\Delta} + 360 & \\text{if } C_{\\text{max}} = R \\\\ 60 \\times \\frac{B – R}{\\Delta} + 120 & \\text{if } C_{\\text{max}} = G \\\\ 60 \\times \\frac{R – G}{\\Delta} + 240 & \\text{if } C_{\\text{max}} = B \\end{cases}<\/span>H<\/span>=<\/span><\/span>\u23a9<\/span>\u23a8<\/span>\u23a7<\/span><\/span>\u200b<\/span><\/span><\/span><\/span><\/span>60\u00d7<\/span>\u0394<\/span><\/span>G<\/span>\u2212<\/span>B<\/span><\/span><\/span>\u200b<\/span><\/span>+<\/span>36060\u00d7<\/span>\u0394<\/span><\/span>B<\/span>\u2212<\/span>R<\/span><\/span><\/span>\u200b<\/span><\/span>+<\/span>12060\u00d7<\/span>\u0394<\/span><\/span>R<\/span>\u2212<\/span>G<\/span><\/span><\/span>\u200b<\/span><\/span>+<\/span>240<\/span>\u200b<\/span><\/span><\/span><\/span>if\u00a0<\/span>C<\/span>max<\/span><\/span><\/span>\u200b<\/span><\/span>=<\/span>R<\/span>if\u00a0<\/span>C<\/span>max<\/span><\/span><\/span>\u200b<\/span><\/span>=<\/span>G<\/span>if\u00a0<\/span>C<\/span>max<\/span><\/span><\/span>\u200b<\/span><\/span>=<\/span>B<\/span><\/span>\u200b<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>Adjust HH<\/span>H<\/span><\/span><\/span><\/span> to ensure it is in the range [0,360)[0, 360)<\/span>[<\/span>0<\/span>,<\/span>360<\/span>)<\/span><\/span><\/span><\/span>.<\/li>\n<\/ol>\n

    This produces HSL values: HH<\/span>H<\/span><\/span><\/span><\/span> in degrees [0,360)[0, 360)<\/span>[<\/span>0<\/span>,<\/span>360<\/span>)<\/span><\/span><\/span><\/span>, and SS<\/span>S<\/span><\/span><\/span><\/span> and LL<\/span>L<\/span><\/span><\/span><\/span> in the range [0,1][0, 1]<\/span>[<\/span>0<\/span>,<\/span>1<\/span>]<\/span><\/span><\/span><\/span>.<\/p>\n

    HSL to RGB Conversion<\/h3>\n

    Given HSL values HH<\/span>H<\/span><\/span><\/span><\/span>, SS<\/span>S<\/span><\/span><\/span><\/span>, and LL<\/span>L<\/span><\/span><\/span><\/span>:<\/p>\n

      \n
    1. Calculate Chroma (C):<\/strong>C=(1\u2212\u22232L\u22121\u2223)\u22c5SC = (1 – |2L – 1|) \\cdot S<\/span>C<\/span>=<\/span><\/span>(<\/span>1<\/span>\u2212<\/span><\/span>\u22232<\/span>L<\/span>\u2212<\/span><\/span>1\u2223<\/span>)<\/span>\u22c5<\/span><\/span>S<\/span><\/span><\/span><\/span><\/span><\/li>\n
    2. Calculate a temporary value XX<\/span>X<\/span><\/span><\/span><\/span>:<\/strong>X = C \\cdot \\left(1 – \\left|\\frac{(H \/ 60) \\mod 2 – 1}\\right|\\right)<\/span><\/li>\n
    3. Calculate a temporary mm<\/span>m<\/span><\/span><\/span><\/span>:<\/strong>m=L\u2212C2m = L – \\frac{C}{2}<\/span>m<\/span>=<\/span><\/span>L<\/span>\u2212<\/span><\/span>2C<\/span><\/span>\u200b<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/li>\n
    4. Determine RGB Primaries (R’, G’, B’) based on Hue (H):<\/strong> Depending on HH<\/span>H<\/span><\/span><\/span><\/span>:\n