Color Picker (색상 추출기)

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

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

② RGB $\rightarrow$ HSL 변환 유도 ($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): $$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 인쇄 색상 변환:

- $$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 (K < 1일 때)$$

④ W3C WCAG 2.1 상대 휘도($L$) 및 명도 대비율(Contrast Ratio) 계산식:

- 감마 보정 정규화 계수 $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}$$

- 상대 휘도 공식: $$L = 0.2126 r_{lin} + 0.7152 g_{lin} + 0.0722 b_{lin}$$

- 명도 대비율(Contrast Ratio $CR$): $$CR = \frac{L_1 + 0.05}{L_2 + 0.05} \quad (L_1 > L_2)$$

- 일반 텍스트 기준 $CR \ge 4.5:1$ (AA 달성), $CR \ge 7:1$ (AAA 달성).

① 보색 배색 (Complementary - $H + 180^\circ$):

- 색상환에서 정반대에 위치한 두 색상의 조합으로 강렬한 시각적 대비와 높은 주목성을 부여합니다. CTA(Call To Action) 버튼이나 핵심 하이라이트에 이상적입니다.

② 유사색 배색 (Analogous - $H - 30^\circ, H, H + 30^\circ$):

- 색상환에서 서로 인접한 세 가지 색상의 조합으로 시각적 편안함, 자연스러움, 그리고 통일감 있는 무드를 조성합니다.

③ 3색 배색 (Triadic - $H, H + 120^\circ, H + 240^\circ$):

- 색상환을 정확히 3등분(정삼각형)하는 색상의 조화로 다채로우면서도 균형 잡힌 활기찬 비주얼을 완성합니다.

④ 단색 조화 (Monochromatic - 동일 $H$, 상이한 $S$ 및 $L$):

- 단일 색상에서 채도(Saturation)와 명도(Lightness) 단계만을 조절하여 모던하고 정갈한 미니멀 디자인 시스템을 구축할 때 사용됩니다.