HEX RGB 변환, 색상 코드 형식별 차이와 변환 방법

Figma에서 뽑은 색상은 HEX인데, CSS에서는 RGB로 넣어야 하고, 인쇄소에 보내려면 CMYK가 필요하다. 같은 색인데 형식이 네 가지나 되니 매번 변환 작업이 생긴다.

색상 코드 4가지, 어디서 뭘 쓰나

HEX와 RGB는 모니터(빛) 기반이라 웹에서 쓰고, CMYK는 잉크 기반이라 인쇄물에서 쓴다. 같은 #FF5733이라도 모니터와 인쇄물에서는 색이 달라 보일 수 있다.

HEX와 RGB, 변환 원리

HEX 코드 #FF5733은 사실 RGB를 16진수로 표현한 것이다. 두 글자씩 끊으면 FF(빨강 255), 57(초록 87), 33(파랑 51)이 된다.

#FF5733 → R:255, G:87, B:51

수동으로 16진수를 변환하는 건 번거롭다. 색상 코드를 하나 넣으면 HEX, RGB, HSL, CMYK 네 형식으로 동시에 바꿔주는 색상 변환기가 있으면 바로 복사해서 CSS나 디자인 툴에 붙여넣기만 하면 된다.

HSL은 언제 쓰면 좋을까

HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)로 색을 표현한다. RGB보다 직관적이라 색상 변형에 유리하다.

• 같은 파란색 계열에서 밝기만 바꾸고 싶으면 L 값만 조절
• 채도를 낮추면 파스텔톤, 높이면 원색에 가까워짐
• H 값을 180도 돌리면 보색이 바로 나옴

TIP 버튼 hover 색상을 만들 때 기존 색의 HSL에서 L값만 10% 낮추면 자연스러운 다크 톤이 된다. RGB로는 세 값을 다 건드려야 해서 감이 잡기 어렵다.

보색과 유사색 찾기

메인 컬러 하나를 정했는데 어울리는 조합 색을 모르겠을 때, 보색(반대편 색)과 유사색(인접 색)을 참고하면 된다. 보색은 강한 대비를 줄 때, 유사색은 부드러운 조화를 줄 때 쓴다. 색상환에서 180도 반대가 보색, 30도 양옆이 유사색이다.

색상 코드 변환은 디자인 작업에서 매일 반복되는 일이다. 머릿속으로 16진수를 RGB로 바꾸는 건 비효율적이니, 도구에 맡기고 디자인 자체에 집중하는 게 낫다.