16진수 색상 코드 이해: 전체 가이드

CSS 파일, 디자인 도구 또는 브랜드 스타일 가이드를 본 적이 있다면 16진수 색상 코드, 즉 화면에 표시할 수 있는 모든 색상을 어떻게든 인코딩하는 #3B82F6 또는 #FF5733와 같은 6자 문자열을 본 적이 있을 것입니다. 문자와 숫자의 무작위 순서처럼 보이지만 그 뒤에는 정확한 시스템이 있습니다. 일단 이해하면 모든 16진수 코드를 한 눈에 읽을 수 있습니다.

이 가이드는 16진수 코드의 기본 구조부터 단축 표기법, 알파 투명성 및 실용적인 변환 기술까지 모든 것을 다룹니다.

"16진수"는 무엇을 의미하나요?

"16진수"라는 단어는 16진수의 약어입니다. 이는 우리가 일상 생활에서 사용하는 10진수 대신 16진수를 사용하는 숫자 체계입니다. 10진법에서는 숫자가 0부터 9까지 이어집니다. 16진법에서는 숫자가 0부터 9까지 이어지며 문자 A부터 F까지 이어져 숫자당 16개의 가능한 값을 제공합니다.

16진수	십진수
0	0
9	9
A	10
B	11
C	12
D	13
E	14
F	15
10	16
FF	255

왜 16진수인가요? 컴퓨터 메모리에 깔끔하게 매핑되기 때문입니다. 단일 바이트 데이터(8개의 이진 비트)는 0부터 255까지의 값을 보유할 수 있습니다. 16진수에서는 동일한 범위가 정확히 두 자리(00부터 FF)에 맞습니다. 이러한 컴팩트함은 16진수가 웹 및 디자인 컨텍스트에서 색상을 지정하는 표준이 된 이유입니다.

16진수 색상 코드의 구조

표준 16진수 색상 코드의 구조는 다음과 같습니다.

# R R G G B B

