웹 디자인이나 그래픽 작업을 하다 보면 색상을 정확하게 지정해야 하는 순간이 자주 찾아옵니다. 이때 가장 널리 쓰이는 표기법이 바로 HEX 코드인데, HEX 하는법을 제대로 익혀두면 디자인 도구나 코드 어디서든 동일한 색상을 재현할 수 있습니다. 이 글에서는 HEX 색상 코드의 구조와 입력 방법, 변환 요령까지 단계별로 정리해 드립니다.
HEX 색상 코드란 무엇인가
HEX는 16진수(Hexadecimal)의 줄임말로, 색상을 여섯 자리 숫자와 알파벳 조합으로 표현하는 방식입니다. 앞에 # 기호를 붙여 #RRGGBB 형태로 쓰며, 각각 빨강(R), 초록(G), 파랑(B)의 밝기를 00부터 FF까지의 값으로 나타냅니다. 예를 들어 순수한 검정은 #000000, 순수한 흰색은 #FFFFFF로 표기합니다.
HEX 코드는 CSS, HTML, 포토샵, 일러스트레이터, 피그마 등 거의 모든 디자인 환경에서 동일한 형식으로 사용되기 때문에 한 번 익혀두면 활용 범위가 매우 넓습니다. 특히 웹과 모바일 화면처럼 빛으로 색을 표현하는 환경에서는 사실상 표준 표기법이라 할 수 있습니다.
HEX 하는법 기본 5단계
처음 HEX 코드를 다루는 분들도 다음 순서를 따라 하면 어렵지 않게 색상을 지정할 수 있습니다.
- 입력할 환경(CSS 속성, 디자인 툴의 색상 피커 등)에서 색상 입력란을 찾습니다.
- # 기호와 함께 여섯 자리 코드를 입력합니다. 예시: #3498DB
- 앞 두 자리는 빨강, 가운데 두 자리는 초록, 마지막 두 자리는 파랑 채널을 의미합니다.
- 00에 가까울수록 해당 채널이 어두워지고 FF에 가까울수록 밝아진다는 점을 기억합니다.
- 적용 후 미리보기 화면으로 의도한 색상이 정확히 표현되는지 확인합니다.
축약형도 알아두면 편리합니다. #FFF처럼 세 자리만 입력하면 브라우저가 자동으로 #FFFFFF로 해석합니다. 단, 이 방식은 각 채널이 같은 두 글자로 반복될 때만 사용할 수 있다는 제약이 있습니다.
RGB와 HEX 변환 방법
RGB 값을 HEX로 변환하는 원리는 단순합니다. 각 채널의 10진수 값을 16진수로 바꿔 이어 붙이면 됩니다. 예컨대 RGB(52, 152, 219)를 16진수로 환산하면 34, 98, DB가 되고, 이를 합치면 #3498DB가 완성됩니다. 반대로 HEX에서 RGB로 바꿀 때는 두 자리씩 잘라 10진수로 환산하면 됩니다.
| 색상명 | RGB | HEX |
|---|---|---|
| 빨강 | 255, 0, 0 | #FF0000 |
| 초록 | 0, 255, 0 | #00FF00 |
| 파랑 | 0, 0, 255 | #0000FF |
| 회색 | 128, 128, 128 | #808080 |
| 주황 | 255, 165, 0 | #FFA500 |
수작업이 번거롭다면 온라인에서 제공되는 색상 변환기를 활용하면 RGB, HEX, HSL 등 다양한 형식을 즉시 바꿀 수 있습니다. 특히 작업 중 색상 코드를 여러 형식으로 옮겨야 할 때 시간을 크게 줄여 줍니다.
자주 쓰이는 HEX 코드 모음
실무에서 빈번하게 사용되는 색상 코드를 미리 알고 있으면 작업 속도가 빨라집니다. 아래는 웹과 앱 디자인에서 사랑받는 대표적인 HEX 값입니다.
- #FFFFFF: 순백색, 배경에 가장 많이 쓰이는 기본 색상
- #000000: 순흑색, 본문 글자와 강조 요소에 사용
- #F5F5F5: 연한 회색, 카드 배경이나 구분선으로 활용
- #3498DB: 부드러운 파랑, 링크와 버튼에 자주 등장
- #E74C3C: 강렬한 빨강, 경고 메시지나 삭제 버튼에 사용
- #2ECC71: 산뜻한 초록, 성공 알림이나 확인 버튼에 적합
- #F39C12: 따뜻한 주황, 알림과 강조 배지에 어울림
브랜드 색상을 정할 때는 단일 코드만 외우기보다 메인 컬러, 서브 컬러, 강조 컬러를 묶어 팔레트로 관리하는 편이 좋습니다. 이렇게 하면 화면 어디에서나 일관된 분위기를 유지할 수 있고, 새로운 페이지를 만들 때도 색상 선택에 들어가는 시간을 크게 줄일 수 있습니다.
HEX 코드 활용 시 주의사항
HEX 코드는 직관적이지만 몇 가지 한계도 있습니다. 알파(투명도) 값을 표현하려면 #RRGGBBAA 형식의 8자리 코드를 써야 하며, 일부 구형 브라우저나 도구는 8자리 표기를 지원하지 않을 수 있습니다. 이런 경우에는 rgba() 함수형 표기를 함께 준비해 두는 것이 안전합니다.
또한 동일한 HEX 코드라도 모니터의 색 보정 상태와 주변 조명에 따라 미세하게 다르게 인식될 수 있습니다. 클라이언트와 작업을 주고받을 때는 색상 코드뿐 아니라 사용 의도와 적용 위치까지 함께 공유하면 오해를 줄일 수 있습니다.
마지막으로 접근성을 고려해 글자 색과 배경 색의 대비 비율(WCAG 기준 4.5:1 이상)을 확인하는 습관을 들이는 것이 좋습니다. 아름다운 색상이라도 가독성이 떨어지면 사용자 경험이 나빠질 수 있으므로, 색상을 결정한 뒤에는 대비 검사 도구로 한 번 더 점검하는 단계를 추가해 보시기 바랍니다.