CSS 색상 표기 · sRGB · 투명도
HEX 색상 코드 작동 원리
6자 값을 빨강·초록·파랑 쌍으로 읽고, 3자 단축 표기와 8자 알파를 이해한 뒤, 표기법을 실제 화면이나 접근성 판정과 혼동하지 않고 사용하는 방법을 알아봅니다.
HEX 색상 코드
HEX 색상 코드는 무엇을 뜻할까요?
HEX 색상 코드는 sRGB 채널을 압축해서 적는 명령입니다. #RRGGBB에서 RR은 빨강, GG는 초록, BB는 파랑을 정하며 각 쌍은 00부터 FF, 십진수 0부터 255까지입니다. CSS는 #RGB 단축형, 투명도가 붙는 #RGBA, 완전한 알파 쌍을 쓰는 #RRGGBBAA도 허용합니다. HEX 색상 코드는 숫자 채널을 설명할 뿐, 보편적인 페인트 이름이나 보정된 화면의 외관, 자동 접근성 통과를 보장하지 않습니다. 값을 정확히 해독하고 보존한 다음 실제 배경과 사용 상태에서 확인해야 합니다.
기억할 네 가지 핵심 규칙
- HEX 색상 코드: 6자는 sRGB 공간에서 빨강·초록·파랑을 두 자리씩 기록합니다
- HEX 색상 코드: 3자는 각 문자를 복제해 확장하므로 #3A7은 정확히 #33AA77입니다
- HEX 색상 코드: 4자와 8자 형식은 알파를 마지막에 두며 00은 완전 투명, FF는 완전 불투명입니다
- HEX 색상 코드: 같은 값도 화면, 배경, 주변 색에 따라 다르게 보이므로 표기는 판단의 한 부분입니다
CSS의 네 가지 HEX 형식 비교
CSS Color Module Level 4는 네 가지 유효한 길이를 정의합니다. 채널 순서, 정밀도, 투명도를 구분하면 비슷한 HEX 색상 코드를 서로 바꿔 써도 되는 문자열로 오해하지 않게 됩니다.
| 형식 | 채널 순서 | 예 | 동일한 값 | 표현 가능한 상태 |
|---|---|---|---|---|
| #RGB · HEX 색상 코드 | 빨강, 초록, 파랑 | #3A7 | #33AA77 | 4,096색 |
| #RGBA · HEX 색상 코드 | 빨강, 초록, 파랑, 알파 | #3A7C | #33AA77CC | 4,096색 × 알파 16단계 |
| #RRGGBB · HEX 색상 코드 | 빨강, 초록, 파랑 | #33AA77 | rgb(51 170 119) | 16,777,216색 |
| #RRGGBBAA · HEX 색상 코드 | 빨강, 초록, 파랑, 알파 | #33AA77CC | rgb(51 170 119 / 80%) | 16,777,216색 × 알파 256단계 |
HEX 색상 코드: 각 채널을 16진수로 읽기
16진수는 0부터 9까지와 십진수 10부터 15를 나타내는 A부터 F까지, 총 16개 기호를 씁니다. 두 기호는 16×16, 즉 256개 상태를 기록합니다. 6자리 HEX 색상 코드에서 첫 쌍은 빨강, 둘째는 초록, 셋째는 파랑입니다. 00은 최솟값이고 FF는 십진수 255인 최댓값입니다. #2468AC라면 빨강은 0x24 또는 36, 초록은 0x68 또는 104, 파랑은 0xAC 또는 172입니다. rgb(36 104 172)는 동일한 sRGB 좌표를 다른 문법으로 쓴 것입니다.
모든 쌍을 암산하지 않아도 HEX 색상 코드를 잘 사용할 수 있습니다. 00에 가까우면 해당 채널이 약하고 FF에 가까우면 강합니다. #777777처럼 세 쌍이 같으면 빨강·초록·파랑이 같아 중립 회색이 됩니다. 하지만 코드, 디자인 토큰, 대비 계산, 전달 문서에서는 정확한 변환이 중요합니다. 해시와 여섯 문자를 모두 복사하고 프로젝트 규칙에 맞춰 대소문자를 통일하며, 색상 이름을 추측하는 대신 도구에서 RGB 숫자를 확인하세요. 이 과정은 한 글자가 바뀌어 다른 색이 되는 실수를 줄입니다.
HEX 색상 코드: 값을 줄이기 전에 단축 조건 이해하기
3자리 HEX 색상 코드는 6자리 중 일부를 임의로 뺀 값이 아닙니다. 각 문자를 두 번 복제해 확장합니다. #F09는 #FF0099, #ABC는 #AABBCC, #123은 #112233입니다. 여섯 자리의 각 채널 쌍이 같은 문자 두 개로 이루어져야만 단축할 수 있습니다. #33AA77은 #3A7이 되지만 #32AA77의 32는 한 문자를 복제해 만들 수 없습니다. 그래서 정밀도가 다릅니다. 3자 형식은 채널당 16개, 모두 16³인 4,096색이고, 6자리 HEX 색상 코드는 채널당 256개, 256³인 16,777,216색입니다.
HEX 색상 코드: 알파는 파랑 뒤에 배치하기
8자리 HEX 색상 코드는 #RRGGBBAA 순서입니다. 마지막 AA가 알파이며 00은 완전 투명, FF는 완전 불투명, 중간 값은 부분 불투명도입니다. 예를 들어 #0000FFCC는 파랑에 CC 알파를 넣은 값이고 W3C 예제에서는 80% 불투명도와 같습니다. 네 자리 #RGBA는 세 자리와 동일하게 복제되므로 #05AC는 #0055AACC로 확장됩니다. 일부 그래픽 시스템과 오래된 API는 패킹한 정수를 다른 바이트 순서로 표시할 수 있지만, 현대 CSS에서 쓰는 HEX 색상 코드는 알파를 마지막에 둡니다.
HEX 색상 코드: HEX가 보존하는 정보와 한계 구분하기
CSS의 HEX 색상 코드는 sRGB를 직접 지정합니다. 짧고 널리 통하지만 넓은 색역의 Display P3, 장치 독립 Lab 값, 인쇄 CMYK 배합, 측정한 재료의 반사 특성을 기록하지는 않습니다. 넓은 색역 소스를 6자리 HEX 색상 코드로 바꾸면 sRGB 안으로 색역 매핑되거나 잘릴 수 있습니다. 스크린샷, 브라우저 피커, 디자인 파일이 다르게 보이면 프로필, 디스플레이 성능, 내보내기 처리도 확인해야 합니다. 중요한 원본은 색 공간과 함께 보존하고, sRGB가 실제 전달 대상일 때 HEX를 사용하세요.
신뢰할 수 있는 HEX 전달 체크리스트
CSS, 팔레트, 디자인 토큰에 넣기 전에 표기와 사용 조건을 함께 확인하세요.
- HEX 색상 코드: 해시 뒤에 정확히 3·4·6·8개의 16진수 문자만 있는지 확인합니다
- HEX 색상 코드: 정밀 검토에서는 단축형을 확장해 모든 채널을 보이게 합니다
- HEX 색상 코드: 알파 쌍이 의도적인지 기록하고 평가에 사용한 배경을 특정합니다
- HEX 색상 코드: 값을 보편적 측정값으로 말하지 말고 가정한 색 공간을 sRGB로 보존합니다
- HEX 색상 코드: 대비, 이름, 실제 외관을 각각의 목적에 맞는 별도 도구로 검사합니다
하나의 HEX 값을 세 단계로 사용하기
짧은 흐름으로 복사한 코드의 추적성을 유지하면서 해독, 설명, 검증을 분리할 수 있습니다.
HEX 색상 코드: 1. 해독하고 표기 정리
HEX 색상 코드: 전체 값을 붙여 넣고 유효 길이를 확인한 뒤 필요하면 단축형을 확장하고 알파를 유지합니다. 채널을 수정하기 전에 RGB 숫자가 의도한 값인지 확인합니다.
HEX 색상 코드: 2. 이름 찾기 또는 이미지 채집
HEX 색상 코드: 읽기 쉬운 설명이 필요하면 Color Name Finder를, 출처가 로컬 이미지 픽셀이면 Image Color Picker를 사용합니다. 이름은 가까운 설명이지 공식 고유 이름이 아닙니다.
HEX 색상 코드: 3. 실제 조합 검사
HEX 색상 코드: 전경을 예정된 배경 위에 놓고 투명도를 반영해 대비를 계산합니다. 두 값, 사용 상태, 판단 근거를 디자인 토큰이나 구현 메모에 함께 저장합니다.
공식 출처가 확인해 주는 내용
2026년 7월 31일 기준으로 공개된 규격과 문서를 확인했습니다. 아래 숫자는 문법과 검사 기준이며 검색 순위나 동일한 외관을 약속하지 않습니다.
- HEX 색상 코드: CSS Color Module Level 4는 3·4·6·8자리 문법과 채널 순서를 정의하고, 3자 형식 4,096색과 6자 형식 약 1,700만 색을 설명합니다. W3C HEX 표기 절 읽기
- HEX 색상 코드: MDN은 네 문법, 0부터 FF 범위, 문자 복제, 대소문자 무관, 완전 투명부터 완전 불투명까지의 알파 끝점을 문서화합니다. MDN <hex-color> 참고 문서 읽기
- HEX 색상 코드: WCAG 2.2 해설은 일반 텍스트 4.5:1, 큰 텍스트 3:1 같은 대비 요구를 설명하며, 고립된 색 하나로는 어느 비율도 만들 수 없습니다. WCAG 대비 지침 읽기
“The number of hex digits given determines how to decode the hex notation into an RGB color.”
HEX 색상 코드 자주 묻는 질문
HEX와 RGB는 서로 다른 색인가요?
HEX 색상 코드: 좌표와 색 공간이 같으면 다르지 않습니다. 6자리 HEX 색상 코드와 rgb()는 동일한 sRGB 채널을 표현할 수 있어 #33AA77은 rgb(51 170 119)와 같습니다. 달라지는 것은 표기입니다. 다만 최신 CSS 함수는 다른 색 공간도 표현하므로 모든 RGB 형태에 직접적인 6자리 값이 있다고 가정하면 안 됩니다.
#RGBA에서 투명도는 앞인가요, 뒤인가요?
HEX 색상 코드: 뒤입니다. CSS의 4자리와 8자리 HEX 색상 코드는 #RGBA와 #RRGGBBAA를 사용하므로 A는 파랑 다음입니다. #3A7C는 #33AA77CC로 확장됩니다. CSS가 아닌 API는 다른 바이트 순서를 보일 수 있으므로 값을 스타일시트에 붙이기 전에 출처와 순서를 점검하세요.
같은 HEX가 다르게 보이는 이유는 무엇인가요?
HEX 색상 코드: 동일한 HEX 색상 코드라도 주변 색, 합성 배경, 디스플레이 프로필과 색역, 관찰 조건이 다르면 다르게 보일 수 있습니다. 코드는 sRGB 좌표와 선택적 알파를 고정할 뿐 전체 표시 시스템은 고정하지 않습니다. 실제 인터페이스 안에서 비교하고 배경과 상태를 함께 기록하세요.
HEX 값 하나가 WCAG 대비를 증명하나요?
HEX 색상 코드: 아닙니다. 최소한 전경과 배경, 투명도 합성, 사용 상태가 필요합니다. HEX 색상 코드는 입력을 제공하지만 결과는 상대 휘도를 비교해 얻습니다. 해당하는 경우 기본, 호버, 비활성, 포커스 상태의 실제 쌍을 모두 검사하세요.