HEX RGB 변환기

HEX RGB 변환기란 무엇인가요?

// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
  let h = input.trim().replace(/^#/, '');
  // Expand 3-digit and 4-digit shorthand by duplicating each digit
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map(c => c + c).join('');
  }
  if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
    throw new Error(`Invalid hex: ${input}`);
  }
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  return [r, g, b, a];
}

console.log(parseHex('#FF5733'));   // [255, 87, 51, 1]
console.log(parseHex('#F73'));       // [255, 119, 51, 1]
console.log(parseHex('#FF573380'));  // [255, 87, 51, 0.5019607843137255]

주요 기능

HEX RGB 변환기 대안 비교

HEX RGB 변환 예시

#FF5733

#3b82f6

#FF573380

#F73

자주 쓰이는 HEX → RGB 변환

가장 자주 변환되는 10개의 HEX 코드와 그 RGB 등가물의 레퍼런스 표입니다. 순수 원색, 순수 보색, 그리고 Tailwind 팔레트에서 가져온 실제 브랜드 색상 두 개를 포함합니다.

HEX RGB 변환기 사용 방법

1. 1

   HEX 입력란에 HEX 코드 붙여넣기

   어떤 HEX 값이든 HEX 입력란에 떨어뜨리십시오. 앞의 `#` 포함 여부, 3자리 축약 (`#F73`), 6자리 완전형 (`#FF5733`), 4자리 알파 축약 (`#F738`), 또는 8자리 알파 완전형 (`#FF5733CC`) 모두 받아들입니다. 본 도구는 다섯 가지 입력 형태를 모두 내부적으로 동일한 정규 색상으로 정규화합니다. 대소문자는 무관합니다 (`#ff5733`과 `#FF5733`은 동일하게 파싱됩니다). 잘못된 문자나 자릿수는 조용한 인라인 오류를 발생시키고, 유효한 HEX는 다른 모든 형식 입력란을 실시간으로 업데이트합니다.

2. 2

   RGB 입력란에서 RGB 튜플 읽기

   HEX 입력란 아래의 RGB 입력란은 CSS Color 4의 최신 공백 구분 구문으로 일치하는 `rgb()` 값을 보여 줍니다. 불투명 색상에는 `rgb(255 87 51)`, 알파가 포함된 색상에는 `rgb(255 87 51 / 0.5)`. 각 채널은 0-255 정수이며, 알파는 0-1로 정규화됩니다. 값은 비트 단위로 정확합니다. `parseInt('FF', 16)`이 부동소수점 산술 없이 255를 반환하므로, HEX로 되돌리는 왕복 변환이 원래 입력을 한 글자도 다르지 않게 만들어 냅니다.

3. 3

   복사를 클릭해 RGB 문자열 가져오기

   각 형식 카드의 오른쪽에는 복사 버튼이 있습니다. 한 번 클릭하면 값이 클립보드로 들어가고, 버튼 레이블이 잠시 "복사되었습니다!"로 바뀌어 알려 줍니다. 복사된 문자열은 정규 CSS Color 4 구문 (`rgb(255 87 51)`)입니다. 타깃이 레거시 콤마 형식을 요구한다면 변환은 기계적입니다 (공백을 `, `로 바꾸면 됩니다). 플랫폼별 출력(SwiftUI, Compose, Flutter, Tailwind v4)은 피커 아래의 코드로 복사 섹션을 사용하십시오.

4. 4

   함께 표시되는 형식: HSL, OKLCH, OKLAB, CMYK, 이름 있는 색상

   붙여넣은 동일한 HEX가 다른 형식 입력란도 함께 채웁니다. 레거시 CSS용 HSL, 지각 균일 디자인 시스템용 OKLCH와 OKLAB, 디자이너 색상 피커 작업 흐름용 HSV와 HWB, 인쇄 견적용 CMYK, 그리고 문서와 산문용 가장 가까운 CSS 이름 있는 색상까지. HEX → RGB 한 방향에 묶이지 않습니다. Tailwind v4 `@theme` 블록에 떨어뜨릴 OKLCH 트리플이 함께 필요하다면, OKLCH 입력란에 자체 복사 버튼과 함께 바로 노출되어 있습니다.

