HEX 색상 코드 표기법 완벽 정리 - #RRGGBB 구조부터 투명도까지
웹 디자인을 하다 보면 매번 마주치는 #FF5733 같은 코드, 정확히 무슨 의미일까요. 16진수 원리부터 3자리 축약, 8자리 알파값까지 한 번에 정리했습니다.
디자인 시안을 받았는데 색상 정보가 #3B82F6 한 줄로만 적혀 있던 경험, 한 번쯤 있으실 겁니다. CSS를 만지다 보면 매일 마주치는 표기인데, 막상 이 6자리 코드가 어떻게 색을 만드는지 설명하라고 하면 막막해집니다. HEX 색상 코드 표기법은 한 번 원리를 이해하면 평생 써먹는 지식입니다. 외울 필요 없이 구조만 알면 됩니다.
HEX 색상 코드란 무엇인가
HEX 색상 코드는 색을 16진수(Hexadecimal)로 표현하는 방식입니다. 컴퓨터 화면의 모든 색은 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 빛을 섞어서 만듭니다. 이른바 RGB 방식입니다. 각 색의 밝기를 0부터 255까지의 숫자로 지정하는데, 이 숫자를 16진수로 바꿔서 짧게 적은 것이 바로 HEX 코드입니다.
맨 앞의 우물 정자 기호(#)는 "이건 16진수 색상값이다"라는 표시입니다. 그 뒤에 6자리 문자가 붙습니다. 16진수는 0부터 9까지의 숫자에 A, B, C, D, E, F를 더해 총 16개의 기호를 사용합니다. 여기서 A는 10, F는 15를 의미합니다.
HEX 코드는 새로운 색 체계가 아닙니다. RGB라는 같은 정보를 더 짧고 표준화된 방식으로 적은 것뿐입니다. RGB와 HEX는 완전히 동일한 색을 가리킵니다.
#RRGGBB 구조 뜯어보기
6자리 코드는 두 자리씩 세 묶음으로 나뉩니다. 순서대로 빨강, 초록, 파랑입니다.
- RR - 앞 2자리는 빨강의 밝기
- GG - 가운데 2자리는 초록의 밝기
- BB - 뒤 2자리는 파랑의 밝기
각 묶음은 16진수 두 자리로, 00이 가장 어둡고(0) FF가 가장 밝습니다(255). 예를 들어 #FF0000은 빨강만 최대치이고 나머지는 0이므로 순수한 빨강이 됩니다. #00FF00은 초록, #0000FF는 파랑입니다.
| HEX 코드 | RGB 값 | 색상 |
|---|---|---|
| #FF0000 | 255, 0, 0 | 빨강 |
| #00FF00 | 0, 255, 0 | 초록 |
| #0000FF | 0, 0, 255 | 파랑 |
| #FFFFFF | 255, 255, 255 | 흰색 |
| #000000 | 0, 0, 0 | 검정 |
| #3B82F6 | 59, 130, 246 | 밝은 파랑 |
3자리 축약과 8자리 알파 표기
HEX 코드에는 6자리 외에 3자리와 8자리 변형도 있습니다.
3자리 축약형
두 자리가 똑같이 반복되는 색은 한 자리로 줄여 쓸 수 있습니다. #FF0000은 #F00으로, #FFFFFF는 #FFF로 표기합니다. 브라우저는 각 자리를 두 번 반복한 것으로 읽습니다. 즉 #F00은 #FF0000과 같습니다. 다만 #FA3322처럼 반복되지 않는 색은 축약할 수 없습니다.
8자리 알파 표기
CSS Color Module Level 4부터는 뒤에 2자리를 더 붙여 투명도(알파)를 지정할 수 있습니다. #RRGGBBAA 형식입니다. 마지막 AA가 00이면 완전 투명, FF면 완전 불투명입니다. 예를 들어 #3B82F680은 약 50% 투명한 파랑입니다.
RGB와 HEX 변환 원리
변환 자체는 단순합니다. 10진수 한 자리를 16진수 두 자리로 바꾸는 작업입니다. 예를 들어 빨강값 59를 16진수로 바꿔 보겠습니다.
- 59를 16으로 나누면 몫 3, 나머지 11
- 11은 16진수로 B
- 따라서 59는 16진수로 3B
이렇게 R, G, B 세 값을 각각 변환해 이어 붙이면 HEX 코드가 됩니다. 반대로 HEX를 RGB로 바꿀 때는 두 자리씩 16진수를 10진수로 환산하면 됩니다. 손으로 계산할 일은 거의 없지만, 원리를 알면 코드를 보고 대략적인 색감을 떠올릴 수 있습니다. 앞자리가 클수록 해당 색이 강하다는 감각만 익혀도 충분합니다.
색을 직접 조합하거나 어울리는 색 조합을 찾고 싶다면 컬러 팔레트 생성기 같은 도구를 쓰면 HEX 코드를 일일이 계산하지 않고도 조화로운 색상값을 바로 얻을 수 있습니다. 기준 색 하나만 정하면 보색이나 유사색을 자동으로 뽑아 줍니다.
실무에서 자주 쓰는 색상값과 팁
실무에서는 모든 색을 외울 필요 없이 몇 가지 기준만 잡아 두면 작업이 빨라집니다.
- 대소문자 무관 - #ff5733과 #FF5733은 완전히 같습니다. 다만 코드 일관성을 위해 한 쪽으로 통일하는 편이 좋습니다.
- 접근성 고려 - 텍스트와 배경의 명도 대비가 부족하면 가독성이 떨어집니다. 본문 텍스트는 배경과 충분한 대비를 확보해야 합니다.
- 브랜드 컬러 고정 - 자주 쓰는 색은 CSS 변수로 등록해 두면 #3B82F6 같은 값을 매번 입력하지 않아도 됩니다.
HEX 표기법은 결국 16진수 두 자리씩 세 묶음, 그리고 선택적으로 투명도 두 자리라는 규칙 하나로 정리됩니다. 이 구조만 머릿속에 넣어 두면 어떤 색상 코드를 봐도 당황하지 않습니다.
오늘 두 가지만 실천해 보시기 바랍니다. 첫째, 자주 쓰는 색 5개를 골라 HEX 값을 메모해 두세요. 둘째, 새 프로젝트를 시작할 때 팔레트 도구로 기준 색과 조합색을 먼저 정한 뒤 코드 작업에 들어가면 색상 때문에 헤매는 시간이 크게 줄어듭니다.
