HSL to RGB / Hex Converter

Converting a color from the cylindrical HSL color space into the cubic RGB color space requires a multi-step mathematical transformation. The process maps an angular Hue coordinate ($H \in [0, 360^\circ]$) along with percentage values for Saturation ($S \in [0, 1]$) and Lightness ($L \in [0, 1]$) into absolute red, green, and blue intensities ($R, G, B \in [0, 255]$).

1. The Core Color Space Math

First, we find the overall colorfulness factor, known as Chroma ($C$):

$$C = (1 - |2L - 1|) \times S$$

Next, we identify the position of the intermediate variable ($X$) along the secondary components of the color cylinder:

$$X = C \times (1 - |(H / 60^\circ) \bmod 2 - 1|)$$

We calculate the lightness alignment offset factor ($m$) to anchor the output values within true color space limits:

$$m = L - \frac{C}{2}$$

Based on the sector position of the Hue angle ($H$), intermediate variables ($R', G', B'$) are assigned:

• $0^\circ \le H < 60^\circ$: $(R', G', B') = (C, X, 0)$
• $60^\circ \le H < 120^\circ$: $(R', G', B') = (X, C, 0)$
• $120^\circ \le H < 180^\circ$: $(R', G', B') = (0, C, X)$
• $180^\circ \le H < 240^\circ$: $(R', G', B') = (0, X, C)$
• $240^\circ \le H < 300^\circ$: $(R', G', B') = (X, 0, C)$
• $300^\circ \le H < 360^\circ$: $(R', G', B') = (C, 0, X)$

Finally, the values are scaled to an 8-bit channel width ($[0, 255]$):

$$R = \text{round}((R' + m) \times 255)$$ $$G = \text{round}((G' + m) \times 255)$$ $$B = \text{round}((B' + m) \times 255)$$

2. Hexadecimal String Encoding

To create a standard string like #1473E6, each decimal channel value ($R, G, B$) is converted into its base-16 equivalent. Each value is padded with a leading zero if necessary to guarantee a two-character width, then concatenated into a standard web code. When an alpha opacity component is present, it is mapped from an interval of $[0.0, 1.0]$ to $[0, 255]$, converted to hexadecimal, and appended as an 8-character string (#RRGGBBAA).

3. Calculating WCAG Contrast Ratings

Per standard web accessibility guidelines, the program checks compliance ratios using Relative Luminance ($Y$):

$$Y = 0.2126 \times R_{\text{linear}} + 0.7152 \times G_{\text{linear}} + 0.0722 \times B_{\text{linear}}$$

Where individual channel transformations remove gamma correction:

$$\text{If } V \le 0.03928, \quad V_{\text{linear}} = \frac{V}{12.92} \quad \text{else} \quad V_{\text{linear}} = \left(\frac{V + 0.055}{1.055}\right)^{2.4}$$

The contrast ratio is calculated by comparing the relative luminance values of the foreground ($L_1$) and background ($L_2$):

$$\text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$

This ratio is evaluated against WCAG targets to determine passing or failing marks for both regular text and display headers.