HEX 총정리를 찾아오신 분들을 위해 웹 색상 코드의 기본 원리부터 실무 활용법까지 한 번에 정리했습니다. HEX는 웹 개발과 디자인에서 가장 널리 사용되는 색상 표기법이며, 원리를 제대로 이해하면 색상 작업 속도가 크게 빨라집니다.
HEX 색상 코드란 무엇인가
HEX는 Hexadecimal(16진수)의 약자로, 색상을 6자리 16진수로 표현하는 방식입니다. 앞에 # 기호를 붙이고 그 뒤에 0~9와 A~F로 구성된 6자리 문자가 오는 형태입니다. 예를 들어 #FF5733처럼 표기하며, 이는 빨간색 계열의 주황빛을 나타냅니다.
6자리 문자는 2자리씩 세 그룹으로 나뉘어 각각 빨강(Red), 초록(Green), 파랑(Blue)의 강도를 의미합니다. 각 그룹은 00부터 FF까지 표현 가능하며, 이는 10진수 기준 0부터 255까지와 동일합니다. 즉 HEX는 RGB를 16진수로 압축해서 적은 글자로 표현한 형태라고 이해하면 됩니다.
#ff5733과 #FF5733은 완전히 같은 색상을 나타내며, 브라우저에서도 동일하게 렌더링됩니다.HEX 코드의 구조와 작동 원리
HEX 코드를 제대로 읽으려면 각 자리가 어떤 의미를 갖는지 이해해야 합니다. #RRGGBB 구조에서 각 두 자리는 해당 색상 채널의 밝기를 의미합니다. 값이 클수록 해당 색이 강해지고, 00이면 완전히 없는 상태, FF는 최대 강도를 뜻합니다.
- #000000: 모든 채널이 0이므로 검은색
- #FFFFFF: 모든 채널이 최대치이므로 흰색
- #FF0000: 빨강만 최대, 순수 빨간색
- #00FF00: 초록만 최대, 순수 초록색
- #0000FF: 파랑만 최대, 순수 파란색
16진수에서 한 자리는 0부터 15까지를 표현하는데, 10 이상은 A(10), B(11), C(12), D(13), E(14), F(15)로 나타냅니다. 따라서 두 자리 HEX 값은 첫째자리 × 16 + 둘째자리 공식으로 10진수로 환산할 수 있습니다. 예를 들어 FF는 15 × 16 + 15 = 255가 됩니다.
CSS에서는 3자리 단축 표기도 지원합니다. #F53은 #FF5533과 동일하며, 각 자리가 두 번 반복된 형태로 해석됩니다. 다만 단축 표기는 각 채널이 같은 자리 두 번으로 구성된 색상만 표현 가능하다는 제한이 있습니다.
HEX와 RGB, HSL 변환 방법
HEX는 RGB와 본질적으로 같은 정보를 다르게 표현한 것입니다. 두 형식 간 변환은 단순한 진수 변환 작업이며, 디자인 툴이나 개발 환경에서 자주 필요합니다. 수작업으로 수백 개 색상을 변환하기는 번거로우므로, 이런 작업을 자동화하려면 색상 변환기를 활용하면 편리합니다.
| 색상명 | HEX | RGB | HSL |
|---|---|---|---|
| 빨강 | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| 초록 | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| 파랑 | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| 주황 | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| 회색 | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
HEX를 RGB로 변환하려면 각 두 자리 쌍을 10진수로 환산하면 됩니다. 반대로 RGB를 HEX로 바꾸려면 각 값을 16진수로 변환한 뒤 이어 붙이면 됩니다. HSL은 Hue(색조), Saturation(채도), Lightness(명도)를 기반으로 하므로 직관적으로 색을 조정하기에 유리하지만, HEX에서 직접 변환하려면 공식이 조금 복잡합니다.
HEX 알파 채널과 8자리 표기
CSS Color Module Level 4부터는 HEX에 투명도를 추가한 8자리 표기가 표준이 되었습니다. #RRGGBBAA 형태로, 마지막 두 자리가 알파(투명도) 값을 의미합니다. 00은 완전 투명, FF는 완전 불투명입니다.
#FF5733FF: 기존#FF5733과 동일, 완전 불투명#FF573380: 약 50% 투명도#FF573300: 완전 투명, 화면에 보이지 않음
자주 쓰는 알파 값으로는 1A(10%), 33(20%), 4D(30%), 80(50%), B3(70%), CC(80%)가 있습니다. 이 값들은 퍼센트 × 2.55를 16진수로 변환한 결과이며, 외워두면 rgba를 쓰지 않고도 투명도를 쉽게 조절할 수 있습니다.
rgba() 함수를 사용하거나 6자리 HEX와 opacity 속성을 조합하는 편이 안전합니다.실무에서 HEX 활용 팁
디자인 시스템을 구축할 때는 HEX 값을 무작위로 쓰지 않고 팔레트로 체계화하는 것이 중요합니다. 주 색상(primary), 보조 색상(secondary), 경고(warning), 성공(success), 오류(error) 같은 의미 단위로 HEX를 지정하고, 각 색상의 밝기 단계(예: 50, 100, 200, ..., 900)를 미리 정의해두면 일관된 UI를 만들 수 있습니다.
접근성 측면에서는 WCAG 대비 기준을 항상 확인해야 합니다. 본문 텍스트와 배경의 명도 대비는 최소 4.5:1 이상이어야 하며, 큰 글자(18pt 이상)는 3:1 이상이면 허용됩니다. HEX 값만 보고 대비를 판단하기 어려우므로 대비 검사 도구를 병행해서 쓰는 것이 좋습니다.
또한 브랜드 색상을 HEX로 관리할 때는 인쇄용 CMYK나 팬톤(Pantone) 값과 함께 기록해두는 것이 좋습니다. 모니터에서 보이는 HEX 색상과 실제 인쇄물 색이 다를 수 있으므로, 매체별 기준 색상을 문서화해두면 협업 과정에서 혼란을 줄일 수 있습니다. CSS 커스텀 속성(--color-primary)을 활용해 HEX를 변수화하면 테마 전환이나 다크 모드 구현도 훨씬 수월해집니다.