디자인 작업을 하다 보면 색상 코드 때문에 멈추는 순간이 생깁니다. 피그마에서 뽑은 색상 코드는 #3B82F6 형태인데, 개발자에게 전달하거나 CSS를 직접 작성할 때는 rgb(59, 130, 246) 형태가 필요한 경우가 있습니다. 반대로 포토샵이나 일러스트레이터에서 RGB 값으로 작업하다가 웹 코드 형태인 HEX가 필요해지기도 하죠. 이 두 가지 표기 방식의 차이를 제대로 이해하면, 앞으로 작업 흐름이 훨씬 빨라집니다.
HEX와 RGB는 사실 같은 색을 다르게 표현하는 방법입니다. 둘 다 화면에서 색을 나타내기 위해 빛의 삼원색인 빨강(Red), 초록(Green), 파랑(Blue)을 사용하며, 그 값을 어떤 숫자 체계로 나타내느냐만 다릅니다.
HEX 코드는 빨강·초록·파랑 각각의 값을 16진수(0~9, A~F)로 표현한 뒤 붙여서 씁니다. 예를 들어 #FF6B6B에서 FF는 빨강, 6B는 초록, 6B는 파랑 값입니다. 16진수 FF는 10진수로 255이고, 6B는 107에 해당합니다. 앞에 붙는 # 기호는 이 값이 HEX 색상 코드임을 나타냅니다.
RGB 코드는 같은 빨강·초록·파랑 값을 10진수(0~255)로 그대로 씁니다. 위의 HEX 코드를 RGB로 바꾸면 rgb(255, 107, 107)이 됩니다. 사람이 직관적으로 읽기 더 편하고, 투명도 값(알파 채널)을 추가하면 rgba(255, 107, 107, 0.8) 형태로 반투명 색상도 표현할 수 있습니다.
어디서 HEX를 쓰고 어디서 RGB를 써야 할까
실제 작업 환경에 따라 자주 쓰이는 형식이 다릅니다.
피그마와 스케치는 색상 코드를 기본적으로 HEX로 표시합니다. 컴포넌트를 만들거나 디자인 시스템을 구성할 때 HEX가 기준이 되는 경우가 많습니다. 포토샵과 일러스트레이터도 색상 피커에서 HEX 코드를 직접 입력하고 복사할 수 있습니다.
CSS와 HTML에서는 HEX와 RGB 모두 쓸 수 있습니다. color: #3B82F6과 color: rgb(59, 130, 246)은 완전히 같은 결과를 냅니다. 다만 투명도가 필요할 때는 rgba()를 써야 하므로, 반투명 배경이나 오버레이 효과에서는 RGB 형태가 편리합니다.
iOS와 Android 앱 개발에서는 RGB 값 혹은 별도의 색상 형식을 주로 사용합니다. Swift에서는 UIColor(red:green:blue:alpha:), Android에서는 Color.rgb() 함수에 10진수 값을 직접 넣습니다. 이때 HEX를 RGB로 변환해야 할 상황이 자주 생깁니다.
수동으로 변환하는 방법
직접 계산할 수 있으면 급할 때 유용합니다.
HEX → RGB 변환은 HEX 코드의 각 두 자리를 16진수로 보고 10진수로 변환하면 됩니다. #1A2B3C에서 1A는 1×16+10=26, 2B는 2×16+11=43, 3C는 3×16+12=60이 됩니다. 결과는 rgb(26, 43, 60)입니다.
RGB → HEX 변환은 반대로 10진수를 16진수로 바꾼 뒤 두 자리로 맞춰 붙입니다. rgb(255, 99, 71)이라면 255는 FF, 99는 63, 71은 47이 되어 #FF6347이 됩니다. 한 자리 16진수가 나올 경우 앞에 0을 붙여서 두 자리로 맞춰야 합니다(예: 10진수 9 → 09가 아닌 0F가 아닌 09).
이 계산을 매번 손으로 하는 건 번거롭기 때문에, 실무에서는 거의 모두 도구를 씁니다.
온라인에서 바로 변환하는 방법
색상 코드를 빠르게 변환할 때는 온라인 도구가 가장 효율적입니다. 온라인에서 바로 쓸 수 있는 무료 색상 변환 도구로는 pxltool.com이 있습니다. 회원가입 없이 브라우저에서 바로 사용할 수 있고, 모든 처리가 로컬에서 이루어져 입력한 색상 값이 서버로 전송되지 않습니다. HEX↔RGB 변환 외에도 색상 팔레트 생성, 색상 대비 검사, 다크 모드용 색상 변환, 색온도 변환 등 디자인 작업에서 자주 필요한 색상 관련 도구들을 한 곳에서 쓸 수 있어 편리합니다.
색상 코드 작업 시 자주 하는 실수 3가지
첫 번째는 # 기호를 빼먹는 것입니다. CSS나 피그마에서 HEX 코드를 입력할 때 #을 앞에 붙이지 않으면 색상이 적용되지 않거나 오류가 납니다. # 없이 입력하는 도구도 있으므로 어떤 환경인지 먼저 확인해야 합니다.
두 번째는 대소문자를 혼용해서 혼란이 생기는 경우입니다. #ff6b6b와 #FF6B6B는 동일한 색상이고 CSS에서도 동일하게 처리됩니다. 다만 디자인 시스템이나 코드베이스에서 일관성을 위해 한 가지 형식(보통 대문자 또는 소문자)으로 통일하는 것이 좋습니다.
세 번째는 RGB 범위를 잘못 이해하는 것입니다. RGB 각 채널의 값은 0에서 255까지이며 256가지 단계를 갖습니다. 간혹 0~100 범위의 퍼센트 형식(CSS의 rgb(100%, 42%, 28%))과 혼동하는 경우가 있으니, 어떤 형식을 쓰는 도구인지 확인하고 사용해야 합니다.
마무리
HEX와 RGB는 동일한 색상을 서로 다른 표기 방식으로 나타낸 것입니다. HEX는 짧고 복사하기 편해 디자인 도구와 웹 CSS에서 기본값으로 많이 쓰이고, RGB는 직관적으로 읽기 쉽고 투명도 처리가 가능해 개발 환경에서 유용합니다. 두 형식을 자유롭게 전환할 수 있으면 디자인과 개발 사이의 협업이 훨씬 매끄러워집니다. 색상 코드가 헷갈릴 때마다 위에 소개한 도구를 즐겨찾기에 저장해 두고 바로바로 활용해 보세요.