HEX RGB HSL 변환: 3자리 색상 코드와 반올림에서 놓치는 차이

3자리 HEX는 세 숫자를 반복하는 표기입니다

#369는 #336699와 같은 색상입니다. 각 자리를 두 번 반복하며, 뒤에 0을 붙여 #306090으로 만드는 방식이 아닙니다. 이 예시의 RGB는 rgb(51, 102, 153)입니다. CSS의 HEX 규칙을 설명하는 공식 문서는 아래에 연결했습니다.

W3C CSS Color 4: HEX 색상 표기

Moyoutil에서는 앞뒤 공백과 맨 앞의 #을 제거한 뒤 3자리 또는 6자리 HEX를 처리합니다. 대소문자는 구분하지 않으며 결과 HEX는 대문자로 표시합니다. 색상 선택기를 움직이거나 HEX를 입력하면 미리보기와 결과가 갱신됩니다.

실제 도구 함수로 재현한 네 가지 입력

2026년 10월 5일 현재 프로젝트의 color 함수로 실행한 결과입니다. 아래 HSL은 도구가 정수로 반올림해 보여주는 값입니다. RGB는 이 HEX 입력을 해석한 정수 채널 값입니다.

이 표는 화면에서 눈으로 색상을 측정한 결과가 아니라 코드 입력을 변환한 출력입니다. 기존 HEX와 RGB 값을 함께 보관하면 HSL 표시 정밀도와 구분하기 쉽습니다.

회색에서 색상각 0은 빨간색이라는 뜻이 아닙니다

도구는 회색 입력에 HSL 색상각 0을 표시합니다. 하지만 채도가 0%이면 색상각은 표시 색상을 바꾸지 않습니다. 따라서 hsl(0, 0%, 50%)의 첫 숫자만 보고 빨간색이라고 판단하면 안 됩니다. 색상각, 채도, 명도를 함께 읽으세요.

W3C CSS Color 4: 채도 0에서 영향이 없는 색상각

반올림한 HSL이 원래 RGB를 그대로 복원하지는 않습니다

도구는 #123456을 hsl(210, 65%, 20%)로 표시합니다. 이 반올림한 HSL을 sRGB로 변환한 뒤 각 채널을 0~255 범위의 정수로 반올림하면 rgb(18, 51, 84), 즉 #123354가 됩니다. 원래 RGB는 rgb(18, 52, 86)이므로 두 채널이 달라집니다. 모든 색상에서 차이가 생긴다는 뜻은 아닙니다.

W3C CSS Color 4: HSL에서 sRGB로 변환

정확한 원래 코드가 필요한 작업에서는 결과 HEX 또는 RGB를 사용하고 원본도 보관하세요. HSL은 조정용 출발점으로 활용하되 이 도구의 정수 표시를 손실 없는 왕복 변환 값으로 취급하지 마세요. 도구에는 HSL을 입력해 HEX로 되돌리는 기능이 없습니다.

4자리·8자리 HEX와 지원 범위를 구분하세요

CSS에는 알파 채널이 포함된 4자리·8자리 HEX도 있습니다. 그러나 현재 Moyoutil 변환기는 이를 받지 않습니다. #12345678과 #abcd는 오류가 되며 RGB 결과로 처리되지 않습니다. 알파 자리를 잘라내면 투명도 정보가 사라지므로 같은 색상 정보라고 생각하지 마세요.

W3C CSS Color 4: 알파 채널이 있는 HEX

1. 원래 색상 코드와 사용 위치를 먼저 보관합니다.
2. 색상 변환 도구에 3자리 또는 6자리 HEX를 입력하고 결과 HEX와 RGB를 확인합니다.
3. 결과 복사를 누르면 HEX, RGB, HSL 세 줄을 복사합니다. 필요한 표기 한 줄을 선택해서 사용합니다.
4. 정수 HSL을 재사용할 때는 반올림 차이를 고려합니다. 실제 배경과 글자 조합의 가독성도 별도로 확인합니다.

이 도구는 색상 코드 변환기이며 색 대비 적합성 검사, ICC 프로파일 변환, 인쇄용 CMYK 변환 기능을 제공하지 않습니다.

자주 묻는 질문