5. 5

   시각적 조정에는 피커 사용

   형식 그리드 아래에는 시각적 탐색용으로 SL 정사각형 + 색조 슬라이더 + 알파 슬라이더가 있습니다. 어떤 컨트롤이든 드래그하면 시작했던 HEX와 RGB를 포함한 모든 텍스트 입력란이 실시간으로 업데이트됩니다. Chromium 기반 브라우저(Chrome, Edge, Brave)에서는 EyeDropper 버튼이 네이티브 `EyeDropper` API를 활성화해, 브라우저 창 바깥을 포함한 화면 어디든 픽셀을 샘플링할 수 있습니다. 다른 앱의 UI에서 HEX를 먼저 스크린샷 없이 캡처하고 싶을 때 유용합니다.

자주 발생하는 HEX / RGB 실수

#F73이 #000F73으로 왼쪽 패딩된다고 가정:
expected: 진한 파랑 rgb(0, 15, 115)
actual:   밝은 주황 rgb(255, 119, 51)

3자리 축약은 각 자리를 복제:
#F73 → #FF7733 → rgb(255, 119, 51)
본 도구의 실시간 확장이 입력 즉시 검증.

padStart 건너뛰기:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
잘못된 5자 HEX 발생.

padStart(2, '0') 사용:
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
유효한 6자 HEX. 0-255 모든 채널 값에서 정확하게 동작.

CSS 8자리 HEX를 레거시 Android Color.parseColor()에 붙여넣기:
#FF573380이 #AARRGGBB로 해석됨
→ 색상과 알파가 모두 완전히 잘못됨.

타깃 플랫폼이 문서화한 형식 사용:
Android Compose: Color(0xFFFF5733), 알파가 첫 바이트
CSS: #FF573380, 알파가 마지막 바이트
순서 재정렬 없이 둘 사이를 그대로 옮기지 말 것.

감마 인코딩 RGB를 직접 평균:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
밝은 노랑이 아니라 진한 올리브색으로 보임.

선형 RGB에서 평균:
디코딩 → 선형 RGB → 평균 → 재인코딩 → rgb(188, 188, 0)
물리적 빛 혼합이 만들어 내는 결과와 일치하는 시각적으로 밝은 노랑.

누가 HEX RGB를 사용하나요

Figma HEX를 canvas RGB 호출로 변환하는 프런트엔드 개발자

Figma는 HEX를 내보내지만, `CanvasRenderingContext2D.fillStyle`은 HEX와 `rgb()`를 모두 받습니다. 그리고 채널별 산술(그래디언트, 블렌딩, 이미지 조작)을 수행할 때는 매번 HEX를 다시 파싱하는 것보다 채널 정수를 직접 갖는 편이 더 빠릅니다. HEX를 한 번 붙여넣고, `rgb(255 87 51)` 튜플을 복사해 canvas 호출에 연결하십시오. 사용자 측에 HEX 파싱 코드는 전혀 필요 없습니다.

웹 HEX를 Photoshop / Illustrator RGB로 옮기는 디자이너

Adobe의 컬러 피커는 세 채널 박스에 걸친 0-255 정수를 네이티브 입력으로 받습니다. 웹 HEX를 본 도구에 붙여넣고, R / G / B 정수를 읽어 Photoshop에 입력하십시오. 스크린샷과 eyedropper 우회 없이 원래의 웹 색상과 정확히 일치합니다. 디자이너가 인쇄를 의식한 Adobe 레이아웃 앱에서 웹 색상을 시안으로 만들 때 유용합니다.

브랜드 HEX를 Unity / Unreal RGB API에 로드하는 게임 개발자

