16진수 코드란 무엇입니까? 디지털 컬러의 언어

모든 웹사이트, 앱, 디지털 인터페이스의 모든 색상에는 정확한 숫자 주소가 있습니다. 대부분의 웹 기록에서 해당 주소는 #3B82F6 또는 #FF5733와 같이 해시 기호 뒤에 6개의 문자가 오는 특정 형식을 취합니다. 이것은 디지털 컬러의 공용어인 16진수 코드입니다.

화면용으로 디자인하거나, 웹 애플리케이션을 구축하거나, 디자인 도구를 사용하여 작업하는 경우 끊임없이 16진수 코드를 접하게 됩니다. 이 문서에서는 이것이 무엇인지, 16진수 번호 매기기 시스템이 어떻게 작동하는지, 약칭 표기법, 알파 투명도 및 모든 색상에 대한 16진수 코드 찾기에 대해 알아야 할 모든 것을 정확하게 설명합니다.

16진수 번호 매기기 시스템

"hex"라는 단어는 6을 의미하는 그리스어 헥사스와 10을 의미하는 라틴어에서 나온 "십진수"에서 유래되었습니다. 16진수는 우리가 일상 생활에서 사용하는 10진수 체계와 비교하여 16진수 체계입니다.

10진수에서는 0, 1, 2, 3, 4, 5, 6, 7, 8, 9를 세고 숫자를 추가합니다: 10, 11, 12...

16진수에서는 0, 1, 2, 3, 4, 5, 6, 7, 8, 9를 세고 문자를 사용하여 계속합니다: A, B, C, D, E, F — 숫자를 추가하기 전에: 10(10진수 16), 11(17), ... FF(255).

색상에 Base 16을 사용하는 이유는 무엇입니까?

그 이유는 우아하고 실용적이기 때문입니다. 컴퓨터 바이트는 8개의 이진 비트를 포함하며 0부터 255까지의 값을 보유할 수 있습니다. 16진수에서 해당 전체 범위는 00(0)부터 FF(255)까지 정확히 두 자리 숫자에 맞습니다. 이는 16진수를 바이트 크기 값에 대한 간결하고 읽기 쉬운 인코딩으로 만듭니다. 이것이 바로 각 색상 채널입니다.

RGB 색상 모델에서 빨간색, 녹색, 파란색의 세 가지 채널 각각은 0~255의 값입니다. 16진수에서는 00~FF입니다. 3개의 채널, 각각 2개의 16진수 숫자로 총 6개의 문자를 제공합니다. "이것은 색상입니다"라는 신호에 # 접두어를 추가하면 표준 16진수 색상 코드가 됩니다.

