피그마에서 뽑은 색상 코드가 #3B82F6인데, CSS에는 rgba로 넣어야 한다. 인쇄소에서는 CMYK 값을 달라고 한다. 같은 파란색인데 표현 방식이 네 가지나 된다.
색상 코드 4가지 형식
- HEX (#3B82F6)
- 16진수 6자리로 빨강·초록·파랑을 표현한다. 웹 디자인에서 가장 많이 쓰이는 형식이다. CSS, HTML에서 바로 사용할 수 있다.
- RGB (59, 130, 246)
- 빨강(R), 초록(G), 파랑(B) 각각 0~255 값으로 색을 표현한다. 모니터와 스마트폰 화면은 이 방식으로 색을 출력한다.
- HSL (217°, 91%, 60%)
- 색상(Hue), 채도(Saturation), 명도(Lightness)로 구분한다. 같은 계열의 색을 밝기만 다르게 만들 때 직관적이다.
- CMYK (76%, 47%, 0%, 4%)
- 시안(C), 마젠타(M), 노랑(Y), 검정(K)의 잉크 배합이다. 인쇄물을 제작할 때 쓰는 형식이다.
어디서 어떤 형식을 쓰나
| 작업 | 주로 쓰는 형식 | 이유 |
|---|---|---|
| 웹 개발 (CSS) | HEX 또는 RGB | 브라우저가 직접 해석하는 형식 |
| UI/UX 디자인 | HEX | 피그마, 스케치 등 디자인 툴 기본 형식 |
| 브랜드 가이드 | HEX + CMYK + Pantone | 화면용과 인쇄용을 모두 명시 |
| 인쇄물 제작 | CMYK | 프린터가 CMYK 기반으로 잉크를 혼합 |
| 색상 조절/변형 | HSL | 명도·채도 조절이 숫자 하나로 가능 |
변환은 어떻게 하나
HEX → RGB 변환은 16진수를 10진수로 바꾸면 되지만, HSL이나 CMYK로의 변환은 수식이 복잡하다. 직접 계산하기보다는 색상 변환기에 코드 하나를 입력하면 나머지 세 형식이 자동으로 나오니까 이 편이 빠르다. 컬러 피커로 눈에 보이는 색을 직접 찍어서 코드를 뽑을 수도 있고, 보색이나 유사색도 함께 보여준다.
TIP 화면에서 보이는 색과 인쇄물의 색은 다를 수 있다. RGB는 빛의 삼원색(가산 혼합)이고, CMYK는 잉크의 삼원색(감산 혼합)이기 때문이다. 중요한 인쇄물이면 출력 샘플을 반드시 확인하자.
보색을 찾아야 할 때
보색은 색상환에서 정반대(180도)에 위치한 색이다. 배경색과 텍스트 색의 대비를 극대화하고 싶을 때 보색 조합을 쓰면 가독성이 올라간다. 파란색(#3B82F6)의 보색은 주황 계열이 된다. 유사색은 색상환에서 30도 안쪽에 있는 색으로, 통일감 있는 디자인에 쓰인다.
색상 코드를 한 번 변환해두면 기획서, CSS, 인쇄 시안까지 같은 색을 일관되게 쓸 수 있다. 형식이 달라서 색이 미묘하게 달라지는 실수를 줄이려면 처음부터 네 형식을 모두 기록해두는 게 좋다.