HEX 색상 코드는 어떻게 읽나요?
HEX 코드는 빨강(R), 초록(G), 파랑(B) 빛의 세기를 두 자리씩 16진수로 적은 거예요. 각 두 자리는 00(없음)부터 FF(가장 셈, 255)까지라, #FF0000은 빨강만 가장 세게 켠 색이고 #FFFFFF는 셋 다 가장 세게 켠 흰색이에요.
여섯 자리는 두 자리씩 세 덩어리
화면의 색은 빨강, 초록, 파랑 세 가지 빛을 섞어서 만들어요. HEX 코드는 그 세 빛을 각각 얼마나 세게 켤지를 두 자리씩 적은 거예요. 앞 두 자리가 빨강, 가운데가 초록, 끝 두 자리가 파랑이에요.
16진수 두 자리 읽는 법
HEX는 16진수(hexadecimal)의 줄임말이에요. 0부터 9까지 쓴 다음 A(10), B(11), C(12), D(13), E(14), F(15)로 이어 세요. 두 자리 수는 앞자리 × 16 + 뒷자리로 읽어요.
- F4 = 15 × 16 + 4 = 244
- A5 = 10 × 16 + 5 = 165
- 82 = 8 × 16 + 2 = 130
가장 작은 값은 00(0), 가장 큰 값은 FF(255)예요. 그래서 한 가지 빛의 세기는 256단계가 있고, 세 빛을 섞으면 약 1,677만 가지 색을 나타낼 수 있어요.
숫자만 보고 색 짐작하기
- 세 값이 모두 같으면 회색이에요. 검정 #000000 중간 회색 #808080 하양 #FFFFFF
- 한 값만 크면 그 빛의 색이에요. #FF0000 #00FF00 #0000FF
- 값이 전체적으로 크면 밝은 색, 작으면 어두운 색이에요.
- 가장 큰 값이 색의 방향을 정해요. #F4A582는 빨강(F4)이 가장 크고 초록이 그다음이라, 붉은 기가 도는 밝은 주황 분홍이에요.
3자리, 8자리 코드
3자리 코드는 각 자리를 두 번 쓴 6자리 코드의 줄임이에요. #FA8은 #FFAA88과 같아요. 모든 색을 3자리로 줄일 수 있는 건 아니고, 두 자리가 같은 글자로 이루어진 색만 줄일 수 있어요.
8자리 코드는 끝에 투명도 두 자리를 더한 거예요. #F4A58280에서 80은 128/255, 곧 약 50% 불투명하다는 뜻이에요. 4자리 코드(#FA88)는 8자리 코드의 줄임이에요.
대문자와 소문자는 구별하지 않아요. #F4A582와 #f4a582는 같은 색이에요.
같은 코드도 화면마다 조금 달라 보여요
HEX 코드는 보통 웹의 표준 색 공간(sRGB)을 기준으로 해요. 하지만 모니터의 밝기, 색 설정, 휴대폰의 야간 모드에 따라 같은 코드도 조금씩 다르게 보여요. 인쇄물은 잉크로 색을 만들기 때문에 차이가 더 커요. 중요한 색은 실제 화면이나 인쇄 견본으로 한 번 확인하세요.
HEX 코드를 우리말 이름으로
숫자만으로는 색을 떠올리기 어렵죠. 컬러바다에 HEX 코드를 넣으면 가장 가까운 한국어 색이름을 알려 드려요. 예를 들어 #F4A582에 가장 가까운 이름은 새먼핑크예요 (가까운 색, ΔE 4.0) #F4A582 결과 보기
자주 묻는 질문
- HEX와 RGB는 다른 색인가요?
- 같은 색을 다르게 적은 거예요. #F4A582와 rgb(244, 165, 130)은 똑같은 색이에요.
- 대문자와 소문자를 구별하나요?
- 구별하지 않아요. #F4A582와 #f4a582는 같은 색이에요.
- #FA8 같은 3자리 코드는 무엇인가요?
- 각 자리를 두 번 쓴 6자리 코드의 줄임이에요. #FA8은 #FFAA88과 같아요.