HEX→RGB 변환기

16진수에서 RGB로의 변환기에 오신 것을 환영합니다. 이 도구는 16진수 색상 코드를 RGB, RGBA, HSL, HSLA 및 CMYK 값으로 즉시 변환하는 종합적인 색상 변환 도구입니다. 웹 디자이너, 개발자 또는 디지털 아티스트 등 누구에게나 실시간 색상 미리보기, 원클릭 복사 기능, 보색 생성 및 WCAG 접근성 대비 검사 기능을 제공합니다.

16진수 색상 코드란 무엇인가요?

16진수 색상 코드(hexadecimal color)는 웹 디자인, CSS 및 디지털 그래픽에서 색상을 나타내는 데 사용되는 6자리 코드입니다. 이 코드는 빨강, 녹색, 파랑 구성 요소의 강도를 나타내는 세 쌍의 16진수 숫자(0-9 및 A-F)로 구성됩니다. 각 쌍의 범위는 00(최소, 0)에서 FF(최대, 255)까지입니다.

예를 들어, #FF5733은 다음과 같이 나뉩니다.

• FF = 255 빨강 (최대 빨강 강도)
• 57 = 87 녹색 (중간 녹색 강도)
• 33 = 51 파랑 (낮은 파랑 강도)

그 결과는 선명한 코랄-오렌지 색상입니다. # 기호는 선택 사항이지만 값을 16진수 색상 코드로 식별하기 위해 일반적으로 포함됩니다.

3자리 약칭

세 쌍의 색상 숫자가 모두 반복될 경우 3자리 약칭을 사용할 수 있습니다. 예를 들어, #FF5533은 줄일 수 없지만 #FFAA00은 #FA0으로 쓸 수 있습니다. 각 숫자는 자동으로 두 배가 됩니다: F는 FF가 되고, A는 AA가 되며, 0은 00이 됩니다.

16진수를 RGB로 변환하는 방법

16진수를 RGB로 변환하려면 각 16진수 숫자 쌍을 그에 해당하는 10진수로 변환해야 합니다.

1. # 기호를 제거합니다 (있는 경우).
2. 쌍으로 나누기: 6자리를 3쌍(RR, GG, BB)으로 나눕니다.
3. 각 쌍 변환: 16진수(base-16)에서 10진수(base-10)로 변환합니다.

16진수에서 10진수로의 변환

각 16진수 자릿수는 값을 가집니다: 첫 번째 자릿수에 16을 곱하고 두 번째 자릿수를 더합니다. 16진수 쌍 "5A"의 경우:

5 × 16 + 10 (A) = 80 + 10 = 90

색상 형식 이해하기

RGB 및 RGBA

RGB(Red, Green, Blue)는 0-255 사이의 세 가지 값을 사용하여 색상을 정의합니다. RGBA는 투명도를 위해 알파 채널(0에서 1)을 추가합니다. RGB(255, 87, 51)는 불투명하며, RGBA(255, 87, 51, 0.5)는 50% 투명합니다.

HSL 및 HSLA

HSL(Hue, Saturation, Lightness)은 디자이너에게 더 직관적인 경우가 많습니다.

• 색상(Hue): 색상환 위치(0-360도). 0=빨강, 120=녹색, 240=파랑
• 채도(Saturation): 색의 강도(0-100%). 0%는 회색, 100%는 선명한 색
• 명도(Lightness): 밝기(0-100%). 0%는 검은색, 100%는 흰색, 50%는 순수 색상

CMYK

CMYK(Cyan, Magenta, Yellow, Key/Black)는 인쇄물 제작에 사용됩니다. 화면은 가산 혼합(RGB)을 사용하는 반면, 프린터는 감산 혼합(CMYK)을 사용합니다. 인쇄 시 색상이 다르게 보일 수 있으므로 CMYK 값을 확인하면 정확한 인쇄 재현에 도움이 됩니다.

색채 이론: 보색 및 삼합색

보색 (Complementary Colors)

보색은 색상환에서 서로 반대편에 위치하여 최대 대비를 이룹니다. 색상환의 보색은 채도와 명도를 유지하면서 색조를 180° 회전해 구합니다. 각 RGB 값을 255에서 빼면 RGB 네거티브(음화)가 되며 색상환의 보색과는 다릅니다. 차이는 /color-inverter/에서 확인할 수 있습니다. 보색 쌍은 다음과 같은 경우에 사용됩니다.

• 눈에 띄는 클릭 유도(CTA) 버튼
• 시각적 임팩트가 있는 로고 디자인
• 시각적 긴장감과 에너지 조성

삼합색 (Triadic Colors)

