색 밝기 비교 (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 전체 변환 없이 단순 평균보다 나은 밝기를 원할 때 흔히 쓰입니다.

이 주제의 가이드

• 색 대비와 접근성 있는 팔레트 WCAG 대비율이 실제로 측정하는 것, 괜찮아 보이는 색이 왜 여전히 실패하는지, 색각 이상이 그림을 어떻게 바꾸는지, 그리고 견디는 팔레트를 만드는 법.

관련 도구