피그마에서 뽑은 색상 코드가 #3B82F6인데, CSS에는 rgb로 넣어야 하고, 인쇄소에는 CMYK로 보내야 한다. 같은 파란색이지만 표기 방식이 다 다르다. 이 네 가지 색상 체계의 차이를 알면, 코드 하나로 나머지를 바로 변환할 수 있다.
색상 코드 4가지, 각각 어디에 쓰이나
- HEX (#3B82F6)
- 웹에서 가장 많이 쓰는 형식. # 뒤에 6자리 16진수로 표현한다. CSS, HTML에서 기본으로 사용된다.
- RGB (59, 130, 246)
- 빛의 3원색(빨강, 초록, 파랑)을 0~255 사이 숫자로 표현. 모니터, 앱 개발에서 주로 쓴다.
- HSL (217°, 91%, 60%)
- 색상(Hue), 채도(Saturation), 명도(Lightness)로 구분. 같은 색 계열에서 밝기만 조절할 때 편하다.
- CMYK (76%, 47%, 0%, 4%)
- 인쇄용 색상 체계. 시안, 마젠타, 옐로, 블랙 잉크 비율로 표현한다. 모니터 색상과 인쇄 결과물이 다른 이유가 이 체계 차이 때문이다.
변환이 필요한 실제 상황들
| 상황 | 입력 형식 | 필요한 형식 |
|---|---|---|
| 피그마 → CSS 적용 | HEX | RGB 또는 HSL |
| 웹 디자인 → 명함 인쇄 | HEX/RGB | CMYK |
| 브랜드 컬러 밝기 조절 | HEX | HSL |
| 인쇄물 색상을 웹에 적용 | CMYK | HEX |
보색과 유사색까지 찾으려면
메인 색상을 정했는데 어울리는 배색을 못 찾겠다면, 색상 조화 기능을 활용하면 된다. 온라인 색상 변환기에 컬러 코드를 넣으면 HEX, RGB, HSL, CMYK 변환은 물론이고 보색, 유사색, 삼각형 조화 색상까지 자동으로 생성해준다. 선택한 색을 기준으로 10단계 명암 팔레트도 나오기 때문에 버튼 hover 색상 같은 세부 변형을 잡을 때 유용하다.
참고 모니터에서 본 색상과 인쇄 결과물은 항상 차이가 있다. RGB는 빛을 섞어서 색을 만들고(가산혼합), CMYK는 잉크를 섞어서 만들기(감산혼합) 때문이다. 중요한 인쇄물이라면 실제 출력 샘플로 확인하는 게 안전하다.
색상 코드 변환은 외워서 할 수 있는 영역이 아니다. 도구에 넣고 바로 확인하는 게 가장 빠르고 정확하다.