삼합색은 색상환에서 동일한 간격(120도 간격)으로 떨어진 세 가지 색상입니다. 조화를 유지하면서도 다양성을 제공하는 활기차고 균형 잡힌 팔레트를 만듭니다. 이 체계는 그래픽 디자인과 브랜딩에서 인기가 높습니다.

WCAG 접근성 및 대비

웹 콘텐츠 접근성 가이드라인(WCAG)은 텍스트 가독성을 위한 대비 비율을 정의합니다.

• AAA 등급 (7:1): 매우 우수 - 최고 수준의 접근성 표준
• AA 등급 (4.5:1): 양호 - 일반 텍스트의 최소 기준
• AA Large 등급 (3:1): 큰 텍스트(18pt 이상 또는 14pt 굵게)에 허용 가능
• 불합격 (<3:1): 접근성을 위한 대비 부족

저희 도구는 흰색과 검은색 배경 모두에 대한 대비 비율을 계산하여 디자인에 적합한 접근성 있는 텍스트 색상을 선택하도록 돕습니다.

이 변환기 사용 방법

1. 16진수 코드 입력: 16진수 색상을 입력하거나 붙여넣으세요(# 포함 여부 상관없음). 6자리와 3자리 형식 모두 작동합니다.
2. 알파 설정 (선택 사항): RGBA/HSLA 출력을 위해 투명도를 0(투명)에서 1(불투명)까지 조정하세요.
3. 변환 클릭: RGB, HSL, CMYK 값과 색상 미리보기를 즉시 확인하세요.
4. 형식 복사: 복사 버튼을 클릭하여 값을 클립보드에 복사하세요.
5. 팔레트 탐색: 디자인 영감을 위해 보색, 삼합색 구성, 그림자 및 틴트를 확인하세요.

자주 묻는 질문

16진수 색상 코드란 무엇인가요?

16진수 색상 코드는 웹 디자인 및 디지털 그래픽에서 사용되는 색상의 6자리(또는 3자리 약칭) 16진수 표현입니다. # 기호로 시작하며 빨간색, 녹색, 파란색 구성 요소를 나타내는 6개의 문자(0-9 및 A-F)가 뒤따릅니다. 예를 들어, #FF5733은 빨간색=255, 녹색=87, 파란색=51인 코랄-오렌지 색상을 나타냅니다.

16진수를 RGB로 어떻게 변환하나요?

16진수를 RGB로 수동 변환하려면: 1) # 기호를 제거하고, 2) 6자리를 3쌍(RR, GG, BB)으로 나눈 뒤, 3) 각 쌍을 16진수에서 10진수로 변환합니다. 예를 들어 #FF5733의 경우: FF=255(빨강), 57=87(녹색), 33=51(파랑)이 되어 RGB(255, 87, 51)가 됩니다. 저희 변환기는 이를 즉시 수행합니다.

RGB와 RGBA의 차이점은 무엇인가요?

RGB는 빨강, 녹색, 파랑 값(각 0-255)을 사용하여 색상을 지정합니다. RGBA는 투명도를 위한 알파 채널(0-1)을 추가합니다. RGB(255, 87, 51)는 불투명한 색상인 반면, RGBA(255, 87, 51, 0.5)는 동일한 색상을 50% 불투명도로 표현한 것입니다. RGBA는 반투명 오버레이 및 효과를 만드는 데 필수적입니다.

HSL 색상 형식이란 무엇인가요?

HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)를 나타냅니다. 색상은 색상환의 각도(0-360도), 채도는 색의 강도(0-100%), 명도는 밝기(0-100%)입니다. HSL은 기본 색상에 영향을 주지 않고 밝기나 채도를 직관적으로 조정할 수 있어 디자이너에게 자주 애용됩니다.

CMYK란 무엇이며 언제 사용해야 하나요?

CMYK는 시안(Cyan), 마젠타(Magenta), 노랑(Yellow), 블랙(Key/Black)의 약자입니다. 인쇄물 제작에 사용되는 색상 모델입니다. 16진수와 RGB가 화면용(가산 혼합)이라면, CMYK는 인쇄용(감산 혼합)입니다. 디자인이 인쇄될 예정이라면 색상 정확도를 위해 CMYK 값을 확인해야 합니다.

보색이란 무엇인가요?

보색은 색상환에서 다른 색상과 정반대편에 위치하여 최대 대비를 이루는 색상입니다. 어떤 색상의 보색은 RGB 값(255에서 각 채널 값을 뺀 값)을 반전시켜 찾을 수 있습니다. 보색은 활기차고 대비가 강한 디자인을 만드는 데 사용되며 로고나 클릭 유도(CTA) 요소에 주로 사용됩니다.

관련 리소스

• WCAG 대비 가이드라인 - W3C (영문)