🎨
# 포함 또는 미포함 6자리
계산 공식
HEX: 각 2자리를 16진수 → 10진수 | RGB: 각 채널을 16진수로HEX의 각 2자리는 R, G, B에 대응하며, parseInt(hex, 16)과 .toString(16)으로 변환합니다.
HEX와 RGB — 두 색상 표기 체계
웹·앱 디자인에서 색상을 지정하는 핵심 두 가지 방식입니다. 브라우저는 두 형식을 동일하게 렌더링하며, 선택은 가독성과 작업 흐름에 따라 다릅니다.
변환 원리
HEX는 6자리 16진수(0~F)로 각 채널을 2자리씩 표현합니다. #FF6B35에서 FF=255, 6B=107, 35=53입니다. RGB의 각 채널(0~255)을 16진수로 변환하면 HEX가 됩니다.
HEX → RGB: 각 2자리를 16진수로 파싱 (parseInt("FF", 16) = 255) RGB → HEX: 각 값을 16진수 2자리로 변환 (255..toString(16) = "ff")
자주 쓰는 색상 HEX 코드
| 색상 | HEX | RGB | 사용 예 |
|---|---|---|---|
| 흰색 | #FFFFFF | 255, 255, 255 | 배경, 텍스트 |
| 검정 | #000000 | 0, 0, 0 | 텍스트, 아이콘 |
| 빨강 | #FF0000 | 255, 0, 0 | 경고, 에러 |
| 파랑 | #0000FF | 0, 0, 255 | 링크, 버튼 |
| 초록 | #008000 | 0, 128, 0 | 성공, 확인 |
| 회색 | #808080 | 128, 128, 128 | 보조 텍스트 |
| 노랑 | #FFFF00 | 255, 255, 0 | 강조, 경고 |
| 네이버 그린 | #03C75A | 3, 199, 90 | 브랜드 색상 예 |
| 카카오 옐로 | #FEE500 | 254, 229, 0 | 브랜드 색상 예 |
CSS에서의 색상 형식 비교
| 형식 | 예시 | 특징 |
|---|---|---|
| HEX 6자리 | #FF6B35 | 가장 보편적, 가독성 좋음 |
| HEX 3자리(축약) | #F63 | 각 자리가 반복될 때만 사용 가능 |
| RGB | rgb(255, 107, 53) | 직관적, 숫자 범위 명확 |
| RGBA | rgba(255, 107, 53, 0.8) | 투명도(알파) 지원 |
| HSL | hsl(18, 100%, 60%) | 색조·채도·명도, 디자인 직관적 |
16진수 변환 계산법
R=255, G=107, B=53을 HEX로 변환:
- 255 ÷ 16 = 15 나머지 15 → FF (F=15)
- 107 ÷ 16 = 6 나머지 11 → 6B (B=11)
- 53 ÷ 16 = 3 나머지 5 → 35
반대로 #FF6B35를 RGB로:
- FF = 15×16 + 15 = 255
- 6B = 6×16 + 11 = 107
- 35 = 3×16 + 5 = 53
자주 묻는 질문
#FFF와 #FFFFFF의 차이는 무엇인가요?
#FFF는 3자리 축약형으로 #FFFFFF와 동일합니다. 각 자리가 반복될 때만 사용 가능합니다(예: #F63 = #FF6633). 이 계산기는 6자리 형식을 사용합니다.
CSS에서 HEX와 RGB 중 어느 것을 써야 하나요?
둘 다 동일하게 사용 가능합니다. HEX가 더 짧아 일반적으로 많이 쓰이지만, 투명도를 조절할 때는 rgba(255, 107, 53, 0.8)처럼 RGBA를 사용해야 합니다. CSS4에서는 HEX 8자리(#FF6B3580)로도 투명도를 지정할 수 있습니다.
같은 색이지만 HEX 코드가 다른 경우가 있나요?
#FF0000과 #ff0000은 대소문자만 다를 뿐 완전히 같은 색상입니다. 브라우저는 대소문자를 구분하지 않습니다. 또한 #F00(3자리)도 동일한 빨강색입니다.
HEX 코드로 투명한 색상을 만들 수 있나요?
6자리 HEX(#RRGGBB)는 투명도를 지원하지 않습니다. 투명도가 필요하면 8자리 HEX(#RRGGBBAA)를 사용하거나, CSS에서 rgba()를 사용하세요. 예를 들어 #FF000080은 50% 투명한 빨강색입니다.