HEX 색상 코드 완벽 정리: #RRGGBB의 원리

HEX 색상 코드의 원리

화면의 모든 색은 빨강, 초록, 파랑 빛을 섞어 만듭니다. HEX 코드는 각 빛의 세기를 # 기호 뒤에 두 글자씩 씁니다. 빨강이 먼저, 그다음 초록, 마지막으로 파랑입니다. 이것이 #RRGGBB 패턴입니다.

각 글자는 16진수, 즉 16개의 숫자로 세는 방식입니다. 0부터 9까지 쓴 뒤 a(10), b(11), c(12), d(13), e(14), f(15)가 이어집니다. 한 쌍은 00(0)부터 ff(255)까지 256개의 값을 나타내며, 이는 rgb()의 범위와 정확히 같습니다.

한 쌍을 일반 숫자로 바꾸려면 첫 자리에 16을 곱하고 둘째 자리를 더하면 됩니다. 아래는 CSS 색 이름 dodgerblue인 #1e90ff를 네 가지 포맷으로 표시하고, 쌍별로 계산한 것입니다.

즉 #1e90ff는 rgb(30, 144, 255)입니다. 빨강은 조금, 초록은 꽤 많이, 파랑은 최대로 섞여 밝은 하늘색이 됩니다. 256개의 값을 가진 쌍이 세 개이므로 표현할 수 있는 색은 16,777,216가지입니다.

세 자리와 네 자리 HEX 축약형

모든 쌍의 두 자리가 같으면 각 쌍을 한 번만 써도 됩니다. #ffcc00은 #fc0이 되고, 브라우저가 각 자리를 다시 두 번씩 늘려 읽습니다. #1e90ff는 1e와 90이 같은 숫자의 쌍이 아니라서 축약형이 없습니다.

축약형으로는 1,670만 가지 색 가운데 4,096가지만 쓸 수 있습니다. 네 자리 형식은 같은 방식으로 불투명도를 더하므로 #f008은 #ff000088과 같습니다.

HEX 투명도: 알파가 있는 여덟 자리 HEX

여덟 자리 코드는 네 번째 쌍으로 알파, 즉 불투명도를 더합니다. 형식은 #RRGGBBAA입니다. 00은 완전히 투명하고 ff는 완전히 불투명합니다. 현재 모든 브라우저가 CSS에서 이 형식과 네 자리 #RGBA 축약형을 지원합니다.

쌍을 구하려면 불투명도에 255를 곱하고, 정수로 반올림한 뒤 16진수로 바꾸면 됩니다. 50%는 127.5이고, 반올림하면 128, 16진수로는 80입니다. 아래는 #1e90ff에 적용한 전체 변환표입니다.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

주의할 점이 두 가지 있습니다. 첫째, 80은 255 중 128로 정확히 50%가 아니라 50.2%입니다. HEX 알파는 256단계뿐이라 딱 떨어지는 퍼센트 대부분은 근삿값입니다. 둘째, Android는 알파를 맨 앞에 둡니다. Android 색상 리소스의 #801e90ff는 CSS의 #1e90ff80과 같습니다.

HEX 코드를 눈으로 읽는 방법

변환하지 않고도 색을 짐작할 수 있습니다. 각 쌍의 첫 자리를 보세요. 정보가 거의 다 거기에 담겨 있습니다.

• 첫 자리가 가장 큰 채널이 주된 빛입니다. #d2691e는 빨강이 d, 초록이 6, 파랑이 1이므로 주황빛 갈색입니다.
• 높은 채널 두 개는 섞입니다. 빨강과 초록은 노랑, 초록과 파랑은 시안, 빨강과 파랑은 마젠타나 보라가 됩니다.
• 세 쌍이 같으면 회색입니다. #333333은 어두운 회색, #999999는 밝은 회색입니다. #708090처럼 거의 같은 쌍이면 차분한 회색빛 색이 됩니다.
• 전체적으로 숫자가 높으면 밝은 색, 낮으면 어두운 색입니다. 세 쌍이 모두 c0 이상이면 연한 색, 모두 30 이하면 아주 어두운 색입니다.
• 같은 숫자라도 초록은 파랑보다 훨씬 밝아 보입니다. #00ff00의 OKLCH 명도는 0.866인데 #0000ff는 0.452에 불과합니다.

#808080이 중간 회색이 아닌 이유

#808080은 숫자로는 정확히 한가운데, 모든 채널이 255 중 128입니다. 하지만 검정과 흰색의 중간으로 보이지는 않습니다. OKLCH 명도가 0.600이라 흰색 쪽으로 60% 간 것처럼 보입니다.

HEX 값은 이미 sRGB 곡선으로 인코딩되어 있는데, 이 곡선은 눈의 감각을 대략 따르지만 정확히 같지는 않습니다. #808080이 내는 빛은 흰색의 약 21.6%이고, 지각 모델은 시각적 중간점을 더 어둡게 잡습니다. OKLCH 기준으로는 #636363, CIELAB 기준으로는 #777777입니다.

이 차이는 텍스트에서 중요합니다. 흰색 위의 회색 #808080은 3.95:1이라 본문 텍스트 기준인 WCAG AA를 통과하지 못합니다. 4.5:1을 통과하는 가장 밝은 회색은 #767676이고, 한 단계만 밝은 #777777은 4.48:1로 이미 미달입니다.

대문자와 소문자, # 기호는 붙여야 할까

HEX 코드는 대소문자를 구분하지 않습니다. #1E90FF, #1e90ff, #1E90ff는 CSS, SVG, 디자인 툴에서 모두 같은 색입니다. 한 가지 스타일을 정해 어디서나 똑같이 쓰면 코드를 검색할 때 모든 사용처를 찾을 수 있습니다. CSS에서는 소문자를 많이 씁니다.

# 기호는 CSS 문법의 일부일 뿐 색의 일부가 아닙니다. Figma를 비롯한 많은 디자인 툴은 # 없이 코드를 보여 주고, 프로그래밍 언어에서는 0x 접두사를 붙인 숫자로 쓰는 경우가 많습니다. 예를 들어 Flutter의 Color(0xFF1E90FF)는 알파 쌍으로 시작합니다.

화면에 보이는 색의 HEX 코드 찾는 방법

스포이트를 쓰세요. 커서 아래의 색을 읽어 코드를 보여 주는 도구입니다. 무료이고 대부분 이미 설치되어 있습니다.

• Chrome과 Edge: F12로 개발자 도구를 열고, Styles 패널에서 아무 색 사각형이나 클릭한 뒤 스포이트 아이콘으로 페이지에서 색을 추출합니다.
• PickShade: 홈페이지의 컬러 피커에는 Chrome과 Edge에서 화면 어디서든 색을 추출할 수 있는 스포이트 버튼이 있습니다.
• Windows: Microsoft PowerToys를 설치하고 Win + Shift + C를 누르면 Color Picker가 열립니다.
• macOS: 응용 프로그램의 유틸리티에서 Digital Color Meter를 엽니다. sRGB로 전환한 뒤 보기, 값 표시, 16진수를 차례로 선택합니다.
• Figma, Photoshop 등 대부분의 디자인 앱: I를 누르면 스포이트가 됩니다.
• 사진이나 스크린샷: 이미지 컬러 피커에서 열고 원하는 픽셀을 클릭합니다. 이미지는 기기 밖으로 나가지 않습니다.

화면은 색 프로필을 적용하고 이미지는 압축되기 때문에, 추출한 값이 원래 값과 몇 단위 다를 수 있습니다. 정확한 값이 필요하면 스크린샷이 아니라 디자인 파일이나 CSS에서 복사하세요.

자주 묻는 질문