HEX·RGB·HSL은 어떻게 변환하나요?
HEX, RGB와 HSL은 같은 화면 색을 서로 다른 방식으로 적는 표기법입니다. RGB는 빨강, 초록, 파랑 빛의 강도를 각각 0부터 255까지 나타냅니다. HEX는 이 세 숫자를 16진수 두 자리씩 바꿔 #RRGGBB 순서로 이어 붙입니다. 예를 들어 RGB 255, 128, 0은 FF, 80, 00으로 변환되어 #FF8000이 됩니다. #0F8처럼 세 자리 HEX는 각 문자를 두 번 반복한 #00FF88로 해석합니다.
HSL은 색상각 Hue, 채도 Saturation, 명도 Lightness를 사용합니다. 색상각은 0~360도 색상환의 위치이고 채도와 명도는 0~100%입니다. HSL은 밝기나 채도를 일정하게 조절하는 디자인 작업에 편하지만 실제 화면 표시는 결국 RGB로 변환됩니다. 이 도구는 사용자가 마지막으로 수정한 HEX, RGB 또는 HSL 묶음을 기준으로 나머지 값을 계산하고 미리보기를 갱신합니다.
사용 방법
HEX 입력
#2F7D68 또는 0F8처럼 코드를 입력한 뒤 변환합니다. #은 생략할 수 있고 결과는 대문자 6자리로 정리됩니다.
RGB 입력
R, G, B에 각각 0~255 정수를 입력합니다. 세 값이 모두 유효하면 HEX와 HSL 입력값도 즉시 맞춰집니다.
HSL 입력
H는 0~360, S와 L은 0~100 범위로 입력합니다. 테마 색의 밝기와 채도 변화를 비교할 때 유용합니다.
구체적인 상황으로 이해하는 활용 예시
다음 세 상황은 도구의 처리 과정과 결과 해석을 설명하기 위한 가상 예시입니다. 입력 조건을 바꾸면 결과도 달라지므로 자신의 조건과 비교해 확인하세요.
1. 주황색 RGB를 HEX로 변환
R 255, G 128, B 0을 입력하면 각 값의 16진수는 FF, 80, 00입니다. 이를 이어 #FF8000이 되고 HSL은 반올림 표시 기준 약 30도·100%·50%입니다. 표현 방식이 달라도 같은 색을 가리키므로 디자인 문서와 CSS에서 다른 형식의 값을 비교할 때 사용할 수 있습니다.
2. 세 자리 HEX를 확장
HEX #0F8은 각 자리를 두 번씩 반복한 #00FF88과 같습니다. 00·FF·88을 십진수로 바꾸면 RGB 0·255·136입니다. #0F8을 0·15·8의 RGB로 읽으면 다른 색이 되므로 축약 규칙을 먼저 적용해야 합니다. 투명도가 들어간 4자리 또는 8자리 HEX는 이 도구의 지원 범위와 구분하세요.
3. 회색의 HSL 값을 확인
RGB 세 채널을 모두 128로 두면 #808080입니다. 채널 사이 차이가 없어 HSL 채도는 0%이고 명도는 반올림해 50%입니다. 무채색에서 표시되는 색상각은 색조를 가진다는 뜻이 아닙니다. 명도를 바꾸어 회색 단계를 만들 수 있지만 글자 대비가 충분한지는 별도 대비 계산으로 확인해야 합니다.
주의사항
화면의 RGB 색과 인쇄물의 CMYK 색은 표현 범위가 다릅니다. 같은 코드도 모니터 색상 프로필과 밝기에 따라 다르게 보일 수 있습니다. 이 도구는 알파 투명도를 포함한 4자리·8자리 HEX는 지원하지 않으며 계산 결과는 일반적인 sRGB 표현을 기준으로 합니다.