HEX 색상 코드 표기법 완벽 가이드 - 6자리 구조부터 3자리 축약, 8자리 알파값까지 한번에 정리
FF0000이 왜 빨간색인지 아직 헷갈리시나요? HEX 색상 코드의 16진수 구조와 RGB 변환 원리, 3자리 축약 규칙, 투명도를 표현하는 8자리 표기법까지 실무에 바로 쓸 수 있게 정리했습니다.
웹사이트 배경색을 바꾸거나 디자인 툴에서 색을 지정할 때 #3498DB 같은 코드를 마주치게 됩니다. 어떤 규칙으로 만들어진 값인지 모르면 매번 색상 선택기에 의존할 수밖에 없습니다. HEX 색상 코드 표기법은 사실 10분이면 원리를 이해할 수 있을 만큼 단순한 규칙입니다. 구조만 알면 코드를 보고 대략 어떤 색인지 짐작하는 것도 가능해집니다.
HEX 색상 코드란 - 16진수로 색을 표현하는 약속
HEX는 Hexadecimal, 즉 16진수의 줄임말입니다. 일상에서 쓰는 10진수는 0부터 9까지 10개의 숫자를 사용하지만, 16진수는 0부터 9에 A, B, C, D, E, F를 더해 총 16개의 문자로 수를 표현합니다. A는 10, F는 15에 해당합니다.
화면의 색상 하나는 빨강(R), 초록(G), 파랑(B) 세 가지 빛의 조합으로 만들어집니다. 각 색은 0부터 255까지 256단계의 밝기를 가지는데, 이 값을 16진수로 바꾸면 정확히 두 자리로 표현됩니다. 255는 FF, 0은 00이 되는 식입니다. 세 가지 색을 두 자리씩 이어 붙이면 여섯 자리가 되고, 앞에 색상 코드임을 알리는 #을 붙인 것이 바로 HEX 색상 코드입니다.
256 x 256 x 256, 즉 16,777,216가지 색을 단 7글자로 표현할 수 있다는 점이 HEX 색상 코드 표기법이 웹 표준으로 자리 잡은 이유입니다.
6자리 코드 읽는 법 - RR GG BB 구조
#FF6B00이라는 코드를 예로 들어보겠습니다. #을 제외한 여섯 자리를 두 글자씩 끊어 읽으면 됩니다.
- FF: 빨강이 255, 최대치로 켜져 있음
- 6B: 초록이 107, 절반 조금 아래
- 00: 파랑이 0, 완전히 꺼져 있음
빨강이 최대이고 초록이 중간쯤이니 주황 계열이라는 것을 코드만 보고도 짐작할 수 있습니다. 자주 쓰는 기본 색상을 표로 정리하면 다음과 같습니다.
| 색상 | HEX 코드 | RGB 값 |
|---|---|---|
| 빨강 | #FF0000 | rgb(255, 0, 0) |
| 초록 | #00FF00 | rgb(0, 255, 0) |
| 파랑 | #0000FF | rgb(0, 0, 255) |
| 흰색 | #FFFFFF | rgb(255, 255, 255) |
| 검정 | #000000 | rgb(0, 0, 0) |
| 회색 | #808080 | rgb(128, 128, 128) |
여기서 규칙 하나를 발견할 수 있습니다. 세 쌍의 값이 모두 같으면 무채색입니다. #333333은 어두운 회색, #EEEEEE는 밝은 회색이 되는 이유입니다.
3자리 축약형과 8자리 알파 표기법
HEX 표기법에는 여섯 자리 외에 두 가지 변형이 있습니다.
3자리 축약형
여섯 자리 중 각 쌍의 두 글자가 서로 같으면 한 글자로 줄일 수 있습니다. #FF0000은 #F00으로, #FFFFFF는 #FFF로 축약됩니다. 브라우저는 각 글자를 두 번 반복해서 해석하므로 #F00을 만나면 #FF0000으로 읽습니다. #F80을 #F80000으로 오해하기 쉬운데, 실제로는 #FF8800으로 확장된다는 점을 기억해야 합니다.
8자리 알파 표기법
여섯 자리 뒤에 두 자리를 더 붙이면 투명도(알파)를 표현할 수 있습니다. CSS Color Module Level 4에서 도입된 방식으로, 현재 주요 브라우저 모두에서 지원됩니다.
- #FF000080: 약 50% 투명도의 빨강 (80은 10진수 128, 255의 약 50.2%)
- #FF0000FF: 완전 불투명한 빨강 (#FF0000과 동일)
- #FF000000: 완전 투명 (색은 빨강이지만 보이지 않음)
HEX 코드는 새로운 색 체계가 아니라 RGB 값을 16진수로 압축한 표기법일 뿐입니다. 이 사실 하나만 이해하면 3자리 축약, 8자리 알파, RGB 변환이 전부 같은 원리로 풀립니다.
RGB 값과 HEX 상호 변환하는 방법
변환 원리는 간단한 나눗셈입니다. 10진수를 16으로 나눈 몫이 첫째 자리, 나머지가 둘째 자리가 됩니다.
예를 들어 RGB 값 52를 변환해 보겠습니다. 52를 16으로 나누면 몫이 3, 나머지가 4이므로 16진수로는 34가 됩니다. 반대로 HEX의 C8을 10진수로 바꾸려면 첫째 자리 C(12)에 16을 곱하고 둘째 자리 8을 더해 200이 됩니다.
물론 실무에서 매번 손으로 계산하지는 않습니다. 크롬 개발자 도구의 색상 선택기를 열면 HEX, RGB, HSL 값이 자동으로 변환되어 표시되고, 포토샵이나 피그마 같은 디자인 툴도 두 값을 동시에 보여줍니다. 개발 작업을 하다 보면 색상뿐 아니라 길이나 용량 같은 값을 오갈 일도 많은데, 이럴 때는 단위 변환기를 띄워두면 계산 실수를 줄일 수 있습니다.
실무 활용 팁과 자주 하는 실수
HEX 코드를 다룰 때 실무에서 자주 마주치는 상황을 정리했습니다.
- 브랜드 컬러는 문서화: 메인 컬러와 서브 컬러의 HEX 값을 스타일 가이드에 기록해 두면 페이지마다 색이 미묘하게 달라지는 사고를 막을 수 있습니다.
- 명도 대비 확인: 배경색과 글자색의 대비가 낮으면 가독성이 떨어집니다. WCAG 기준으로 본문 텍스트는 4.5:1 이상의 대비를 권장합니다.
- 디스플레이별 색감 차이 인지: 같은 HEX 값이라도 모니터 패널 종류와 밝기 설정에 따라 다르게 보일 수 있습니다.
또한 반응형 웹 작업에서는 색상 코드와 함께 뷰포트 크기를 확인하는 일이 잦습니다. 지금 보고 있는 기기의 해상도와 브라우저 크기는 화면 크기 확인 페이지에서 바로 볼 수 있으니 미디어 쿼리 분기점을 잡을 때 참고하기 좋습니다.
오늘 정리한 내용을 바로 써보고 싶다면 두 가지부터 시작해 보세요. 지금 작업 중인 프로젝트의 주요 색상 HEX 값을 표로 정리해 나만의 스타일 가이드를 만들고, 크롬 개발자 도구에서 아무 웹사이트나 열어 색상 코드를 직접 읽어보는 것입니다. 코드를 보고 색이 떠오르기 시작하면 디자인 작업 속도가 눈에 띄게 빨라집니다.
