디자이너가 보내준 색상이 #3B82F6인데, CSS에 RGB로 넣어야 한다. 반대로 포토샵에서 뽑은 RGB 값을 피그마에 HEX로 입력해야 할 때도 있다. 색상 코드 형식이 여러 가지인 이유와 변환법을 알아두면 작업이 빨라진다.
색상 코드 형식별 쓰임새
| 형식 | 표기 예시 | 주 사용처 |
|---|---|---|
| HEX | #3B82F6 | 웹 디자인, CSS, 피그마 |
| RGB | rgb(59, 130, 246) | 화면 출력, 영상 편집, CSS |
| HSL | hsl(217, 91%, 60%) | 색상 조절이 잦은 CSS 작업 |
| CMYK | 76, 47, 0, 4 | 인쇄물, 명함, 패키지 디자인 |
HEX와 RGB는 서로 1:1 대응이라 변환이 단순하다. 반면 CMYK는 색 재현 방식 자체가 다르기 때문에 RGB에서 변환하면 미세한 색 차이가 생길 수 있다. 인쇄 결과물이 화면과 다르게 느껴지는 이유가 여기에 있다.
HEX, RGB, HSL은 어떤 관계인가
HEX는 RGB를 16진수로 표기한 것이다. #3B82F6을 풀어보면 R=3B(59), G=82(130), B=F6(246)이 된다. HSL은 같은 색을 색상(Hue), 채도(Saturation), 밝기(Lightness)로 표현한 것이라 "이 색을 좀 더 밝게" 같은 조정을 할 때 직관적이다.
- HEX → RGB: 두 자리씩 끊어 10진수로 바꾸면 된다
- RGB → HSL: 수식이 복잡해서 수동 계산은 비현실적이다
- RGB → CMYK: 색 공간이 달라 근사값 변환만 가능하다
보색과 유사색 찾기
메인 컬러를 정했으면 어울리는 조합을 찾아야 한다. 보색은 색상환에서 정반대에 있는 색으로, 강한 대비 효과를 준다. 유사색은 색상환에서 양옆에 있는 색으로, 안정감 있는 조합이 된다.
예시 메인 컬러가 파란색(#3B82F6)이라면
보색: 주황색 계열(#F6923B)
유사색: 남색(#3B3BF6), 하늘색(#3BC5F6)
색상 조화를 직접 계산하려면 색상환 각도를 돌려야 하지만, 색상 코드 변환기에 컬러 하나를 넣으면 보색, 유사색, 삼각 배색까지 자동으로 뽑아준다. HEX, RGB, HSL, CMYK 네 가지 형식을 한 번에 변환해주고, 밝기별 팔레트도 10단계로 생성돼서 디자인 시안 잡을 때 쓸 만하다.
색상 코드 하나 바꾸려고 매번 검색하는 건 비효율적이다. 형식 간 관계를 이해하고 변환 도구를 즐겨찾기에 넣어두면 작업 흐름이 끊기지 않는다.