색상 코드 변환 방법 완벽 가이드 - HEX RGB HSL 한번에 정리

웹 디자인 시안을 받았는데 색상이 #3B82F6으로 적혀 있고, 개발자에게 전달하려니 RGB 값이 필요한 경험이 있으실 겁니다. 또는 일러스트레이터에서 작업한 색을 CSS에 그대로 옮겨야 하는데, 형식이 달라서 막막했던 적도 많습니다. 색상 코드는 같은 색을 다양한 방식으로 표현하기 때문에, 변환 방법만 익혀두면 작업 시간이 크게 줄어듭니다.

특히 디자이너와 개발자가 협업할 때 색상 코드 변환 방법을 모르면 사소한 오해로 시안과 결과물이 달라지는 일이 자주 생깁니다. 이번 글에서는 HEX, RGB, HSL, CMYK까지 자주 쓰이는 4가지 형식을 비교하고 각 형식 간의 변환 방법을 정리하겠습니다.

색상 코드를 왜 변환해야 할까

색상은 같은 빨강이라도 어떤 매체에서 쓰느냐에 따라 표기 방식이 달라집니다. 웹은 RGB 기반이고, 인쇄물은 CMYK 기반입니다. 디자인 도구는 HSL을 선호하기도 합니다. 그래서 한 가지 형식만 알고 있으면 협업 과정에서 매번 누군가가 변환을 해야 합니다.

예를 들어 브랜드 컬러가 #FF6B35로 정해졌다고 해봅시다. 이 색을 명함에 인쇄하려면 CMYK로 바꿔야 하고, CSS에 투명도를 적용하려면 RGBA 또는 HSL로 표현해야 합니다. 변환 방법을 모르면 그때마다 디자이너에게 다시 요청해야 하는 비효율이 생깁니다.

색상 코드 변환은 단순한 숫자 놀이가 아닙니다. 같은 색을 다양한 환경에서 일관되게 재현하기 위한 필수 작업입니다.

주요 색상 코드 형식 4가지

실무에서 자주 마주치는 색상 코드는 크게 4가지입니다. 각 형식이 어떤 환경에서 쓰이는지 먼저 정리해보겠습니다.

각 형식의 장단점

• HEX는 짧고 복사가 편해서 CSS 작업에 가장 많이 쓰입니다
• RGB는 투명도(알파)를 표현하기 좋아 RGBA 형태로 자주 사용됩니다
• HSL은 색조, 채도, 명도가 분리되어 있어 색상 조정이 직관적입니다

HEX와 RGB 변환 방법

HEX는 16진수 6자리로 R, G, B 각각 2자리씩 표현합니다. 예를 들어 #3B82F6은 R=3B, G=82, B=F6입니다. 이를 10진수로 바꾸면 R=59, G=130, B=246이 됩니다.

HEX를 RGB로 바꾸는 공식

16진수 2자리를 10진수로 변환하는 방법은 간단합니다. 각 자리수에 16의 거듭제곱을 곱해 더하면 됩니다.

• 3B = (3 × 16) + 11 = 59
• 82 = (8 × 16) + 2 = 130
• F6 = (15 × 16) + 6 = 246

반대로 RGB를 HEX로 바꿀 때는 각 값을 16으로 나눠 몫과 나머지를 16진수로 표기합니다. 손으로 계산하면 시간이 오래 걸리니, 실무에서는 변환 도구를 쓰는 것이 정확하고 빠릅니다.

축약형 HEX

HEX는 동일 자리수가 반복될 때 3자리로 축약할 수 있습니다. 예를 들어 #FF0033은 R=FF, G=00, B=33이므로 #F03으로 줄여 쓸 수 있습니다. 다만 #FF0034처럼 반복되지 않는 경우는 축약이 불가능합니다.

RGB와 HSL 변환 방법

HSL은 Hue(색조), Saturation(채도), Lightness(명도) 세 가지 값으로 색을 표현합니다. RGB가 빛의 삼원색을 섞는 방식이라면, HSL은 사람이 색을 인식하는 방식에 가깝습니다.

HSL이 직관적인 이유

RGB에서 파란색을 조금 어둡게 만들려면 R, G, B 세 값을 모두 조정해야 합니다. 하지만 HSL에서는 Lightness 값만 줄이면 됩니다. 그래서 디자인 도구의 색상 피커는 대부분 HSL 또는 HSB 기반으로 동작합니다.

RGB를 HSL로 변환하는 공식은 복잡합니다. 간단히 말하면 R, G, B 중 최댓값과 최솟값을 찾아 평균을 내고, 그 값으로 명도를 계산합니다. 그 다음 채도와 색조를 차례로 구합니다. 직접 계산하기보다는 브라우저 개발자 도구나 온라인 변환기를 활용하는 것이 현실적입니다.

실전에서 쓰는 변환 도구 정리

색상 코드 변환은 굳이 외우지 않아도 됩니다. 좋은 도구가 많기 때문입니다.

브라우저 개발자 도구

크롬이나 파이어폭스의 개발자 도구에서 CSS의 color 속성 옆 색상 미리보기를 클릭하면 HEX, RGB, HSL을 클릭 한 번으로 전환할 수 있습니다. 별도 사이트를 열지 않아도 되어 가장 빠릅니다.

온라인 변환 도구

구글에 "color converter"를 검색하면 구글 자체 변환기가 바로 나옵니다. 색상 코드를 입력하면 HEX, RGB, HSL, CMYK를 한 번에 보여줍니다. 디자인 작업 중 빠르게 확인할 때 유용합니다.

디자인 도구 내장 기능

피그마, 어도비 XD, 일러스트레이터 같은 도구는 색상 피커에서 형식을 자유롭게 전환할 수 있습니다. 작업 도중에는 이 기능을 활용하는 것이 가장 편리합니다.

참고로 색상 코드 외에도 디자인 작업에서 자주 쓰는 유틸리티 도구들이 있습니다. 더미 데이터가 필요할 때는 랜덤 숫자 생성기로 빠르게 값을 만들 수 있고, 상품 페이지에 들어갈 코드가 필요하면 바코드 생성기를 활용하면 됩니다. 작업 중간중간 멈추지 않으려면 이런 도구들을 미리 북마크해두는 것이 좋습니다.

작업 효율을 높이는 색상 관리 팁

색상 코드를 잘 다루는 것을 넘어, 프로젝트 전체에서 색을 일관되게 관리하는 방법도 중요합니다.

CSS 변수로 색상 관리

프로젝트의 메인 컬러를 CSS 변수로 정의해두면 한 곳만 수정해도 전체에 반영됩니다. 예를 들어 --primary: #3B82F6으로 선언해두고, 필요한 곳에서는 var(--primary)로 호출합니다.

색상 팔레트 문서화

• 브랜드 컬러는 HEX, RGB, CMYK 모두 기록해두기
• 각 색상의 용도(주 색상, 강조, 경고 등) 명시하기
• 다크모드 대응 색상도 함께 정리하기

색상 코드 변환 방법을 한 번 익혀두면 협업 과정에서 막히는 일이 거의 없습니다. 지금 작업 중인 프로젝트의 메인 컬러를 4가지 형식으로 모두 정리해보세요. 그리고 자주 쓰는 변환 도구를 즐겨찾기에 추가하면 다음 작업부터 시간이 크게 줄어듭니다.