해시 기호(#)는 "이것은 색상입니다."라는 신호를 보내는 접두사입니다. 그 다음에는 16진수 세 쌍이 나옵니다. 이는 RGB 색상 모델의 빨간색, 녹색, 파란색 채널에 대해 각각 한 쌍씩입니다. 각 쌍은 0(00)에서 255(FF)까지의 값을 인코딩하여 해당 채널의 강도를 제어합니다.

예를 들어 생생한 중간 파란색인 #3B82F6를 사용합니다.

부품	가치	십진수	의미
`3B`	레드	59	낮은 빨간색 - 별로 따뜻하지 않음
`82`	그린	130	보통 녹색
`F6`	블루	246	매우 높은 파란색 — 지배적인 채널

높은 파란색 채널은 이 색상을 파란색으로 보이게 만듭니다. 적당한 그린은 퓨어 네이비보다는 시안쪽으로 살짝 밀어줍니다. 낮은 빨간색이 시원함을 유지해줍니다.

산호빛 붉은색인 #FF5733와 비교해 보세요.

부품	가치	십진수	의미
`FF`	레드	255	최대 빨간색
`57`	그린	87	일부 녹색 — 주황색 품질 추가
`33`	블루	51	낮은 파란색 — 따뜻함

중간 녹색의 최대 빨간색은 주황색-빨간색을 생성합니다. 낮은 파란색은 톤을 따뜻하게 유지합니다.

16진수 코드를 한눈에 읽는 방법

16진수 색상을 빠르게 읽기 위해 10진수로 변환할 필요가 없습니다. 몇 가지 경험 법칙:

00 = 강도 0(이 채널에는 없음) FF = 전체 강도(이 채널의 최대값) 80 ≒ 절반 강도(255개 중 128개)

이를 통해 대략적인 16진수 코드를 한 눈에 해독할 수 있습니다.

#FF0000 — 완전한 빨간색, 녹색 없음, 파란색 없음 → 순수한 빨간색
#00FF00 — 빨간색 없음, 전체 녹색, 파란색 없음 → 순수한 녹색
#0000FF — 빨간색 없음, 녹색 없음, 전체 파란색 → 순수한 파란색
#FFFF00 — 완전한 빨간색과 녹색, 파란색 → 노란색 없음(빨간색 + 녹색 = 밝은 노란색)
#FF00FF — 전체 빨간색과 파란색, 녹색 없음 → 자홍색
#00FFFF — 완전한 녹색 및 파란색, 빨간색 → 청록색 없음
#FFFFFF — 모든 채널 최대 → 흰색
#000000 — 모든 채널이 0 → 검정색
#808080 — 모든 채널이 절반 → 중간 회색

처음 두 자리 숫자가 높고 나머지 숫자가 낮을 때 색상은 빨간색에 가까운 경향이 있습니다. 위쪽 중간 두 자리가 녹색쪽으로 밀립니다. 마지막 두 자리 숫자가 파란색이나 보라색 쪽으로 밀립니다.

밝은 부분과 어두운 부분 비교

세 쌍 모두 높은 16진수 값(C, D, E, F)을 가지면 색상이 밝아집니다. 세 가지 모두 낮으면(0, 1, 2, 3) 어두워집니다. 세 채널 모두의 값이 동일하면 항상 중성 회색(또는 맨 끝의 검정색이나 흰색)이 생성됩니다.

#F0E6D3 — 모든 값 높음 → 연한 따뜻한 베이지
#1A1A2E — 모든 값이 낮음 → 매우 어두운 네이비
#A0A0A0 — 중간 값과 동일 → 중간 회색

약식 16진수 표기법

CSS에서는 각 16진수 쌍이 반복되는 문자인 경우 3문자 단축형을 허용합니다. 예를 들어, #AABBCC는 #ABC로 쓸 수 있습니다. 약어의 각 숫자는 전체 6자 버전을 생성하기 위해 간단히 두 배로 늘어납니다.

속기	완전 동등
`#F00`	`#FF0000`(퓨어 레드)
`#0F0`	`#00FF00`(퓨어 그린)
`#00F`	`#0000FF`(퓨어 블루)
`#FFF`	`#FFFFFF`(흰색)
`#000`	`#000000`(블랙)
`#369`	`#336699`(스틸블루)

이 속기는 각 쌍이 반복되는 문자인 경우에만 작동합니다. #3B82F6는 3B, 82, F6가 반복되는 쌍이 아니기 때문에 단축할 수 없습니다. 그러나 #336699는 #369로 단축될 수 있습니다.

속기를 사용해야 하는 경우

속기 16진수는 유효한 CSS 기능이며 정식 버전과 동일하게 렌더링됩니다. 코드에서 지원하는 경우 자유롭게 사용하세요. 그러나 많은 디자인 도구와 브랜드 스타일 가이드는 명확성과 일관성을 위해 전체 6자 형식을 사용합니다. 즉, 머리를 확장하지 않고도 각 채널의 가치가 무엇인지 즉시 알 수 있습니다.

16진수(알파 포함): 8자리 16진수 코드

표준 6자리 16진수 코드에는 투명성 정보가 포함되어 있지 않습니다. 알파 채널(불투명도)을 추가하기 위해 CSS는 마지막 두 문자가 투명도를 지정하는 8자 16진수 형식을 지원합니다.

알파 채널은 16진수 쌍으로 인코딩된 동일한 0-255 범위를 따릅니다.

알파 16진수	알파십진수	불투명도
`FF`	255	100%(완전 불투명)
`CC`	204	80%
`99`	153	60%
`80`	128	~50%
`66`	102	40%
`33`	51	20%
`00`	0	0%(완전 투명)

예를 들어 불투명도 50%에서 파란색 #3B82F6를 사용하려면 #3B82F680를 사용합니다.

70% 불투명도로 어두운 오버레이 #000000를 사용하려면: #000000B3.

알파가 포함된 4자 약어

#RGB가 #RRGGBB의 약어인 것처럼 #RRGGBBAA의 약어인 #RGBA도 있습니다. 각 숫자는 두 배가 됩니다.

#F00F = #FF0000FF (순수한 빨간색, 완전 불투명)
#0008 = #00000088(~53% 불투명도의 검정색)
#FFF0 = #FFFFFF00 (완전 투명 흰색)

Hex Alpha의 대체 앱

8자리 16진수가 널리 지원되기 전에는 투명성을 추가하는 표준 방법이 rgba()였습니다.

/* These are equivalent */
background-color: #3B82F680;
background-color: rgba(59, 130, 246, 0.5);

둘 다 이제 최신 브라우저에서 잘 지원됩니다. rgba() 형식은 불투명도가 정신적 변환이 필요한 16진수 쌍이 아닌 사람이 읽을 수 있는 십진수(0~1)로 표현되기 때문에 더 읽기 쉬운 경우가 많습니다.

16진수를 다른 형식으로 변환

16진수 코드는 rgb() 표기법과 동일한 RGB 색상을 설명합니다. 이는 단지 더 간결한 표현일 뿐입니다. 그들 사이의 변환은 간단합니다.

16진수를 RGB로

각 16진수 쌍에 대해 16진수를 10진수로 변환합니다.

#FF5733 → 빨간색: FF = 255, 녹색: 57 = 87, 파란색: 33 = 51
CSS: rgb(255, 87, 51)

16진수를 HSL로

이 변환은 더 복잡합니다. HSL(Hue, Saturation, Lightness)은 색상이 색상환의 각도로, 채도와 밝기가 백분율로 표시되는 지각적으로 직관적인 형식입니다. 색상 변환기는 이를 즉시 처리합니다. 16진수 코드를 입력하면 RGB, HSL, CMYK 및 OKLCH에 해당하는 값을 동시에 출력합니다.

16진수를 OKLCH로 변환

OKLCH는 지각적으로 균일하도록 설계된 가장 현대적인 CSS 색상 형식입니다. 프로그래밍 방식의 색상 조작에 탁월합니다. OKLCH의 동일한 수치 단계는 동일한 인식 차이에 해당합니다. 색상 변환기에는 입력한 모든 16진수 코드에 대한 OKLCH 출력이 포함되어 있습니다.

일반적인 변환 예

색상	16진수	RGB	HSL
하늘색	#87CEEB	RGB(135, 206, 235)	hsl(197, 71%, 73%)
토마토	#FF6347	RGB(255, 99, 71)	hsl(9, 100%, 64%)
올리브 그린	#6B8E23	RGB(107, 142, 35)	hsl(80, 60%, 35%)
슬레이트 그레이	#708090	RGB(112, 128, 144)	hsl(210, 13%, 50%)

CSS의 16진수: 실제 사용법

16진수 코드는 색상 값을 허용하는 CSS의 모든 곳에서 작동합니다.

/* Text color */
color: #1A1A2E;

/* Background */
background-color: #F0E6D3;

/* Border */
border: 2px solid #3B82F6;

/* Box shadow */
box-shadow: 0 4px 12px #0000001A; /* black at ~10% opacity */

/* With CSS custom properties */
:root {
  --brand-primary: #3B82F6;
  --brand-dark: #1D4ED8;
}

대소문자 구분

16진수 색상 코드는 CSS에서 대소문자를 구분합니다. #3B82F6, #3b82f6, #3B82f6는 모두 동일한 색상을 나타냅니다. 대부분의 스타일 가이드는 일관성을 위해 모두 대문자 또는 모두 소문자로 표준화됩니다. 대문자는 전통적입니다. 소문자는 최신 코드베이스에서 널리 사용되며 많은 린터가 이를 선호합니다.

16진수 코드 찾기

디자인 도구. Figma, Sketch 및 Adobe XD는 모두 색상 선택 패널에 16진수 코드를 표시합니다. 이 도구의 모든 색상 견본은 16진수로 복사될 수 있습니다.

브라우저 DevTools. 웹페이지의 요소를 마우스 오른쪽 버튼으로 클릭하고 검사합니다. CSS 패널에는 계산된 색상 값이 표시되며, 이를 클릭하여 16진수를 포함한 형식을 순환할 수 있습니다.

ColorFYI 색상 페이지. /color/3B82F6/와 같은 ColorFYI의 모든 색상 세부 정보 페이지에는 RGB, HSL, CMYK 및 OKLCH 값과 함께 색상 이름이 있는 경우 전체 16진수 코드가 표시됩니다.

색상 변환기. RGB 또는 HSL 색상이 있고 이에 상응하는 16진수가 필요한 경우 즉시 번역하려면 색상 변환기에 붙여넣으세요.

주요 내용

16진수 색상 코드는 6자리 16진수로, 처음 두 문자는 빨간색 채널을 인코딩하고, 중간 두 문자는 녹색 채널을 인코딩하며, 마지막 두 문자는 파란색을 인코딩합니다.
각 채널 쌍의 범위는 00(0 강도)에서 FF(255 강도)까지이며 RGB 모델의 전체 0~255 범위와 일치합니다.
높은 16진수 숫자는 높은 채널 강도를 나타냅니다. 낮은 숫자는 낮은 강도를 나타냅니다. 세 채널 모두의 값이 동일하면 중립(검은색, 회색, 흰색)이 생성됩니다.
3자리 약어(#RGB)는 각 쌍이 동일한 숫자를 반복할 때 유효합니다. #336699는 #369가 됩니다.
8자리 16진수(#RRGGBBAA)는 알파 투명도 채널을 추가합니다. 마지막 두 자리 범위는 00(투명)부터 FF(불투명)까지입니다.
색상 변환기를 사용하여 모든 16진수 코드를 RGB, HSL, CMYK 또는 OKLCH로 즉시 변환합니다.
16진수 코드는 CSS에서 대소문자를 구분하지 않습니다. 일관성을 위해 하나의 규칙(모두 대문자 또는 모두 소문자)으로 표준화합니다.