Unity의 `Color`와 Unreal의 `FLinearColor` 모두 0-1 정규화 부동소수점을 받습니다. 브랜드 HEX를 붙여넣고, 0-255 정수를 읽어 255로 나누거나 (또는 코드로 복사를 통해 도구의 정규화 부동소수점 출력을 사용하십시오). 변환은 기계적이지만 손으로 할 때 실수하기 쉽습니다. `(1.0, 0.341, 0.2)`를 기대하는 생성자에 `(255, 87, 51)`을 입력하면 클립된 흰색과 당황한 트윗이 나옵니다. 본 도구는 두 형식을 모두 노출합니다.

주소 지정 가능 LED 스트립을 프로그래밍하는 하드웨어 개발자

WS2812, APA102, 그리고 다른 주소 지정 가능 RGB LED 스트립은 LED당 0-255 정수 채널을 받습니다. 벽면 제품 디스플레이용 브랜드 HEX를 붙여넣고, RGB 트리플을 읽어 컨트롤러의 색상 배열에 떨어뜨리십시오. 마케팅 팀이 HEX를 지정하고 펌웨어 엔지니어가 `pixels.setPixelColor(i, r, g, b)` 호출용 채널 값을 필요로 할 때 유용합니다.

브랜드 색상 가독성을 감사하는 접근성 엔지니어

WCAG 2.1 명암비 검사는 내부적으로 RGB 입력을 받습니다. 브랜드 HEX를 붙여넣으면 일치하는 RGB와, 흰색·검은색에 대한 WCAG 비율, 그리고 APCA Lc 점수를 한 화면에서 얻을 수 있습니다. 브랜드 색상이 본문 텍스트의 4.5:1 하한선을 통과하지 못한다면, 옆에 있는 지각 균일 OKLCH 입력란이 브랜드 정체성을 잃지 않은 채 명암비가 통과할 때까지 L을 끌어올리기 쉽게 해 줍니다.

인라인 RGB로 이메일 템플릿을 임베드하는 디자이너

일부 이메일 클라이언트(Windows의 Outlook, 구형 모바일 Gmail)는 HTML 속성 안의 HEX를 일관되지 않게 파싱합니다. ``이 특정 플랫폼에서 검은색으로 렌더링될 수 있습니다. 안정적인 폴백은 인라인의 동등한 RGB `rgb(255, 87, 51)` 형식입니다. 브랜드 HEX를 붙여넣고, RGB 문자열을 레거시 콤마 구문으로 복사해(최신 공백 형식에서 수작업 치환), 이메일 템플릿의 `style` 속성에 떨어뜨리십시오.

브랜드 토큰을 두 형식으로 문서화하는 개발자

디자인 토큰 문서는 종종 동일한 색상을 두 형식으로 보여 줍니다. CSS 코드 블록용 HEX, 그리고 산문 주석용 RGB ("브랜드 빨강은 `#FF5733`이며, RGB 255 / 87 / 51과 동등합니다"). 두 값을 나란히 볼 수 있으면 문서 작성자가 두 도구를 돌리지 않고 한 번에 각각을 복사할 수 있습니다. 공유 가능한 URL 해시는 또한 독자가 논의 중인 정확한 색상으로 클릭해 도달할 수 있게 해 줍니다.

픽셀 색상 스냅샷을 검증하는 QA 엔지니어

시각 회귀 테스트는 종종 렌더링된 픽셀에 대해 특정 RGB 값을 단언합니다 (`expect(pixel.r).toBe(255)`). 명세가 HEX로 주어질 때 ("버튼은 `#FF5733`으로 렌더링되어야 함"), QA 엔지니어는 단언을 작성하기 위해 일치하는 RGB 정수가 필요합니다. HEX를 붙여넣고, R / G / B를 읽어, 테스트에 연결하십시오. 변환의 비트 단위 정확성은 부동소수점 드리프트 차이로 인해 테스트가 흔들리지 않음을 뜻합니다.