홍라이프 계산기색상 코드 변환기 쉽게 이해하기 — 개념과 원리
디자이너와 개발자는 같은 색을 여러 표기로 써야 할 때가 많습니다. 이 변환기는 HEX 코드나 RGB 값을 받아 HEX, RGB, HSL, HSV(HSB), 간단한 CMYK로 바꾸고, WCAG 상대 휘도, 흰 글자·검은 글자와의 대비, 그 배경에서 더 잘 읽히는 글자색도 알려 줍니다.
계산 방법
HEX = 빨강, 초록, 파랑 값(0~255)을 16진수로 쓴 것
R, G, B를 0~1로 바꾼 뒤 최댓값, 최솟값, 차이 Δ를 구합니다.
명도 L = (최대 + 최소) ÷ 2, HSL 채도 = Δ ÷ (1 − |2L − 1|)
HSV 명도 V = 최대, HSV 채도 = Δ ÷ 최대
색상(Hue)은 가장 큰 채널에서 각도로 구합니다.
CMYK(간이): K = 1 − 최대, C = (1 − R − K) ÷ (1 − K), M과 Y도 같은 방식
휘도 = 0.2126 R + 0.7152 G + 0.0722 B(선형화), 대비 = (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)
원리
이 표기들은 모두 같은 화면 색을 나타냅니다. RGB와 HEX는 화면의 세 원색이 빛을 얼마나 내는지 말합니다. HSL과 HSV는 이를 색상(색상환의 위치), 채도, 밝기로 다시 배열해 사람이 조정하기 쉽게 합니다. CMYK는 빛을 빼는 잉크를 나타내므로 간이 공식은 근사일 뿐이며, 실제 인쇄는 색상 프로파일에 따라 다릅니다. WCAG 휘도에서 초록의 가중치가 가장 큰 이유는 사람 눈이 초록에 가장 민감하기 때문입니다.
예제 풀이
기본값 #2F6F4E로 계산합니다.
- 16진수 2F, 6F, 4E = rgb(47, 111, 78)입니다.
- 0~1로 바꾸면 0.184, 0.435, 0.306, 최대 0.435, 최소 0.184, Δ 0.251입니다.
- HSL = hsl(149, 41%, 31%), HSV = 149°, 58%, 44%입니다.
- CMYK = 58%, 0%, 30%, 56%입니다.
- 상대 휘도 = 0.1252, 흰 글자 대비 = 1.05 ÷ 0.1752 = 5.99, 검은 글자 대비 = 3.5이므로 흰색 글자가 더 잘 읽힙니다.
결과 해석
코드에는 HEX나 RGB를, 밝기·채도 조정에는 HSL을 쓰고, 인쇄용 CMYK는 인쇄소의 프로파일에 맞춘 값을 요청하십시오. 글자에 대해 WCAG AA는 일반 글자에 4.5:1 이상을 요구하므로, 이 초록 위의 흰 글자(5.99:1)는 통과하고 검은 글자(3.5:1)는 큰 글자에서만 통과합니다.
흔한 실수
- 전문 인쇄에 간이 CMYK 값을 쓰는 경우
- HSL 명도와 HSV 명도를 같은 것으로 여기는 경우
- 0~1 척도와 0~255 척도를 섞는 경우
- 대비를 재지 않고 눈으로만 판단하는 경우
자주 묻는 질문
HSL과 HSV는 어떻게 다른가요?
둘 다 색상과 채도를 쓰지만, HSL은 명도 50%가, HSV는 명도 100%가 순색입니다.
인쇄하면 왜 색이 다르나요?
인쇄는 잉크와 색상 프로파일을 쓰며, 화면 색을 정확히 재현하지 못하는 경우가 많습니다.
세 자리 HEX 코드는 무슨 뜻인가요?
각 자리를 두 번 씁니다. #ABC는 #AABBCC와 같습니다.
출처: W3C, CSS Color Module Level 4 (HSL/HSV conversions, hex notation) · W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance and contrast ratio