디자이너에게 색상 코드를 달라고 하면 "#8B5CF6"이 오고, 개발자에게 물으면 "rgb(139, 92, 246)"이 온다. 같은 보라색인데 표기가 다르다. 어느 쪽이 맞는 게 아니라, 쓰이는 맥락이 다른 것이다.
색상 코드 형식 4가지
디지털 환경에서 쓰이는 색상 코드는 주로 네 가지다. 각각 표현 방식과 용도가 다르다.
HEX (16진수)
#기호 뒤에 6자리 16진수를 쓴다. 앞 두 자리가 빨강, 가운데가 초록, 마지막이 파랑 값이다.
- 표기:
#FF5733 - 범위: 00~FF (0~255에 대응)
- 주 용도: CSS, HTML, 웹 디자인
RGB (Red, Green, Blue)
빨강, 초록, 파랑의 밝기를 0~255 숫자로 표현한다.
- 표기:
rgb(255, 87, 51) - 범위: 각 채널 0~255
- 주 용도: CSS, 프로그래밍, 화면 디자인
HSL (Hue, Saturation, Lightness)
색상(색상환 각도), 채도(%), 명도(%)로 색을 정의한다. 사람이 색을 인지하는 방식과 가장 유사하다.
- 표기:
hsl(14, 100%, 60%) - 범위: H 0~360도, S/L 0~100%
- 주 용도: CSS, 색상 조정 작업, 팔레트 생성
CMYK (Cyan, Magenta, Yellow, Key)
인쇄용 색상 모델이다. 잉크를 섞는 방식이라 모니터와 색이 다르게 나올 수 있다.
- 표기:
cmyk(0%, 66%, 80%, 0%) - 범위: 각 채널 0~100%
- 주 용도: 인쇄물, 출판, 패키지 디자인
어떤 형식을 써야 하나
| 상황 | 권장 형식 | 이유 |
|---|---|---|
| 웹사이트 CSS | HEX 또는 RGB | 브라우저 호환성이 가장 높음 |
| 색상 미세 조정 | HSL | 명도·채도만 바꿔서 톤 변형이 쉬움 |
| 명함·전단지 인쇄 | CMYK | 인쇄소에서 CMYK 값을 요구함 |
| 앱 개발 | RGB 또는 HEX | Android/iOS 모두 RGB 기반 |
변환 시 주의할 점
HEX와 RGB는 1:1 대응이라 변환해도 색이 정확히 같다. 하지만 RGB와 CMYK 사이에는 차이가 생길 수 있다.
주의 RGB는 빛의 삼원색(가산혼합), CMYK는 잉크의 삼원색(감산혼합)이다. 모니터에서 선명하게 보이는 형광 톤이 인쇄물에서는 탁하게 나오는 경우가 있다. 인쇄용 디자인이라면 CMYK 모드에서 작업하는 게 안전하다.
보색과 유사색 찾는 법
배색 조합을 만들 때 색상환(color wheel)을 기준으로 한다.
- 보색
- 색상환에서 180도 반대에 위치한 색이다. 빨강의 보색은 청록(시안), 파랑의 보색은 주황. 시선을 강하게 끌어야 할 때 쓴다.
- 유사색
- 색상환에서 30도 이내에 있는 색이다. 톤이 비슷해서 조화롭고 안정감 있는 배색이 나온다.
- 삼각 배색
- 색상환에서 120도 간격으로 세 색을 고른다. 다양하면서도 균형 잡힌 느낌을 준다.
색상 코드 변환기에 색상을 입력하면 HEX, RGB, HSL, CMYK 변환뿐 아니라 보색, 유사색, 삼각 배색까지 자동으로 생성된다. 10단계 명도 팔레트도 함께 나오니, 같은 색의 밝고 어두운 변형을 고를 때 편리하다.
색상 코드는 형식만 다를 뿐 표현하는 색은 같다(RGB↔CMYK 예외). 작업 환경에 맞는 형식을 골라서 쓰면 되고, 형식 간 변환은 도구에 맡기면 된다.