웹페이지 배경색을 바꾸려고 디자이너에게 색상을 물어봤더니 'CMYK 70, 0, 10, 50'이라는 답이 돌아왔다. CSS에는 HEX나 RGB만 쓸 수 있는데, 이걸 어떻게 변환하는지 몰라서 한참 헤맸다.
색상 코드 4가지 형식
- HEX
- #FF5733처럼 # 뒤에 6자리 16진수로 표기한다. 웹 개발에서 가장 많이 쓰이는 형식이다.
- RGB
- 빨강(R), 초록(G), 파랑(B) 값을 0~255로 지정한다. rgb(255, 87, 51) 형태로 CSS에서도 사용 가능하다.
- HSL
- 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현한다. 색을 직관적으로 조절할 때 편리하다.
- CMYK
- 청록(C), 자홍(M), 노랑(Y), 검정(K) 잉크 비율이다. 인쇄물 디자인에서 쓰인다. 모니터 색상과 인쇄 결과가 다를 수 있다.
어디에 어떤 형식을 쓸까
| 용도 | 권장 형식 | 이유 |
|---|---|---|
| CSS/웹 개발 | HEX 또는 RGB | 브라우저가 직접 해석 |
| UI 디자인 (피그마 등) | HEX | 색상 공유 시 가장 보편적 |
| 색상 미세 조정 | HSL | 명도/채도만 따로 조절 가능 |
| 인쇄물 디자인 | CMYK | 인쇄기가 CMYK 기반으로 작동 |
보색과 유사색 찾기
메인 색상을 정했는데 어울리는 조합을 모르겠을 때가 있다. 색상환에서의 위치 관계를 알면 조합이 쉬워진다.
- 보색: 색상환에서 정반대(180도) 위치. 강한 대비를 줄 때 사용한다
- 유사색: 색상환에서 30도 범위 안의 인접 색상. 자연스럽고 편안한 느낌을 준다
- 삼각 조화: 120도 간격의 세 색상. 생동감 있으면서 균형 잡힌 배색이다
기준 색상 하나만 정하면 보색, 유사색, 삼각 조화 색상을 자동으로 뽑아주는 색상 코드 변환기가 있다. HEX, RGB, HSL, CMYK 간 변환도 값을 입력하는 즉시 처리되니 일일이 계산할 필요가 없다.
디자인 작업에서 색상 코드 변환은 자주 반복되는 일이다. 북마크 하나 해두면 매번 검색하는 수고를 줄일 수 있다.