HEX RGB 색상 코드 변환, 디자인 작업에 필요한 기초

디자이너가 보내준 색상이 #3B82F6인데, CSS에는 RGB로 넣어야 하는 상황. 반대로 포토샵에서 뽑은 RGB 값을 웹용 HEX로 바꿔야 할 때도 있다. 웹 작업을 하다 보면 색상 코드 변환은 거의 매일 마주치는 일이다.

HEX, RGB, HSL, CMYK 차이

HEX와 RGB는 같은 색을 다르게 표현한 것이라 손실 없이 변환된다. HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 나눠서 밝기나 채도만 따로 조절할 때 편하다. CMYK는 인쇄 잉크 비율이라 화면용 색상과 결과가 다를 수 있다.

변환이 필요한 실제 상황

• 피그마 → CSS: 디자인 파일에서 추출한 HEX를 CSS의 rgb()나 hsl()로 변환
• 웹 → 인쇄: 웹에서 쓰던 브랜드 컬러를 명함이나 브로슈어에 옮길 때 CMYK 값이 필요
• 색상 미세 조정: "이 파란색에서 살짝 밝게"를 하려면 HSL의 L 값만 올리면 되니까, HEX를 HSL로 바꿔서 작업하는 게 빠르다
• 개발자-디자이너 소통: 서로 다른 형식으로 색상을 전달받았을 때 통일

보색과 팔레트까지 한번에

색상 코드 변환기에 아무 형식이든 값을 넣으면 HEX, RGB, HSL, CMYK가 동시에 표시된다. 슬라이더로 채널값을 미세하게 조절하면서 실시간 미리보기로 색감을 확인할 수도 있다.

색상을 하나 선택하면 보색, 유사색, 삼각 배치 색상도 자동으로 생성된다. 밝기를 10단계로 변조한 팔레트도 함께 나오니까, 메인 컬러 하나에서 전체 색상 체계를 잡을 때 쓸 만하다.

TIP 컬러 피커로 고른 색상은 최대 20개까지 히스토리에 자동 저장된다. 프로젝트별로 자주 쓰는 색상을 빠르게 다시 꺼내 쓸 수 있다.

HEX 6자리를 머릿속으로 RGB 세 자리로 바꾸는 건 사람이 할 일이 아니다. 숫자 하나 넣으면 나머지 세 형식이 자동으로 나오니까, 변환은 도구에 맡기고 색 고르는 데 집중하는 편이 낫다.