색상 코드 변환: HEX, RGB, HSL은 무엇이 다른가
HEX와 RGB는 같은 값을 다른 진법으로 적은 것이고, HSL은 아예 다른 좌표계입니다. 그래서 HSL을 정수로 반올림하면 색이 미세하게 바뀝니다. 이 도구가 소수점을 붙여 보여 주는 이유입니다.
화면의 색은 빨강·초록·파랑 세 개의 밝기로 만들어집니다. HEX와 RGB는 그 세 숫자를 적는 두 가지 방식일 뿐입니다. #6366f1은 16진법, rgb(99, 102, 241)은 10진법이고 가리키는 색은 완전히 같습니다.
HSL은 다릅니다. 같은 색을 색상·채도·명도라는 세 축으로 다시 표현한 것입니다. 사람이 '조금 더 밝게'나 '덜 쨍하게' 같은 판단을 하기 쉽도록 만들어진 좌표계입니다.
정수 HSL은 색을 담기에 칸이 부족합니다
HSL을 정수로만 적으면 색이 조금씩 바뀝니다. 계산이 틀려서가 아니라 셀 수 있는 문제입니다.
RGB로 표현되는 색은 1,677만여 개입니다. 색상 0~360도, 채도 0~100%, 명도 0~100%를 정수로만 쓰면 조합은 368만여 개입니다. 담아야 할 색이 상자보다 4.6배 많습니다. 그러면 여러 색이 같은 칸에 들어갈 수밖에 없고, 되돌릴 때 어느 색이었는지 알 수 없습니다.
실제로 재 보면 sRGB 색의 89%가 정수 HSL을 거쳐 되돌아오면 원래 값과 달라집니다. 채널당 최대 다섯 단계까지 어긋납니다. 눈으로 알아보기 어려운 차이지만, HEX 값과 HSL 값을 나란히 보여 주면서 서로 다른 색이라면 그건 변환기가 해서는 안 되는 일입니다.
그래서 이 도구는 HSL을 소수점 한 자리까지 보여 줍니다. 그 자릿수에서는 63만 개 색을 검사해도 왕복 오차가 하나도 없습니다. CSS도 hsl(238.7, 83.5%, 66.7%) 같은 표기를 그대로 받습니다.
세 표기의 성격
| 표기 | 예시 | 성격 | 쓰기 좋은 곳 |
|---|---|---|---|
| HEX | #6366f1 | RGB를 16진법으로 | 저장, 디자인 도구 주고받기 |
| RGB | rgb(99, 102, 241) | 각 원색의 밝기 | 투명도가 필요할 때 |
| HSL | hsl(238.7, 83.5%, 66.7%) | 색상·채도·명도 | 변형 만들기, 색 체계 설계 |
HSL이 편한 순간
버튼의 기본색이 있고 눌렀을 때의 어두운 색이 필요하다고 해 봅시다. HEX로는 어떤 숫자를 얼마나 내려야 할지 감이 안 옵니다. HSL이면 명도만 10 정도 내리면 됩니다.
같은 색상으로 밝기만 다른 단계들을 만들 때도 마찬가지입니다. 색상과 채도를 고정하고 명도만 바꾸면 자연스럽게 이어지는 계열이 나옵니다. 디자인 시스템의 색 단계가 대개 이렇게 만들어집니다.
다만 HSL의 명도는 사람이 느끼는 밝기와 정확히 같지 않습니다. 명도 50%인 노랑과 명도 50%인 파랑은 눈에 전혀 다른 밝기로 보입니다. 글자와 배경의 대비를 판단할 때는 HSL 숫자가 아니라 대비 검사 도구를 쓰세요.
회색에는 색상이 없습니다
채도가 0인 색, 즉 회색 계열에는 색상값이 의미가 없습니다. 어느 방향으로도 치우치지 않았기 때문입니다. 이 도구는 그럴 때 색상을 0으로 표시합니다.
그래서 회색에 가까운 색은 색상값이 불안정합니다. rgb(128, 127, 126)처럼 세 값이 거의 같은 색은 한 채널이 1만 달라져도 색상값이 크게 움직입니다. 채도가 아주 낮은 색을 다룰 때 색상 숫자에 의미를 두지 마세요.
이 도구로 할 수 있는 일
- •HEX, RGB, HSL 중 아무 형식이나 붙여넣으면 나머지가 함께 바뀝니다.
- •색상 판에서 직접 골라 세 표기를 한 번에 얻습니다.
- •스포이트 기능이 있는 브라우저라면 화면의 아무 색이나 집어올 수 있습니다.
- •같은 색상의 명도 단계를 한눈에 보고 필요한 단계를 가져갑니다.
자주 묻는 질문
HSL에 소수점이 붙는 게 정상인가요?
정상이고 의도한 것입니다. 정수로 자르면 원래 색과 달라지기 때문입니다. CSS는 소수점이 있는 hsl() 값을 그대로 받으니 복사해서 그대로 쓰셔도 됩니다.
다른 변환기와 HSL 값이 조금 다릅니다.
대부분 반올림 차이입니다. 상대가 정수로 잘라 보여 주고 있다면 그 값은 원래 색과 미세하게 다른 색입니다. HEX로 되돌려 보면 어느 쪽이 원래 색인지 바로 확인됩니다.
HEX 세 자리 표기는 무엇인가요?
#f00처럼 각 자리를 두 번씩 반복하는 축약형으로 #ff0000과 같습니다. 각 채널이 같은 숫자 두 개로 이루어진 색만 이렇게 줄일 수 있습니다.
투명도는 어떻게 표현하나요?
여덟 자리 HEX(#rrggbbaa)나 rgba() 표기를 씁니다. 투명한 색의 실제 결과는 뒤에 무엇이 있느냐에 따라 달라지므로, 대비를 확인할 때는 합쳐진 뒤의 색으로 검사해야 합니다.
입력한 색이 저장되나요?
아니요. 브라우저 안에서만 계산합니다.