Hex to RGB 변환기: 개발자를 위한 컬러 코드 가이드

색상은 모든 사용자 인터페이스의 기본 요소이며, 개발자는 16진수 색상 코드와 RGB 값을 자주 전환합니다. CSS로 웹사이트를 스타일링하든, 모바일 앱을 개발하든, Python으로 데이터 시각화 스크립트를 작성하든, hex와 RGB 간의 변환을 이해하는 것은 필수입니다. 이 완전한 가이드에서는 변환 알고리즘, 다중 언어 코드 예제, 알파 투명도 등 고급 주제를 다룹니다.

무료 온라인 Hex to RGB 변환기 도구를 사용해 보세요.

16진수 색상 코드와 RGB 값이란?

16진수 색상 코드는 # 접두사가 붙은 6자리 문자열로 색상을 표현합니다. 각 문자 쌍은 빨강, 초록, 파랑 채널을 인코딩합니다. 형식은 #RRGGBB이며, 각 쌍은 00에서 FF까지의 16진수입니다. CSS는 #F00과 같은 3자리 약어도 지원하며, #FF0000으로 확장됩니다.

RGB 값은 빨강, 초록, 파랑 강도를 0~255의 세 개의 10진수로 정의합니다. CSS에서는 rgb(255, 87, 51)로 작성합니다. hex와 RGB는 같은 색 공간(sRGB)을 기술하므로 변환은 손실이 없습니다.

Hex to RGB 변환 알고리즘

hex에서 RGB로의 변환은 각 hex 쌍이 하나의 RGB 채널에 직접 대응하므로 간단합니다:

예: #1A2B3C는 R=26, G=43, B=60 = rgb(26, 43, 60).

역변환(RGB에서 hex)은 각 10진수 채널 값을 2자리 16진수 문자열로 변환하여 연결합니다.

일반적인 16진수 색상 코드와 RGB 값

일반적인 색상의 hex와 RGB 대조표:

Hex, RGB, HSL 사용 시기

세 가지 형식 모두 같은 sRGB 색 공간을 기술합니다:

