HEX, RGB, HSL 색상 코드 차이와 변환하는 법

웹사이트 배경색을 바꾸려고 CSS를 열었는데, 디자이너가 준 색상은 RGB(66, 133, 244)이고 코드에는 #4285F4로 적혀 있다. 같은 파란색인데 표기 방식만 다른 건지 헷갈린다. 결론부터 말하면, 둘은 같은 색이다. 표현 형식만 다를 뿐이다.

색상 형식별 특징 비교

HEX는 16진수로 빨강(R), 초록(G), 파랑(B)을 2자리씩 표현한 것이고, RGB는 같은 값을 10진수로 쓴 것이다. 둘은 사실상 같은 정보를 담고 있다. HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)로 나눠서 표현하는데, 색을 밝게 하거나 어둡게 조정할 때 HSL이 더 직관적이다.

CMYK는 왜 따로 있을까

모니터는 빛을 섞어서 색을 만들고(가산혼합), 프린터는 잉크를 섞어서 만든다(감산혼합). 그래서 웹용 RGB 색상을 그대로 인쇄하면 색이 달라지는 경우가 있다. 인쇄물 작업을 할 때는 CMYK 값을 따로 확인해야 한다.

색상 코드를 변환해야 하는 상황

• 디자이너가 RGB로 준 색을 CSS에 HEX로 넣어야 할 때
• 웹에서 쓰던 색을 인쇄물에 맞춰 CMYK로 바꿔야 할 때
• 기존 색상의 밝기만 조절하고 싶어서 HSL로 변환할 때
• 브랜드 가이드에 있는 색상을 다른 형식으로 통일할 때

이런 경우 수동으로 계산하면 번거롭다. 색상 코드 변환기에 아무 형식이나 입력하면 나머지 형식이 동시에 표시된다. 보색이나 유사색도 자동으로 추천해주고, 선택한 색 기준으로 밝기를 10단계로 나눈 팔레트까지 만들어준다.

TIP CSS에서 색상을 조금씩 조정할 일이 많다면 HSL 형식이 편하다. hsl(217, 89%, 61%)에서 마지막 숫자(밝기)만 바꾸면 같은 색조에서 밝거나 어두운 변형을 만들 수 있다.

색상 코드는 형식만 다를 뿐 담고 있는 정보는 같다. 작업 환경에 맞는 형식으로 바꿔 쓰면 되고, 변환은 도구에 맡기는 게 실수를 줄이는 방법이다.