HEX에서 RGB로 - 색상 코드 작동 방식(예제 포함)

화면의 모든 색상은 빨간색, 녹색, 파란색 빛의 혼합입니다. 디자이너와 개발자는 HEX(#3b82f6) 및 RGB(rgb(59, 130, 246))라는 두 가지 일반적인 표기법으로 해당 조합을 작성합니다. 동일한 3개 채널을 설명하며 숫자 체계만 변경됩니다. 이 가이드에서는 HEX 색상 코드가 무엇인지, RGB가 무엇을 의미하는지, HEX를 RGB로 직접 변환하는 방법(FF가 255인 이유 포함), 작업 예제, 알파/RGBA 및 일반 색상에 대한 빠른 테이블을 설명합니다.

HEX 색상 코드란 무엇입니까?

HEX(16진수) 색상 코드는 기본 16자리 숫자(0-9 및 A-F)를 사용합니다. 여기서 A = 10, B = 11, C = 12, D = 13, E = 14, F = 15입니다. 웹에서는 일반적으로 #으로 시작하고 몇 가지 길이로 제공됩니다.

• #RGB - 약어: 각 숫자가 두 배가 됩니다(#F0A → #FF00AA).
• #RRGGBB - 표준 6자리 형식(채널당 2자리)
• #RRGGBBAA - 8자리: RGB + 알파(불투명도)

각 숫자 쌍은 하나의 채널입니다. 처음 두 자리는 빨간색, 다음 두 자리는 녹색, 마지막 두 자리는 파란색입니다. 두 개의 16진수는 16 × 16 = 256개의 값을 나타낼 수 있으므로 각 채널의 범위는 00(0)에서 FF(255)까지입니다. 이는 CSS가 rgb()에서 사용하는 것과 동일한 범위입니다.

HEX는 크기가 작고 복사하기 쉽기 때문에 디자인 도구, 브랜드 가이드라인, CSS에서 널리 사용됩니다. 대소문자는 중요하지 않습니다. #3b82f6과 #3B82F6은 동일한 색상입니다.

RGB 란 무엇입니까?

RGB는 빨간색(Red), 녹색(Green), 파란색(Blue)을 의미합니다. CSS에서는 이를 rgb(r, g, b) 또는 현대적인 공백으로 구분된 형식 rgb(r g b)로 작성합니다. 여기서 각 채널은 0에서 255(또는 백분율) 사이의 정수입니다. 최대 강도로 채널을 혼합하면 흰색이 됩니다. 0은 모두 검은색이 됩니다. 동일하지 않은 혼합은 sRGB 디스플레이에서 다른 모든 색상을 만듭니다.

• rgb(255, 0, 0) - 순수한 빨간색
• rgb(0, 255, 0) - 순수한 녹색
• rgb(0, 0, 255) - 순수한 파란색
• RGB(255, 255, 255) - 흰색
• RGB(0, 0, 0) - 검정색

코드에서 밝기나 불투명도를 조정할 때 RGB를 추론하기가 더 쉬운 경우가 많습니다. HEX는 스타일 가이드에서 붙여넣기가 더 쉬운 경우가 많습니다. 그들 사이를 변환하는 것은 단지 동일한 세 숫자를 쓰는 방법을 바꾸는 것입니다.

HEX를 RGB로 직접 변환하는 방법

6개의 16진수를 3개의 쌍으로 나눈 다음 각 쌍을 16진수에서 10진수로 변환합니다. 두 자리 16진수 값 XY의 공식은 다음과 같습니다.

1. 앞에 있는 #이 있으면 제거합니다.
2. 숫자가 3개(#RGB)인 경우 각 숫자를 두 배로 늘립니다(#F0A → #FF00AA).
3. RR, GG, BB로 나누어집니다.
4. 각 쌍을 (high × 16) + low로 변환합니다.
5. RGB(R, G, B)를 작성합니다.

실제 예: #FFFFFF

흰색이 가장 쉬운 검사입니다. RR = FF, GG = FF, BB = FF. 각 FF는 255로 변환되므로 #FFFFFF → rgb(255, 255, 255)입니다. 검정색은 그 반대입니다: #000000 → rgb(0, 0, 0).

작업 예시: #1A2B3C

• 빨간색 1A: (1 × 16) + 10 = 16 + 10 = 26
• 녹색 2B: (2 × 16) + 11 = 32 + 11 = 43
• 파란색 3C: (3 × 16) + 12 = 48 + 12 = 60
• 결과: #1A2B3C → rgb(26, 43, 60)

다른 방향으로(RGB에서 HEX로) 각 채널을 0-255로 고정하고 높은 니블을 위해 16으로 나누고 낮은 니블을 위해 나머지를 취하고 10-15를 다시 A-F에 매핑합니다. 모든 채널이 두 문자(#A1B2C가 아닌 #0A1B2C)가 되도록 한 자리 숫자를 앞에 0으로 채웁니다.

알파, RGBA 및 8자리 HEX

불투명도는 알파라고 불리는 네 번째 채널입니다. CSS에서 rgba(r, g, b, a)는 0(완전 투명)에서 1(완전 불투명)까지의 a를 사용하거나 최신 rgb(r g b / a) 구문을 사용할 수 있습니다. 8자리 HEX는 #RRGGBBAA와 동일한 개념을 인코딩합니다. 여기서 AA는 00(투명)부터 FF(불투명)까지입니다.

• #FF000080 → 불투명도 약 50%의 빨간색(128/255 ≒ 0.5) → rgba(255, 0, 0, 0.5)
• #00000000 → 완전히 투명한 검정색(종종 "채우지 않음"으로 사용됨)
• #3B82F6FF → 명시적인 완전 불투명도를 갖춘 #3B82F6과 동일

모든 오래된 브라우저나 디자인 내보내기가 8자리 HEX를 같은 방식으로 처리하는 것은 아니지만 최신 CSS는 이를 지원합니다. 반투명 오버레이, 그림자 또는 유리 효과가 필요한 경우 RGBA(또는 알파가 포함된 HEX)가 적합한 도구입니다. 단색 6자리 HEX는 투명도를 표현할 수 없습니다.

일반적인 HEX 및 RGB 색상표

이러한 일상적인 색상은 CSS 디버깅 및 브랜드 토큰 일치를 위해 기억해 두는 데 유용합니다.

• #FFFFFF → rgb(255, 255, 255) - 흰색
• #000000 → rgb(0, 0, 0) - 검정색
• #FF0000 → rgb(255, 0, 0) - 빨간색
• #00FF00 → rgb(0, 255, 0) - 라임 그린
• #0000FF → rgb(0, 0, 255) - 파란색
• #FFFF00 → rgb(255, 255, 0) - 노란색
• #FFA500 → rgb(255, 165, 0) - 주황색
• #808080 → rgb(128, 128, 128) - 회색
• #1A2B3C → rgb(26, 43, 60) - 진한 청회색(위 예에서)
• #3B82F6 → rgb(59, 130, 246) - 많은 UI 키트에 사용되는 일반적인 "하늘색" 파란색

자주 묻는 질문

HEX는 RGB와 동일합니까?

일반적인 웹 색상에 대해 동일한 빨간색, 녹색 및 파란색 강도를 인코딩합니다. HEX는 해당 값을 16진수로 씁니다. RGB는 10진수로 씁니다. HEX를 RGB(또는 그 반대로)로 변환해도 색상은 변경되지 않고 표기법만 변경됩니다.

FF가 255인 이유는 무엇입니까?

F는 16진수로 15입니다. 두 자리는 (15 × 16) + 15 = 255를 의미하며, 이는 채널의 최대 8비트 값입니다. 이것이 #FF0000이 완전 빨간색이고 #FFFFFF가 흰색인 이유입니다.

3자리 HEX 색상은 무엇을 의미하나요?

단축형 #RGB는 각 숫자를 반복하여 확장됩니다. #0F8은 #00FF88이 됩니다. 이는 각 채널의 두 자리 숫자가 동일한(#00, #FF, #88 등) 색상을 작성하는 간결한 방법입니다.

RGB와 RGBA의 차이점은 무엇입니까?

RGBA는 알파(불투명도) 채널을 추가합니다. rgb(255, 0, 0)은 빨간색입니다. rgba(255, 0, 0, 0.5) 는 불투명도 50%에서 동일한 빨간색입니다. 8자리 HEX(#RRGGBBAA)는 RGBA에 해당하는 HEX입니다.

CSS에서 HEX 또는 RGB를 사용해야 합니까?

둘 다 유효합니다. 디자인 시스템에서 복사하거나 짧은 토큰을 원할 때 HEX를 사용하세요. 불투명도가 필요하거나 변수 및 수학에서 색상을 구성할 때 RGB/RGBA를 사용하세요. 많은 팀이 HEX 브랜드 색상을 저장하고 최신 CSS 불투명도 트릭(예: rgb(var(--brand-rgb) / 0.2))을 위해 rgb() 채널을 파생합니다.

HEX를 RGB로 빠르게 변환하려면 어떻게 해야 합니까?

일회성 학습의 경우 위의 (숫자 × 16) + 숫자 방식을 사용합니다. 일상적인 작업의 경우 코드를 HEX-RGB 변환기에 붙여 넣어 rgb()/rgba()를 복사하고 견본을 미리 보고 산술 실수를 피할 수 있습니다.