Hex (#RRGGBB)는 가장 간결한 형식이며 대부분의 CSS 코드베이스에서 기본 선택입니다. 디자인 도구는 기본적으로 hex로 색상을 복사합니다.

RGB / RGBA는 개별 채널 조작이나 알파 투명도가 필요할 때 최적입니다.

HSL / HSLA는 가장 읽기 쉬운 형식으로, 색상 팔레트와 테마에 적합합니다.

실제로: 정적 색상에는 hex, 투명도에는 rgba(), 동적 색상 시스템에는 hsl().

JavaScript, CSS, Python에서의 Hex to RGB 변환

JavaScript / TypeScript

3자리 약어, 6자리, 8자리(알파 포함) hex 코드를 지원하는 함수:

function hexToRgb(hex) {
  // Remove # if present
  hex = hex.replace(/^#/, '');

  // Handle 3-character shorthand (#F0A -> FF00AA)
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }

  // Handle 4-character shorthand (#F0A8 -> FF00AA88)
  if (hex.length === 4) {
    hex = hex.split('').map(c => c + c).join('');
  }

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  // Handle 8-character hex with alpha (#RRGGBBAA)
  if (hex.length === 8) {
    const a = parseInt(hex.substring(6, 8), 16) / 255;
    return { r, g, b, a: Math.round(a * 100) / 100 };
  }

  return { r, g, b };
}

// Examples
hexToRgb('#FF5733');    // { r: 255, g: 87, b: 51 }
hexToRgb('#3B82F6');    // { r: 59, g: 130, b: 246 }
hexToRgb('#F00');       // { r: 255, g: 0, b: 0 }
hexToRgb('#FF000080');  // { r: 255, g: 0, b: 0, a: 0.5 }

CSS: Hex vs RGB 실전

CSS에서 hex와 RGB는 호환됩니다:

/* These produce the exact same color */
.element-hex   { color: #3B82F6; }
.element-rgb   { color: rgb(59, 130, 246); }

/* Transparency — both are equivalent */
.overlay-hex   { background: #3B82F680; }      /* 50% opacity */
.overlay-rgba  { background: rgba(59, 130, 246, 0.5); }

/* Modern CSS space-separated syntax */
.modern        { color: rgb(59 130 246); }
.modern-alpha  { color: rgb(59 130 246 / 0.5); }

/* CSS custom properties work with any format */
:root {
  --primary: #3B82F6;
  --primary-rgb: 59, 130, 246;
}
.card {
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid var(--primary);
}

Python

Python은 내장 int()로 간단하게 변환합니다:

def hex_to_rgb(hex_color: str) -> tuple[int, int, int]:
    """Convert hex color string to RGB tuple."""
    hex_color = hex_color.lstrip('#')

    # Handle 3-character shorthand
    if len(hex_color) == 3:
        hex_color = ''.join(c * 2 for c in hex_color)

    r = int(hex_color[0:2], 16)
    g = int(hex_color[2:4], 16)
    b = int(hex_color[4:6], 16)

    return (r, g, b)


def rgb_to_hex(r: int, g: int, b: int) -> str:
    """Convert RGB values to hex color string."""
    return f'#{r:02x}{g:02x}{b:02x}'


# Examples
print(hex_to_rgb('#FF5733'))   # (255, 87, 51)
print(hex_to_rgb('#3B82F6'))   # (59, 130, 246)
print(hex_to_rgb('#F00'))      # (255, 0, 0)

print(rgb_to_hex(59, 130, 246))  # #3b82f6
print(rgb_to_hex(255, 87, 51))   # #ff5733

RGB to Hex (JavaScript)

RGB에서 hex로의 역변환:

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => {
      const hex = v.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    })
    .join('');
}

// With alpha support
function rgbaToHex(r, g, b, a = 1) {
  const hex = rgbToHex(r, g, b);
  if (a === 1) return hex;
  const alphaHex = Math.round(a * 255).toString(16).padStart(2, '0');
  return hex + alphaHex;
}

// Examples
rgbToHex(255, 87, 51);        // '#ff5733'
rgbToHex(59, 130, 246);       // '#3b82f6'
rgbaToHex(255, 0, 0, 0.5);   // '#ff000080'

알파 채널: 투명도가 있는 Hex (#RRGGBBAA)와 RGBA

hex와 RGB 모두 알파 채널을 지원합니다. 1.0(또는 FF)=불투명, 0.0(또는 00)=완전 투명.

8자리 hex (#RRGGBBAA)는 색상 채널 뒤에 2자리 알파 값을 추가합니다. 예: #FF000080=50% 불투명도의 빨강.

rgba()는 더 널리 알려진 구문입니다: rgba(255, 0, 0, 0.5). 모던 CSS 구문: rgb(255 0 0 / 0.5).

알파 변환: hex에서 10진수: 255로 나누기. 10진수에서 hex: 255를 곱하고 변환.

/* Common alpha values: hex ↔ decimal */
100% opacity:  FF = 1.0    →  #FF0000FF  =  rgba(255, 0, 0, 1.0)
 90% opacity:  E6 = 0.9    →  #FF0000E6  =  rgba(255, 0, 0, 0.9)
 80% opacity:  CC = 0.8    →  #FF0000CC  =  rgba(255, 0, 0, 0.8)
 70% opacity:  B3 = 0.7    →  #FF0000B3  =  rgba(255, 0, 0, 0.7)
 60% opacity:  99 = 0.6    →  #FF000099  =  rgba(255, 0, 0, 0.6)
 50% opacity:  80 = 0.5    →  #FF000080  =  rgba(255, 0, 0, 0.5)
 40% opacity:  66 = 0.4    →  #FF000066  =  rgba(255, 0, 0, 0.4)
 30% opacity:  4D = 0.3    →  #FF00004D  =  rgba(255, 0, 0, 0.3)
 20% opacity:  33 = 0.2    →  #FF000033  =  rgba(255, 0, 0, 0.2)
 10% opacity:  1A = 0.1    →  #FF00001A  =  rgba(255, 0, 0, 0.1)
  0% opacity:  00 = 0.0    →  #FF000000  =  rgba(255, 0, 0, 0.0)

자주 묻는 질문

hex를 RGB로 변환하는 방법은?

#을 제거하고 3개의 2자리 쌍으로 분할한 후 각 쌍을 16진수에서 10진수로 변환합니다. #3B82F6은 rgb(59, 130, 246)이 됩니다.

hex와 RGB의 차이점은?

hex와 RGB는 다른 숫자 체계로 같은 sRGB 색상을 표현합니다. hex는 간결한 16진수 표기법, RGB는 0-255의 세 10진수를 사용합니다. #FF0000과 rgb(255, 0, 0)은 동일합니다.

hex와 RGB 색상 형식을 이해하는 것은 웹 개발자의 기본 기술입니다. 즉시 변환하려면 저희 도구를 사용하세요.

무료 Hex to RGB 변환기로 즉시 색상을 변환하세요.