HEX RGB 색상 코드 변환, 디자이너가 알아야 할 컬러 기초

CSS에서 쓰는 #FF5733이 RGB로 뭔지, 인쇄소에서 요구하는 CMYK 값은 어디서 구하는지 모르겠다면 색상 코드 체계부터 정리할 필요가 있다. 웹, 앱, 인쇄물에서 쓰는 색상 형식이 각각 다르기 때문이다.

색상 코드 형식 4가지

HEX와 RGB는 모니터 화면용(가산혼합), CMYK는 인쇄용(감산혼합)이다. 같은 색이라도 화면과 종이에서 보이는 톤이 다를 수 있다. HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)로 나눠서 직관적으로 색을 조절할 때 편하다.

언제 변환이 필요한가

• 디자이너가 준 RGB 값을 CSS에서 HEX로 써야 할 때
• 웹에서 쓰던 색상을 인쇄물에 적용하려면 CMYK로 바꿔야 할 때
• 브랜드 가이드에 HEX만 적혀 있는데 다른 형식이 필요할 때
• 보색이나 유사색 조합을 찾아서 팔레트를 만들 때

보색과 유사색, 배색 기초

보색은 색상환에서 정반대(180도)에 있는 색이다. 파란색의 보색은 주황색, 빨간색의 보색은 청록색이다. 강한 대비가 필요할 때 쓴다. 유사색은 색상환에서 30도 이내의 인접한 색으로, 조화롭고 부드러운 느낌을 줄 때 유용하다.

색상 코드 변환하는 법

변환 공식을 직접 계산하면 복잡하다. 색상 코드 변환기에서 HEX 값 하나만 입력하면 RGB, HSL, CMYK가 동시에 나온다. 컬러 피커로 색을 직접 고를 수도 있고, 슬라이더로 미세 조정도 가능하다. 보색, 유사색, 삼각형 배색까지 자동 생성돼서 팔레트를 만들 때 편하다.

TIP 인쇄물에 쓸 색상은 반드시 CMYK로 변환한 뒤 확인하자. 모니터에서 선명해 보이는 색이 종이 위에서는 탁하게 나올 수 있다. 특히 형광색 계열은 CMYK로 재현이 안 되는 경우가 많다.

색상 코드 하나만 알고 있어도 나머지 형식은 변환기로 바로 뽑을 수 있다. 웹 작업이든 인쇄 작업이든, 코드 하나 복사하면 끝이다.