색상 변환기

색상 변환기란?

색상 변환기는 다양한 색상 표기법(HEX, RGB, HSL) 간의 변환을 실시간으로 수행하는 도구입니다. 웹 개발, 그래픽 디자인, UI/UX 작업에서 필수적으로 사용됩니다.

색상 표기법 비교

HEX 색상 코드

HEX(헥사데시멀) 색상은 #으로 시작하며 6자리 16진수로 표현됩니다. 앞의 2자리는 빨강(R), 중간 2자리는 초록(G), 마지막 2자리는 파랑(B)을 나타냅니다. 예를 들어 #FF0000은 순수한 빨강색입니다.

RGB 색상

RGB는 빛의 3원색인 빨강(Red), 초록(Green), 파랑(Blue)의 조합으로 색상을 표현합니다. 각 값은 0부터 255까지의 범위를 가지며, rgb(255, 0, 0)은 빨강, rgb(0, 255, 0)은 초록, rgb(0, 0, 255)는 파랑입니다.

HSL 색상

HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 색상을 표현합니다. 색상은 0-360도의 색상환에서의 위치, 채도는 색의 선명도(0-100%), 명도는 밝기(0-100%)를 나타냅니다. 직관적으로 색상을 조절할 수 있어 디자이너들이 선호하는 방식입니다.

보색과 유사색

보색은 색상환에서 180도 반대편에 위치한 색상으로, 서로 대비가 강해 눈에 띄는 조합을 만듭니다. 유사색은 색상환에서 인접한 색상으로, 조화롭고 편안한 느낌을 줍니다.

HSL의 함정 — 명도(L)는 사람 눈의 밝기와 다르다

HSL의 L(명도)은 순수하게 수학적으로 정의된 값이라, 같은 L값이어도 색상(Hue)에 따라 사람 눈에는 밝기가 다르게 느껴집니다. 예를 들어 노랑 계열은 L=50%만 되어도 상당히 밝게 보이는 반면, 파랑 계열은 L=50%에서도 상대적으로 어둡게 느껴집니다. 접근성을 위한 명도 대비를 정확히 맞추려면 HSL 수치보다 실제 명도 대비(WCAG contrast ratio) 계산 도구로 검증하는 것이 더 정확합니다.

자주 묻는 질문

Q. HEX와 RGB 중 어떤 것을 사용해야 하나요?

CSS에서는 두 가지 모두 사용 가능합니다. HEX는 더 간결하고, RGB는 투명도(RGBA)를 추가할 때 편리합니다.

Q. HSL은 언제 사용하나요?

색상의 밝기나 채도만 조절하고 싶을 때 HSL이 편리합니다. 예를 들어 호버 효과로 색상을 밝게 만들 때 L값만 조절하면 됩니다.

Q. 웹 접근성을 위한 색상 선택은?

텍스트와 배경 색상은 충분한 명도 대비(최소 4.5:1)를 유지해야 합니다. 이 도구에서 밝기 변형을 참고하여 적절한 대비를 찾을 수 있습니다.