디자이너한테 받은 색상이 #3A86FF다. CSS에 넣으려면 rgb() 형식이 필요하고, 인쇄소에 넘길 때는 CMYK 값을 달라고 한다. 같은 색인데 표현 방식이 다를 뿐이라, 변환 방법만 알면 어렵지 않다.
색상 코드 4가지, 각각 언제 쓰나
- HEX (#3A86FF)
- 16진수 6자리로 색을 표현한다. 웹 디자인, CSS, 브랜드 가이드라인에서 가장 많이 쓰인다. #으로 시작하고 RR/GG/BB 두 자리씩 16진수로 표기한다.
- RGB (58, 134, 255)
- 빨강(R), 초록(G), 파랑(B)을 각각 0~255 사이 숫자로 표현한다. CSS의 rgb() 함수, Photoshop의 색상 선택창에서 이 형식을 쓴다.
- HSL (220°, 100%, 61%)
- 색상(Hue), 채도(Saturation), 명도(Lightness) 세 가지 축으로 색을 나타낸다. 같은 색 계열에서 밝기나 채도만 조절하고 싶을 때 직관적이다.
- CMYK (77%, 47%, 0%, 0%)
- 인쇄 전용 색상 모델이다. 시안(C), 마젠타(M), 노랑(Y), 검정(K) 잉크의 혼합 비율을 표기한다. 모니터 색과 인쇄물 색이 다르게 나오는 이유가 RGB와 CMYK의 색 재현 범위(gamut) 차이 때문이다.
변환이 필요한 실제 상황
- 피그마/스케치에서 뽑은 HEX 코드를 CSS rgb()로 바꿔야 할 때
- 웹에서 쓰던 브랜드 색상을 명함·전단지 인쇄용 CMYK로 넘겨야 할 때
- 기존 색상에서 밝기만 조절하고 싶어서 HSL 값이 필요할 때
- 경쟁사 사이트 색상을 분석해서 코드로 뽑고 싶을 때
보색과 유사색까지 찾으려면
메인 컬러 하나를 정했는데 어울리는 조합을 못 찾겠을 때가 있다. 색상 코드 변환기에 HEX 코드를 넣으면 RGB, HSL, CMYK로 동시에 변환되고, 색상환 기반으로 보색(180도 반대), 유사색(30도 인접), 삼각 조화(120도 간격)까지 자동으로 생성된다. 명도를 10단계로 나눈 팔레트도 함께 나오니, 배경색부터 강조색까지 한 세트로 뽑을 수 있다.
TIP 최근 사용한 색상 20개가 브라우저에 자동 저장된다. 여러 프로젝트를 오가면서 색상을 비교할 때 유용하다.
색상 코드는 변환 공식이 정해져 있어서 수동 계산도 가능하지만, 프로젝트 중간에 숫자를 일일이 계산하는 건 비현실적이다. 코드 한 줄 넣고 바로 결과를 확인하는 편이 시간 낭비가 없다.