색 밝기 비교 (HSL vs Lab L* vs WCAG vs HSP)

사용법

1. 한 색을 고르면 7 가지 밝기 척도가 각각 값과 비례한 가로 막대로 표시됩니다.
2. 비교 모드로 전환해 두 번째 색을 넣으면 각 척도의 차이가 표시됩니다 — 팔레트가 들쭉날쭉한 이유 진단에 유용.
3. 예시 쌍을 누르면 의도적으로 까다로운 조합이 로드됩니다(HSL L 동일 노랑/파랑, HSV V 동일 빨강/초록 등).
4. 보고서를 복사해 디자인 리뷰에 붙여 넣을 수 있습니다.

자주 묻는 질문

실제로 어느 척도를 써야 하나요?

질문에 따라 다릅니다. 접근성 대비 → WCAG Y / LRV(대비비 공식이 사용). 지각 균등 팔레트나 그라데이션 → CIE Lab L* 또는 OKLCH L. 방송 영상 → Rec. 709 루마. HSL L 과 HSV V 는 색 선택기에서 편한 손잡이일 뿐 실제로 얼마나 밝게 보이는지에 대해 거의 정보가 없습니다. (R+G+B)/3 는 절대 쓰지 마세요 — 얼마나 잘못된 순위를 매기는지 보여주기 위해서만 포함했습니다.

왜 노랑과 파랑이 둘 다 HSL L = 50% 인가요?

HSL 정의가 L = (max RGB + min RGB) / 2 입니다. 순노랑 #ffff00 의 채널은 (255, 255, 0) → (255 + 0) / 2 = 50%. 순파랑 #0000ff 은 (0, 0, 255) → (255 + 0) / 2 = 50%. HSL 은 사람 눈이 녹/노랑에 파랑보다 10 배 가까이 민감하다는 사실을 완전히 무시합니다. RGB 정육면체 위의 기하학적 구성일 뿐 지각 모델이 아닙니다.

WCAG Y 와 Lab L* 의 차이는?

WCAG Y 는 광도 휘도 — 렌더된 픽셀을 캘리브레이션된 광도계로 측정한 값을 0–1 로 정규화한 것(건축에서는 흔히 LRV × 100 으로 보고). Lab L* 는 그 휘도를 L* = 116 × f(Y/Yn) − 16 으로 변환한 값으로, f 는 지각에 맞춘 세제곱근 함수입니다. 따라서 Y = 50% 는 L* ≈ 76 (지각상 검정보다 흰색에 훨씬 가까움), Y = 18% 는 L* = 50 (중간 회색) 에 해당합니다.

HSP 는 뭐고 왜 포함했나요?

HSP(Hue/Saturation/Perceived-brightness) 는 Darel Rex Finley 의 모델로, 감마 인코딩된 RGB 위에서 P = √(0.299R² + 0.587G² + 0.114B²) 로 지각 밝기를 근사합니다. 고전 Y′ 와 같은 Rec. 601 가중치지만 산술 평균 대신 유클리드 RMS 를 씁니다. 표준은 아니지만 sRGB→Lab 전체 변환 없이 단순 평균보다 나은 밝기를 원할 때 흔히 쓰입니다.

관련 도구