HEX RGB HSL 중 뭘 써야 하나, 색을 전달할 때 헷갈리는 기준

디자인 시안에서 색을 받아 코드에 넣으려는데 형식이 제각각입니다. 어떤 곳은 여섯 자리 코드로, 어떤 곳은 숫자 세 개로, 어떤 곳은 퍼센트가 붙은 값으로 적혀 있습니다.

무엇이 맞는지 고민할 필요는 없습니다. 결론부터 말하면 화면에서 쓰는 세 형식은 같은 색을 다르게 적은 것뿐이고, 어느 것을 쓸지는 지금 무엇을 하려는지가 정합니다.

세 형식이 각각 잘하는 일

HEX는 여섯 자리 코드로 적습니다. 짧고 한 덩어리라 복사해 붙이기 좋고, 대부분의 도구가 기본으로 받아들입니다. 대신 사람이 보고 어떤 색인지 짐작하기 어렵고, 조금 밝게 바꾸려면 세 자리 쌍을 각각 계산해야 합니다.

RGB는 빨강, 초록, 파랑의 양을 숫자로 적습니다. 화면이 실제로 색을 만드는 방식과 같아서 계산에 편하고, 뒤에 값을 하나 더해 투명도를 표현할 수 있습니다. 다만 이것도 사람이 조정하기에는 직관적이지 않습니다.

HSL은 색상, 채도, 명도를 나눠 적습니다. 이 분리가 핵심입니다. 색은 그대로 두고 밝기만 바꾸고 싶을 때 숫자 하나만 건드리면 됩니다. 사람이 색을 다루는 감각과 가장 가깝습니다.

CMYK는 인쇄용 표기입니다. 화면과 원리가 달라 화면색을 그대로 옮길 수 없고, 실제 출력색은 종이와 잉크에 따라 달라집니다.

상황별로 고르는 표

정리하면 주고받을 때는 HEX, 조정할 때는 HSL, 계산할 때는 RGB입니다.

색을 조정할 때 HSL이 유리한 이유

버튼의 기본색이 있고 마우스를 올렸을 때 조금 어두운 색이 필요하다고 해보겠습니다.

HEX에서는 여섯 자리를 어떻게 바꿔야 할지 감이 오지 않습니다. 임의로 조금씩 낮춰 보다가 색상이 미묘하게 틀어지는 일이 흔합니다.

HSL이라면 명도 값만 몇 낮추면 됩니다. 색상과 채도가 그대로 유지되므로 같은 계열의 어두운 색이 정확히 나옵니다. 밝은 단계가 필요하면 반대로 올리면 됩니다.

같은 방식으로 한 가지 색에서 여러 단계를 만들 수 있습니다. 색상과 채도를 고정하고 명도만 일정 간격으로 바꾸면 자연스럽게 이어지는 단계가 생깁니다.

색상 코드 변환기에 HEX를 넣으면 HSL 값이 함께 표시되므로, 조정은 HSL에서 하고 결과를 다시 HEX로 받아 코드에 넣는 흐름이 편합니다.

값이 예상과 다를 때

색상값 전달에서 어긋나는 지점

형식을 섞어서 전달합니다. 한 문서 안에 HEX와 RGB와 HSL이 섞여 있으면 같은 색인지 다른 색인지 확인하는 데 시간이 듭니다. 전달용 형식을 하나로 통일하세요.

화면에서 눈으로 비교합니다. 모니터마다 표시가 달라서 눈으로는 판단할 수 없습니다. 값을 기준으로 확인해야 합니다.

HEX에서 밝기를 감으로 조정합니다. 색상이 틀어지기 쉽습니다. HSL로 바꿔 명도만 건드리는 편이 정확합니다.

투명도를 HEX로 표현하려 합니다. 여섯 자리 HEX에는 투명도 자리가 없습니다. 반투명이 필요하면 RGBA나 HSLA를 쓰세요.

CMYK 값을 확정된 인쇄색으로 취급합니다. 참고값입니다. 색이 중요한 인쇄라면 인쇄소와 견본으로 확인해야 합니다.

받는 사람 기준으로 고르면 됩니다

세 형식 중 무엇이 옳은지를 따질 필요는 없습니다. 같은 색을 다르게 적은 것뿐입니다.

주고받을 때는 상대의 도구가 받아들이는 형식을, 대체로 HEX를 쓰세요. 색을 만지고 다듬는 작업은 HSL에서 하고, 결과만 HEX로 옮기면 됩니다. 이 두 가지만 구분해도 대부분의 혼란이 정리됩니다.