6자리 16진수 코드 읽기(#RRGGBB)

표준 16진수 색상 코드의 구조는 #RRGGBB입니다.

• # — 16진수 색상 값을 나타내는 접두사
• RR — 빨간색 채널(00~FF)을 인코딩하는 2개의 16진수
• GG — 녹색 채널(00~FF)을 인코딩하는 2개의 16진수
• BB — 파란색 채널(00~FF)을 인코딩하는 2개의 16진수

예제 디코딩

따뜻한 산호빛 붉은색인 #FF5733를 선택하세요.

중간 정도의 녹색과 낮은 파란색이 포함된 최대 빨간색 채널은 선명한 주황색-빨간색을 생성합니다. 낮은 파란색은 색상이 중성색으로 바뀌는 것을 방지합니다.

이제 #3B82F6 — 하늘색을 선택하세요.

중간 정도의 녹색을 가미한 주요 파란색은 약간의 청록색 품질을 지닌 생생한 중간 파란색을 생성합니다. 낮은 빨간색이 시원함을 유지해줍니다.

빠른 읽기 휴리스틱

구조를 이해하면 대략적인 Hex 코드를 한눈에 읽을 수 있습니다.

• 채널의 00 = 해당 기본 항목 없음(해당 채널에서는 완전히 어두움)
• 채널의 FF = 해당 기본의 전체 강도
• 80 ≒ 절반 강도(255개 중 128개)

이를 통해 일반 코드를 빠르게 디코딩할 수 있습니다.

세 채널 모두의 동일한 값은 항상 레벨에 따라 회색, 검정색 또는 흰색의 중간색을 생성합니다. 값이 같지 않으면 항상 색상이 생성됩니다. 값이 높을수록 어떤 기본 색상이 지배적인지 나타냅니다.

스포팅 라이트 대 어두운 16진수 코드

6개 문자가 모두 높은 16진수 값(C, D, E, F)이면 색상이 밝아집니다. 모두 낮으면(0, 1, 2, 3) 어두워집니다. 이것은 즉각적인 가벼움 읽기를 제공합니다.

• #F0E6D3 — 모두 높은 값 → 연하고 따뜻한 베이지
• #1A1A2E — 모두 낮은 값 → 매우 어두운 네이비
• #7C3AED — 혼합 값, 높은 파란색 → 중간 보라색

3자리 약칭 표기법

CSS는 전체 6자 코드의 각 숫자 쌍이 두 개의 동일한 문자로 구성되는 경우 3자 16진수 단축형을 허용합니다. #AABBCC는 #ABC가 됩니다. 전체 버전을 생성하려면 각 약칭 숫자를 두 배로 늘리면 됩니다.

단축어가 유효한 경우

속기는 각 쌍이 반복되는 숫자인 경우에만 작동합니다. #3B82F6는 3B, 82 및 F6가 이중 쌍이 아니기 때문에 단축할 수 없습니다. 그러나 #336699는 33, 66 및 99가 각각 한 자리 숫자를 반복하므로 #369에 해당합니다.

실제로 속기는 유효한 CSS 기능이지만 많은 팀에서는 명확성을 위해 전체 6자 형식으로 표준화합니다. 6자 버전을 사용하면 각 채널 값이 무엇인지 즉시 알 수 있습니다. 많은 린터와 스타일 가이드는 일관성을 위해 전체 16진수를 적용합니다.

알파 투명도가 있는 8자리 16진수

표준 6자리 16진수 코드는 RGB만 인코딩하며 불투명도 정보는 없습니다. 알파 투명도(색상 불투명도 또는 투명도 제어)를 추가하기 위해 CSS는 8자 16진수 형식을 지원합니다.

#RRGGBBAA

최종 AA 쌍은 불투명도에 매핑된 색상 채널과 동일한 0-255 범위를 사용하여 알파 채널을 인코딩합니다.

실용적인 8자리 16진수 예제

모달 배경을 위한 어두운 오버레이: 불투명도 70%의 #000000 → #000000B3

불투명도 50%의 파란색 브랜드 #3B82F6 → #3B82F680

불투명도 10%(미묘한 하이라이트)의 순백색 #FFFFFF → #FFFFFF1A

/* Modal scrim */
.modal-overlay {
  background-color: #000000B3;
}

/* Frosted glass panel */
.glass-card {
  background-color: #FFFFFF1A;
  backdrop-filter: blur(12px);
}

4자리 영문자 속기

#RRGGBB에 대한 #RGB 약어가 존재하는 것처럼 #RRGGBBAA에 대한 #RGBA 약어가 존재합니다.

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

16진수 알파 대 rgba()

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

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

둘 다 모든 최신 브라우저에서 잘 지원됩니다. rgba() 형식은 불투명도가 0에서 1까지의 십진수로 표현되어 즉시 이해할 수 있기 때문에 CSS에서 더 읽기 쉬운 경우가 많습니다. 8자 16진수 형식은 더 간결하지만 16진수에서 불투명도 비율로 변환해야 합니다.

16진수 코드 찾기 및 변환

디자인 도구에서

모든 주요 디자인 도구는 16진수 값을 노출합니다.

• Figma — 색상 채우기 또는 획을 클릭합니다. 16진수 코드가 오른쪽 채우기 패널에 나타납니다. 복사하려면 "HEX"를 클릭하세요.
• Adobe Illustrator / Photoshop — 색상 선택기 및 견본 패널에 16진수 코드가 표시됩니다. 패널이 표시되지 않는 경우 창 > 색상.
• 스케치 — 채우기 필드에는 복사 버튼과 함께 16진수 코드가 표시됩니다.
• Canva — 요소를 클릭한 다음 채우기 색상 칩을 클릭하면 16진수 코드를 보고 복사할 수 있습니다.

웹 브라우저에서

웹페이지의 요소를 마우스 오른쪽 버튼으로 클릭하고 "검사" 또는 "요소 검사"를 선택하세요. 브라우저 DevTools의 CSS 패널에서 요소를 찾습니다. 색상 값을 클릭하세요. 클릭할 때마다 형식 옵션(hex, rgb, hsl, oklch)이 순환되는 경우가 많습니다. Chrome DevTools에는 색상 선택기 오버레이도 표시됩니다.

DevTools 없이 빠르게 색상을 캡처하려면 ColorZilla(Chrome/Firefox)와 같은 브라우저 확장을 사용하여 화면의 모든 픽셀을 샘플링하고 16진수 코드를 복사할 수 있습니다.

ColorFYI에서

/color/FF5733/ 또는 /color/3B82F6/와 같은 ColorFYI의 모든 색상 세부 정보 페이지에는 RGB, HSL, CMYK 및 OKLCH 값과 함께 전체 16진수 코드가 표시됩니다. 다른 형식의 색상이 있는 경우 색상 변환기를 사용하여 즉시 16진수로 변환하세요.

• RGB에서 16진수로: rgb(255, 87, 51) 입력 → #FF5733 가져오기
• HSL을 16진수로: hsl(11, 100%, 60%)를 입력 → 이에 상응하는 16진수 가져오기
• CMYK에서 16진수로: CMYK 백분율을 입력하고 → 대략적인 sRGB 16진수를 얻습니다.

일반적인 16진수 변환표

CSS의 16진수: 실제 사용법

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

/* Text */
color: #1E293B;

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

/* Border */
border: 1px solid #E2E8F0;

/* Box shadow with alpha */
box-shadow: 0 4px 16px #0000001A;

/* CSS custom properties */
:root {
  --color-primary: #3B82F6;
  --color-primary-dark: #1D4ED8;
  --color-surface: #F8FAFC;
}

대소문자 구분

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

주요 내용

• 16진수 코드는 RGB 색상 값을 인코딩하는 6자리 16진수입니다. 구조는 #RRGGBB입니다. 즉, 빨간색, 녹색, 파란색에 대해 각각 2개의 16진수입니다.
• 16진수는 숫자 0~9와 문자 A~F를 사용하는 16진수입니다. 각 두 자리 16진수 쌍은 RGB 채널의 전체 범위와 일치하는 0(00)부터 255(FF)까지의 값을 인코딩합니다.
• 16진수 코드 읽기: 한 쌍의 높은 값은 높은 채널 강도를 의미합니다. 세 쌍 모두의 값이 동일하면 중성색(회색, 검정색 또는 흰색)이 생성됩니다. 값이 동일하지 않으면 가장 높은 채널에 편향된 색상이 생성됩니다.
• 3자리 약어(#RGB)는 각 쌍이 한 자리를 반복하는 경우 유효합니다. #336699는 #369로 단축됩니다.
• 8자리 16진수(#RRGGBBAA)는 알파 투명도 채널을 추가합니다. 마지막 두 자리 범위는 00(투명)부터 FF(불투명)까지입니다.
• 모든 디자인 도구의 색상 선택기, 브라우저 DevTools의 요소 검사 또는 ColorFYI 색상 페이지에서 16진수 코드를 찾습니다.
• 색상 변환기를 사용하여 16진수, RGB, HSL, CMYK 및 OKLCH 간을 즉시 변환합니다.