색상을 HEX, RGB, HSL 사이에서 변환하기
게시일 · 업데이트 읽는 데 1분
HEX, RGB, HSL은 같은 색을 세 가지 방식으로 나타냅니다. 도구는 세 가지를 한꺼번에 보여 주고 흔한 표기를 받아들입니다. HSL이 정수로 반올림되기 때문에 HEX로 돌아올 때 한 단계 차이가 생깁니다.
같은 색의 세 가지 표기
색상 탐색은 기본으로 세 형식을 모두 색상 미리보기와 함께 보여 줍니다. 초록색 #2F4A3F의 경우:
| 형식 | 결과 |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
패널의 HEX, RGB, HSL 세 버튼은 결과를 하나의 형식으로만 줄여 주며, 그대로 복사하기에 편리합니다.
허용되는 표기
| 표기 | 예시 | HEX 결과 |
|---|---|---|
| 짧은 HEX | #fff | #ffffff |
| 투명도가 있는 HEX | #2F4A3F80 | #2f4a3f80 |
| 쉼표를 쓴 RGB | rgb(47, 74, 63) | #2f4a3f |
| 공백을 쓴 RGB | rgb(47 74 63) | #2f4a3f |
| 백분율 RGB | rgb(100%, 0%, 0%) | #ff0000 |
| 공백을 쓴 HSL | hsl(156 22% 24%) | #304b40 |
“rouge” 같은 색 이름과 rgb(300, 0, 0)처럼 0에서 255를 벗어난 채널은 허용되는 표기를 나열한 메시지와 함께 거부됩니다.
투명도
투명도는 HEX에서는 여덟 자리로, 또는 공백이 있는 슬래시 뒤에 씁니다. 색 rgb(47 74 63 / 50%)는 HEX로 #2f4a3f80, RGB로 rgba(47, 74, 63, 0.5)가 됩니다. 반대로 #2F4A3F80의 불투명도는 0.502입니다. 16진수 80이 255 중 128이기 때문입니다.
왕복하면 한 단계 바뀌는 이유
HSL은 정수로 표시됩니다. 색상은 도, 채도와 명도는 퍼센트입니다. 그래서 HSL에서 HEX로 돌아오면 출발한 색이 아니라 이웃한 색에 닿습니다.
| 출발 | 표시된 HSL | HEX로 되돌리기 |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
차이는 채널마다 한 단계이며 눈에는 보이지 않습니다. 디자인 토큰이나 브랜드라면 원래의 HEX를 기준으로 삼고 다시 HSL을 거치지 마십시오.
회색
회색은 채도가 0이고 색상은 영향을 주지 않습니다. #808080은 rgb(128, 128, 128)과 hsl(0, 0%, 50%)가 됩니다.
도구가 측정하지 않는 것
형식 변환은 가독성에 대해 아무것도 알려 주지 않습니다. 도구는 글자와 배경 사이의 대비를 계산하지 않으므로 게시하기 전에 따로 확인하십시오. 대비가 가독성을 정하는 QR 코드의 경우는 한 번에 스캔되는 QR 코드 만들기에서 다룹니다.
변환 확인하기
- 색을 입력란에 붙여 넣습니다. 미리보기가 기대와 같아야 합니다.
- 시스템이 요구하는 형식을 복사합니다.
- 정확한 색을 유지하려면 HSL이 아니라 HEX나 RGB를 보관합니다.