웹 디자인을 하다 보면 색상 코드 형식이 제각각이다. 포토샵에서는 HEX 코드를 쓰고, CSS에서는 RGB를 쓰고, 인쇄소에 파일을 넘기면 CMYK 값을 달라고 한다. 같은 빨간색인데 #FF0000, rgb(255,0,0), cmyk(0,100,100,0)으로 표기가 전부 다르다.
색상 코드 형식별 차이
- HEX (16진수)
- #FF5733처럼 # 뒤에 6자리 16진수로 표현한다. 웹 디자인에서 가장 널리 쓰이는 형식이다. CSS, HTML에서 바로 사용 가능하다.
- RGB
- 빨강(R), 초록(G), 파랑(B) 값을 0~255 범위로 지정한다. 모니터 같은 화면 기반 디스플레이의 기본 색상 체계다.
- HSL
- 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현한다. 색의 밝기나 선명도를 조절할 때 직관적이라 CSS에서 쓰기 편하다.
- CMYK
- 시안(C), 마젠타(M), 노랑(Y), 검정(K)의 잉크 비율이다. 인쇄물 제작에 쓰인다. 화면에서 본 색과 인쇄 결과가 다를 수 있으니 반드시 CMYK로 변환 후 확인해야 한다.
언제 어떤 형식을 쓸까
| 용도 | 권장 형식 | 이유 |
|---|---|---|
| 웹사이트 CSS | HEX 또는 RGB | 브라우저 호환성이 가장 높다 |
| 색상 미세 조정 | HSL | 명도/채도만 따로 바꾸기 쉽다 |
| 명함, 전단지 인쇄 | CMYK | 인쇄기가 CMYK 기반으로 동작한다 |
| 앱 개발(iOS/Android) | RGB 또는 HEX | 모바일 화면도 RGB 기반이다 |
색상 코드 변환하는 법
HEX를 RGB로 수동 변환하려면 16진수를 10진수로 바꿔야 하는데, 이걸 머릿속으로 하는 건 비현실적이다. 온라인 색상 변환기에 아무 형식이든 값을 넣으면 나머지 세 형식으로 자동 변환된다. 컬러 피커로 화면에서 색을 직접 찍어서 코드를 뽑을 수도 있다.
TIP 브랜드 컬러를 정했으면 HEX, RGB, CMYK 값을 한 번에 뽑아서 기록해두자. 웹, 앱, 인쇄물마다 형식을 바꿔 쓸 일이 반드시 생긴다.
보색과 유사색, 팔레트 만들기
메인 컬러 하나를 정하면 그에 어울리는 색을 찾아야 한다. 색상환에서 정반대에 위치한 색이 보색이고, 양옆에 위치한 색이 유사색이다.
- 보색 조합 : 대비가 강해서 버튼이나 CTA(클릭 유도) 요소에 쓰면 눈에 잘 띈다
- 유사색 조합 : 톤이 비슷해서 전체적으로 조화로운 느낌을 준다. 배경, 카드, 헤더 색을 유사색으로 통일하면 깔끔하다
- 삼각 배색 : 색상환에서 정삼각형 위치의 세 색을 쓰는 방식으로, 다채로우면서도 균형 잡힌 느낌이다
색 조합 감각이 없어도 괜찮다. 기준 색 하나만 넣으면 보색, 유사색, 팔레트를 자동으로 생성해주니 거기서 골라 쓰면 된다.