온라인 HEX 색상 코드는 웹 화면에 보이는 거의 모든 색을 여섯 자리 문자로 표현하는 방식입니다. CSS 파일을 열면 #1e3a5f 같은 값이 끝없이 등장하는데, 이 값이 어떤 규칙으로 만들어지는지 이해하면 색을 다루는 속도와 정확도가 크게 달라집니다.
HEX 코드를 읽는 기본 원리
HEX는 16진수를 뜻하는 hexadecimal의 줄임말입니다. #RRGGBB 형태로 빨강, 초록, 파랑 세 채널의 밝기를 각각 두 자리씩 표기합니다. 한 자리는 0부터 F까지 16단계를 쓰므로 두 자리면 256단계가 되고, 세 채널을 조합하면 약 1,678만 가지 색을 만들 수 있습니다.
- #000000 세 채널이 모두 0이므로 검정입니다
- #FFFFFF 세 채널이 모두 최대값이므로 흰색입니다
- #FF0000 빨강 채널만 최대값인 순수한 빨강입니다
- #808080 세 채널 값이 같으면 채도가 없는 회색 계열이 됩니다
세 자리로 줄인 축약형도 있습니다. #F0C는 각 자리를 두 번 반복한 #FF00CC와 완전히 같은 색입니다. 여덟 자리 형태인 #RRGGBBAA는 마지막 두 자리로 투명도를 표현하며, 현재 주요 브라우저에서 모두 지원합니다. 예를 들어 #1e3a5f80은 절반가량 투명한 남색이 됩니다.
온라인 HEX 변환으로 처리하는 5가지 작업
실무에서 색상 값을 다룰 때 반복적으로 필요한 작업은 대체로 아래 다섯 가지로 정리됩니다.
- HEX에서 RGB로 변환: 안드로이드, iOS, 일부 그래픽 라이브러리는 RGB 정수값을 요구합니다. #1E3A5F는 rgb(30, 58, 95)로 바뀝니다. 앞 두 자리 1E를 10진수로 계산하면 1×16+14=30이 되는 방식입니다.
- HEX에서 HSL로 변환: 색조, 채도, 명도로 나뉘는 HSL은 같은 색의 밝기만 조절할 때 유용합니다. 버튼의 hover 상태를 만들 때 명도만 10퍼센트 낮추는 식으로 활용합니다.
- 이미지에서 색상 추출: 로고나 참고 이미지에서 특정 픽셀의 색을 뽑아내 HEX 값으로 받아옵니다. 브랜드 가이드 문서가 없을 때 원본 색을 복원하는 가장 빠른 방법입니다.
- 명도 단계 팔레트 생성: 기준 색 하나에서 50부터 900까지 단계별 색상을 자동 생성합니다. 디자인 시스템의 색상 토큰을 만들 때 필수적인 작업입니다.
- 대비율 검사: 배경색과 글자색의 명도 대비를 수치로 확인해 가독성 기준을 충족하는지 판단합니다.
이 계산을 매번 손으로 하기는 번거롭기 때문에, 값을 붙여넣으면 여러 표기법을 동시에 보여주는 색상 변환기를 곁에 두고 작업하면 시간을 크게 줄일 수 있습니다. 특히 팔레트 단계를 만들 때는 수동 계산으로 일관성을 유지하기가 어렵습니다.
HEX와 RGB, HSL 표기법 비교
세 가지 표기법은 표현하는 색의 범위가 같습니다. 차이는 사람이 읽고 수정하기 얼마나 편한가에 있습니다.
| 구분 | HEX | RGB | HSL |
|---|---|---|---|
| 표기 예시 | #1E3A5F | rgb(30, 58, 95) | hsl(212, 52%, 25%) |
| 길이 | 가장 짧음 | 중간 | 가장 김 |
| 투명도 | 8자리로 가능 | rgba로 가능 | hsla로 가능 |
| 밝기 조절 | 어려움 | 어려움 | 매우 쉬움 |
| 주 사용처 | CSS, 디자인 툴 | 앱, 캔버스 API | 테마, 다크모드 |
색상 대비율과 접근성 기준
색을 고를 때 보기 좋은 조합인지만 따지면 실제 사용자 중 일부는 글자를 읽지 못할 수 있습니다. 웹 콘텐츠 접근성 지침은 배경과 전경의 명도 대비를 수치로 규정합니다.
- 일반 텍스트: 4.5대 1 이상
- 큰 텍스트: 18pt 이상 또는 굵은 14pt 이상이면 3대 1 이상
- 아이콘과 UI 요소 경계: 3대 1 이상
- 강화 기준: 일반 텍스트 7대 1 이상
예를 들어 흰색 배경 #FFFFFF에 연회색 글자 #AAAAAA를 쓰면 대비율이 약 2.3대 1로 기준에 크게 못 미칩니다. 같은 계열에서 #767676 정도까지 어둡게 내려야 4.5대 1을 넘깁니다.
작업 중 자주 발생하는 실수
색상 값 자체는 단순하지만, 실제 프로젝트에서는 아래와 같은 문제가 반복해서 나타납니다.
- 샵 기호 누락: CSS에서 #을 빼먹으면 값이 무시되고 상속된 색이 그대로 적용됩니다. 오류 메시지가 뜨지 않아 원인을 찾기 어렵습니다.
- 유효하지 않은 문자: G부터 Z까지는 16진수에 존재하지 않습니다. #1G3A5F 같은 값은 무효 처리됩니다.
- 자릿수 오류: 3, 4, 6, 8자리만 유효합니다. 다섯 자리나 일곱 자리는 브라우저가 해석하지 못합니다.
- 인쇄물 색상과 혼동: HEX는 화면용 RGB 기반이라 인쇄용 CMYK로 그대로 옮기면 색이 달라집니다. 특히 형광 계열과 진한 파랑에서 차이가 두드러집니다.
색상 값을 관리할 때는 코드 곳곳에 HEX를 직접 적는 대신 CSS 변수로 한 곳에 모아두는 방식을 권합니다. --color-primary 같은 이름으로 정의해두면 브랜드 색이 바뀌었을 때 한 줄만 수정하면 되고, 다크모드 전환도 변수 재정의만으로 처리할 수 있습니다.