색상 코드 변환, HEX·RGB·HSL·CMYK 차이와 사용법

파워포인트에서 쓰던 색상을 웹사이트에 그대로 옮기고 싶었다. 파워포인트는 RGB로 보여주고, CSS에서는 HEX 코드를 쓴다. 같은 색인데 형식이 달라서 색상 코드 변환이 필요했다.

색상 코드 형식 4가지

네 형식 모두 같은 색을 표현할 수 있지만, 사용처에 따라 적합한 형식이 다르다.

어디서 어떤 형식을 쓰나

웹 개발 (HTML/CSS)

HEX가 표준. #FFFFFF처럼 간결해서 코드에 넣기 좋다. CSS에서는 RGB, HSL도 지원하지만 HEX가 관행적으로 가장 많이 쓰인다.

디자인 툴 (피그마, 포토샵)

RGB가 기본값. 대부분의 디자인 프로그램에서 색을 RGB 슬라이더로 조절한다. HEX 입력도 지원.

인쇄물 (명함, 포스터, 패키지)

CMYK 필수. 모니터(RGB)와 인쇄(CMYK)는 색 재현 범위가 달라서, 화면에서 보던 색이 인쇄하면 탁하게 나올 수 있다. 인쇄소에 넘길 때는 반드시 CMYK로 변환해야 한다.

색상 조정 작업

HSL이 편하다. 밝기만 올리고 싶을 때 L값만 바꾸면 된다. RGB에서는 세 값을 동시에 건드려야 해서 감이 잡히기 어렵다.

보색과 유사색 활용

메인 색상을 정했으면 보색(반대색)과 유사색(인접색)을 함께 쓰면 디자인의 조화가 좋아진다. 예를 들어 파란색 메인에 주황색 보색을 포인트로 넣으면 시선이 자연스럽게 강조 요소로 간다.

TIP 색 조합에 자신이 없으면 메인 색상 하나를 정한 뒤 색상 코드 변환기에서 보색과 유사색을 자동으로 뽑아보자. 밝기 단계별 팔레트도 함께 생성되니까 버튼 색, 배경색, 텍스트 색을 통일감 있게 정하기 편하다.

색상 코드 하나만 알면 나머지 형식은 변환하면 그만이다. 웹에서 쓰던 HEX를 인쇄용 CMYK로 바꾸거나, 디자인 시안의 RGB를 CSS에 넣을 때 수작업으로 계산할 필요 없이 코드를 넣고 복사하면 된다.