HEX ↔ RGB 색상 변환기

HEX 색상 코드란?

HEX 색상 코드는 웹 디자인과 디지털 그래픽에서 특정 색상을 나타내기 위해 사용되는 여섯 자리 영숫자 문자열입니다. #RRGGBB 형식을 따르며, 각 두 자리 쌍은 세 가지 가산 원색 중 하나의 강도를 16진법(16진수)으로 인코딩합니다: 빨강(RR), 초록(GG), 파랑(BB). 각 쌍은 00(강도 없음)에서 FF(최대 강도, 10진수로 255)까지 범위를 가집니다.

HEX 코드는 HTML과 CSS에서 색상 이름 키워드에 의존하지 않고 색상을 정의할 필요성에서 비롯되었습니다. CSS는 이제 rgb(), hsl(), oklch() 등 다양한 색상 형식을 지원하지만, HEX는 프런트엔드 개발, 디자인 핸드오프, 브랜딩 가이드라인에서 가장 널리 사용되는 표기법으로 남아 있습니다.

6자리 HEX 코드로 표현할 수 있는 고유 색상의 수는 16,777,216개(256 × 256 × 256)입니다. 이를 흔히 "트루 컬러" 또는 "24비트 색상"이라고 하며, 대부분의 현대 디스플레이 색심도와 일치합니다.

HEX 코드는 대소문자를 구분하지 않으므로, #ff8000과 #FF8000은 동일한 색상을 가리킵니다.

HEX를 RGB로 단계별 변환하는 방법

HEX 색상 코드를 RGB로 변환하는 것은 간단합니다. 6자리 문자열을 세 쌍으로 나누고 각 쌍을 16진수(16진법)에서 10진수(10진법)로 변환합니다. 단계별 방법은 다음과 같습니다:

1. 해시 기호를 제거합니다. HEX 코드가 #로 시작하면 제거합니다. 예: #1A2B3C → 1A2B3C.
2. 세 쌍으로 나눕니다. 나머지 문자열을 두 자리씩 세 그룹으로 나눕니다: 1A, 2B, 3C.
3. 각 쌍을 10진수로 변환합니다. 첫 번째 자리에 16을 곱하고 두 번째 자리를 더합니다:
   • 빨강: 1A → (1 × 16) + 10 = 26
   • 초록: 2B → (2 × 16) + 11 = 43
   • 파랑: 3C → (3 × 16) + 12 = 60
4. RGB 값을 작성합니다. 세 10진수를 합칩니다: rgb(26, 43, 60).

16진수 자리와 10진수 값: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. A부터 F만 암기하면 됩니다.

프로그래밍 방식으로 변환할 때, 대부분의 언어는 내장 함수를 제공합니다. JavaScript에서는 parseInt("1A", 16)이 26을 반환합니다. Python에서는 int("1A", 16)이 동일하게 작동합니다.

3자리 vs 6자리 HEX 코드

CSS는 세 쌍이 각각 동일한 자리로 구성될 때 편의를 위해 축약형 3자리 HEX 형식(#RGB)을 지원합니다. 단일 자리는 두 배로 확장됩니다. 예시:

• #F80 → #FF8800 → rgb(255, 136, 0)
• #FFF → #FFFFFF → rgb(255, 255, 255)
• #000 → #000000 → rgb(0, 0, 0)
• #09C → #0099CC → rgb(0, 153, 204)
• #A3F → #AA33FF → rgb(170, 51, 255)

3자리 표기법은 사용 가능한 색상 수를 1,677만 개에서 4,096개(16 × 16 × 16)로 줄이므로 모든 색상을 표현할 수 없습니다. CSS는 투명도(알파 채널)를 포함하는 4자리(#RGBA) 및 8자리(#RRGGBBAA) HEX 코드도 지원합니다.

HEX → RGB 참조표

일반적인 HEX 색상과 해당 RGB 값의 참조표입니다. 웹 디자인에서 자주 사용되는 색상들을 포함합니다.

CSS는 총 147개의 명명된 색상을 정의하며, 각각 해당 HEX 값을 가집니다. 명명된 색상은 프로토타이핑에 편리하지만, 전문 프로젝트에서는 브라우저와 디자인 도구 전반에 걸쳐 정확성과 일관성을 위해 HEX 또는 RGB 값을 사용합니다.

인기 브랜드 색상 – HEX 및 RGB 값

개발자와 디자이너들은 목업, 통합, 스타일 가이드를 위해 인기 브랜드 색상의 정확한 HEX 및 RGB 값이 자주 필요합니다.

브랜드 가이드라인은 종종 색상을 여러 형식(HEX, RGB, CMYK, Pantone)으로 명시합니다. CSS에서 브랜드 색상을 구현할 때는 항상 공식 브랜드 리소스 페이지를 통해 값을 확인하세요.

색상 모델 비교: HEX, RGB, HSL, CMYK

각 색상 모델을 언제 사용해야 하는지 이해하면 다양한 도구와 매체에서 더 효율적으로 작업할 수 있습니다:

HEX와 RGB는 수학적으로 동일합니다 — 다른 표기법을 사용하여 동일한 색상 공간을 나타냅니다. 두 사이의 변환은 정밀도나 색역 차이 없이 단순한 16진수 대 10진수 변환입니다. HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)를 독립적으로 추론하기 쉬운 원통형 좌표 시스템으로 RGB를 변환합니다.

CSS와 JavaScript에서 HEX 및 RGB 사용

HEX와 RGB 값 모두 CSS에서 유효하며 동일한 결과를 생성합니다. 실용적인 예시:

CSS 선언:

/* HEX 표기법 */
body { background-color: #1A2B3C; }

/* RGB 표기법 */
body { background-color: rgb(26, 43, 60); }

/* 알파(투명도) 포함 RGB */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

JavaScript 변환 함수:

// HEX → RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB → HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

CSS 사용자 정의 속성(변수)에서 HEX 값을 저장하고 rgba()와 함께 사용하는 패턴이 널리 활용됩니다:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226;
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

접근성과 색상 대비

HEX를 RGB로 변환하는 것은 종종 접근성 준수를 위한 색상 대비 비율 계산의 첫 번째 단계입니다. 웹 콘텐츠 접근성 가이드라인(WCAG)은 일반 텍스트에 4.5:1의 최소 대비 비율을 요구합니다.

대비 비율 공식은 각 색상의 상대 휘도를 필요로 하며, 이는 선형 RGB 값에서 계산됩니다. WebAIM 대비 검사기, Chrome DevTools 색상 선택기 같은 도구들이 이 변환을 내부적으로 수행합니다.

디자이너를 위한 빠른 기준: R, G, B 채널의 절대 차이 합이 500 이상이고, 각 채널의 밝기 차이가 125 이상인 어두운 텍스트와 밝은 배경(또는 그 반대)은 일반적으로 WCAG AA 기준을 충족합니다.