Color Picker

① RGB Normalization ($r, g, b \in [0, 1]$):

- $$r = \frac{R}{255}, \quad g = \frac{G}{255}, \quad b = \frac{B}{255}$$

② RGB $\rightarrow$ HSL Derivation ($M = \max(r,g,b), m = \min(r,g,b), d = M - m$):

- Lightness: $$L = \frac{M + m}{2}$$

- Saturation: $$S = \begin{cases} 0 & \text{if } d = 0 \\ \frac{d}{1 - |2L - 1|} & \text{if } d > 0 \end{cases}$$

- Hue Angle: $$H = \begin{cases} 0^\circ & \text{if } d = 0 \\ 60^\circ \times \left( \frac{g - b}{d} \bmod 6 \right) & \text{if } M = r \\ 60^\circ \times \left( \frac{b - r}{d} + 2 \right) & \text{if } M = g \\ 60^\circ \times \left( \frac{r - g}{d} + 4 \right) & \text{if } M = b \end{cases}$$

③ RGB $\rightarrow$ CMYK Print Conversion:

- $$K = 1 - \max(r, g, b)$$

- $$C = \frac{1 - r - K}{1 - K}, \quad M = \frac{1 - g - K}{1 - K}, \quad Y = \frac{1 - b - K}{1 - K} \quad (\text{when } K < 1)$$

④ W3C WCAG 2.1 Relative Luminance ($L$) & Contrast Ratio Formulas:

- For each normalized channel $c \in \{r, g, b\}$:

$$c_{lin} = \begin{cases} \frac{c}{12.92} & \text{if } c \le 0.04045 \\ \left( \frac{c + 0.055}{1.055} \right)^{2.4} & \text{if } c > 0.04045 \end{cases}$$

- Relative Luminance: $$L = 0.2126 r_{lin} + 0.7152 g_{lin} + 0.0722 b_{lin}$$

- Contrast Ratio: $$CR = \frac{L_1 + 0.05}{L_2 + 0.05} \quad (L_1 > L_2)$$

- General body text requires $CR \ge 4.5:1$ (AA) and $CR \ge 7:1$ (AAA).

① Complementary Harmony ($H + 180^\circ$):

- Pairs colors on opposite sides of the color wheel to create bold visual tension and maximum impact for Call-To-Action (CTA) elements.

② Analogous Harmony ($H - 30^\circ, H, H + 30^\circ$):

- Combines neighboring hues on the wheel for soothing visual cohesion and natural tonal rhythm.

③ Triadic Harmony ($H, H + 120^\circ, H + 240^\circ$):

- Equilateral triangle distribution across the wheel providing vibrant yet balanced multi-color accents.

④ Monochromatic Harmony (Identical $H$, Varying $S$ and $L$):

- Adjusts saturation and lightness across a single hue for sophisticated, minimal UI themes.