RGB HEX 변환기

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

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

주요 기능

RGB HEX 변환기 대안 비교

RGB HEX 변환 예시

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

자주 쓰이는 RGB → HEX 변환

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

RGB HEX 변환기 사용 방법

1. 1

   RGB 입력란에 RGB 튜플 입력하거나 붙여넣기

   어떤 `rgb()` 값이든 RGB 입력란에 떨어뜨리십시오. 최신 공백 구분 `rgb(255 87 51)`, 레거시 콤마 `rgb(255, 87, 51)`, 슬래시를 통한 알파 `rgb(255 87 51 / 0.5)` 또는 `rgba(255, 87, 51, 0.5)` 형식, 또는 백분율 채널 `rgb(100% 34% 20%)`. 본 도구는 HEX를 계산하기 전에 모든 입력 형태를 동일한 내부 RGB 튜플로 정규화합니다. 잘못된 문자, 범위를 벗어난 정수, 또는 형식이 어긋난 구문은 조용한 인라인 오류를 발생시키고, 유효한 RGB는 다른 모든 형식 입력란을 실시간으로 업데이트합니다.

2. 2

   HEX 입력란에서 HEX 코드 읽기

   RGB 입력란 위의 HEX 입력란은 일치하는 HEX 값을 보여 줍니다. 불투명 색상에는 `#FF5733`, 알파가 포함된 색상에는 `#FF573380`(8자리 형식). 출력은 대부분의 브랜드 가이드라인과의 일관성을 위해 기본적으로 대문자 HEX 자릿수를 사용합니다. 소문자(`#ff5733`)는 기계적인 치환 한 번 거리이며 동등하게 유효한 CSS입니다. 변환은 비트 단위로 정확합니다. RGB → HEX → RGB 왕복은 원래 튜플을 한 글자도 다르지 않게 부동소수점 드리프트 없이 복원합니다.

3. 3

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

   각 형식 카드의 오른쪽에는 복사 버튼이 있습니다. 한 번 클릭하면 값이 클립보드로 들어가고, 버튼 레이블이 잠시 "복사되었습니다!"로 바뀌어 알려 줍니다. 복사된 문자열은 앞의 `#`을 포함하므로 CSS 규칙, Figma 색상 입력란, SwiftUI HEX 확장, 또는 Android `colors.xml`에 바로 붙여넣을 수 있습니다. 플랫폼별 구문(SwiftUI `Color(red:green:blue:)`, Compose `Color(0xFF...)`, Tailwind v4 `@theme` 토큰)은 피커 아래의 코드로 복사 섹션을 사용하십시오.

4. 4

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

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

5. 5

   시각적 조정에는 피커 사용

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

자주 발생하는 RGB / HEX 실수

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 모든 채널 값에서 정확하게 동작.

반올림 건너뛰기:
(0.5 * 255).toString(16) → '7f.8'
소수점이 있는 잘못된 HEX 발생.

먼저 정수로 반올림:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
유효한 2자리 HEX 쌍. CSS Color 4 정규화와 일치.

Android 선행 알파 HEX를 CSS에 내보내기:
rgb(255 87 51 / 0.5) → #80FF5733 (Android 형식)
CSS는 alpha=128, R=255, G=87, B=51로 파싱 — 색상이 완전히 잘못됨.

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

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

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

누가 RGB HEX를 사용하나요

Canvas RGB를 CSS HEX로 변환하는 프런트엔드 개발자

Canvas API 그리기 함수는 색상을 RGB 튜플로 보고하고 받아들이지만 (`ctx.fillStyle = 'rgb(255 87 51)'`), 주변 CSS 스타일시트는 HEX 변수를 원합니다 (`--color-fill: #FF5733`). RGB를 한 번 붙여넣으면 일치하는 HEX가 만들어져 CSS 사용자 정의 속성에 떨어뜨릴 준비가 됩니다. canvas로 렌더링된 차트나 데이터 시각화에서 정적 UI에 재사용할 브랜드 색상을 추출할 때 유용합니다.

Photoshop RGB를 Figma HEX로 변환하는 디자이너

Adobe의 컬러 피커(Photoshop, Illustrator, InDesign 안)는 세 채널 박스에 걸쳐 RGB를 0-255 정수로 보고합니다. Figma는 대조적으로 디자인 패널에서 기본적으로 색상 값을 HEX로 표시합니다. Photoshop 정수 세 개를 여기에 `rgb(...)`로 붙여넣고, HEX 출력을 복사해 Figma의 색상 입력란에 떨어뜨리십시오. 스크린샷과 eyedropper 우회 없이 원래의 Photoshop 색상과 정확히 일치합니다.

LED 센서 RGB를 웹 HEX로 변환하는 하드웨어 개발자

주소 지정 가능 LED 스트립, 색상 센서, 하드웨어 RGB 카메라는 모두 채널 값을 0-255 정수로 보고합니다. 측정값이 웹 대시보드를 구동해야 할 때 ("램프가 현재 이 색으로 빛나고 있습니다"), CSS `style="background: ..."` 속성이 기대하는 것은 일치하는 HEX 코드입니다. 센서의 RGB 트리플을 붙여넣고, HEX를 복사해, 대시보드 마크업에 꽂으십시오.

Unity 색상을 웹 목업으로 내보내는 게임 개발자

Unity의 `Color`와 Unreal의 `FLinearColor` 생성자는 정규화된 0-1 부동소수점을 받습니다. 각각에 255를 곱하면 일치하는 RGB 정수가 나옵니다. 결과로 나온 `rgb(...)`를 여기에 붙여넣고, HEX를 복사해, 게임 내 강조 색상과 정확히 일치해야 하는 웹 목업이나 마케팅 사이트에 떨어뜨리십시오. 동시에 보이는 OKLCH 뷰는 지각 명도도 노출해, 목업 팔레트를 게임의 밝기 수준에 맞게 손으로 조정할 수 있게 해 줍니다.

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

브랜드 스타일 가이드가 색상을 RGB 정수 트리플로 보고하지만 ("브랜드 주황은 RGB 255 / 87 / 51") WCAG 감사 도구가 HEX 코드를 원할 때, 이 변환기가 다리 역할을 합니다. RGB 트리플을 붙여넣고, HEX를 복사해, 감사에 통과시키십시오. 본 도구의 WCAG와 APCA 명암비 배지도 한 단계로 판정을 노출하므로, 세 개의 별도 도구 사이를 오갈 필요가 없습니다.

rgba()를 8자리 HEX로 이주시키는 이메일 개발자

최신 이메일 클라이언트 HTML은 알파 포함 색상에 8자리 HEX (`#FF573380`)를 지원하지만, 레거시 템플릿은 종종 동일한 값을 `rgba(255, 87, 51, 0.5)`로 저장합니다. 여기에 rgba()를 붙여넣고 8자리 HEX 출력을 읽으면 이주가 기계적으로 진행됩니다. HEX 입력란은 50% 알파의 경우 `#FF573380`을 보여 줍니다. 레거시 `rgba()` 형식은 여전히 필요한 폴백 컨텍스트를 위해 RGB 입력란에 그대로 남습니다.

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

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

HEX 명세에 대해 픽셀 색상을 단언하는 QA 엔지니어

시각 회귀 테스트는 때때로 픽셀 색상을 RGB 정수로 캡처하지만 (`expect(pixel).toMatchRgb([255, 87, 51])`), 기반 명세는 HEX로 주어집니다 ("버튼은 `#FF5733`으로 렌더링되어야 함"). 캡처된 RGB를 여기에 붙여넣으면 일치하는 HEX가 만들어져, QA 엔지니어가 명세와 직접 비교할 수 있습니다. 변환의 비트 단위 정확성은 부동소수점 드리프트 차이로 인해 비교가 흔들리지 않음을 뜻합니다.

RGB HEX 수학과 직렬화

toString(16).padStart(2, '0')이 한 줄짜리 구현

전체 RGB → HEX 변환은 채널당 한 식에 들어맞습니다. `value.toString(16).padStart(2, '0')`. JavaScript의 `toString(16)`은 10진 정수를 16진수 문자열 표현으로 변환합니다. `padStart(2, '0')`은 잊기 쉬운 디테일입니다. 빠뜨리면 채널 값 5가 `'05'`가 아니라 `'5'`로 직렬화되어, 다른 채널과 합쳤을 때 `#55733` 같은 잘못된 5자 HEX가 만들어집니다. 표준 관용구는 `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')` 뒤에 `'#'` 접두사를 붙이는 것입니다.

백분율 정규화: × 255 / 100 뒤 반올림

CSS Color 4는 `rgb()`에서 백분율 채널을 허용합니다. `rgb(100% 34% 20%)`는 `rgb(255 87 51)`과 동등합니다. 정규화 규칙은 `Math.round(percent × 255 / 100)`입니다. `50% × 255 / 100 = 127.5`는 128로 반올림됩니다(.5에서 멀어지는 은행가의 반올림). 동일한 규칙이 백분율로 표현된 알파에도 적용됩니다 (`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`). 정수와 백분율 형식은 정규화 후 동일한 HEX 출력을 만들어 냅니다. 본 도구는 재정규화 뒤 RGB 입력란에 정규 정수 형식을 노출합니다.

알파의 HEX화: 255로 곱하고, 반올림하고, 후행 쌍으로 인코딩

알파 포함 RGB (`rgb(255 87 51 / 0.5)`)는 알파를 255로 곱하고, 가장 가까운 정수로 반올림하고, RGB 뒤에 덧붙는 네 번째 HEX 쌍으로 인코딩해 8자리 HEX를 내보냅니다. `0.5 × 255 = 127.5`, 128로 반올림 = `0x80`, 출력 `#FF573380`. CSS Color 4 명세는 이 변환에 은행가의 반올림(반은 짝수로 반올림)을 사용하며, 본 도구도 이를 따릅니다. 알파가 정확히 1일 때는 스타일시트에 후행 `FF` 쌍이 새지 않도록 8자리 형식이 6자리로 되돌아갑니다.

RGB 입력: CSS Color 4 공백 구분과 레거시 콤마 둘 다 허용

파서는 최신 CSS Color 4 형식 `rgb(255 87 51)`과 레거시 CSS 1 형식 `rgb(255, 87, 51)` 모두를 받아들입니다. 최신 형식은 모두 공백 구분과 알파용 슬래시를 사용하는 다른 CSS Color 4 함수형 표기법(`hsl()`, `lab()`, `oklch()`, `color()`)과 정렬됩니다. 레거시 콤마 형식은 모든 에버그린 브라우저에서 여전히 지원되며 구형 코드베이스에서 흔합니다. 두 형식 모두 동일한 HEX 출력을 만들어 냅니다. 본 도구의 HEX 직렬화기는 어떤 입력 형태가 들어왔는지 신경 쓰지 않습니다.

왕복 안정성을 위한 OKLCH 내부 단일 사실 출처

이 스포크가 RGB → HEX를 구체적으로 타기팅하더라도, 공유된 기반 변환기는 내부적으로 정규 색상을 OKLCH 트리플로 유지합니다. 덕분에 RGB → HEX → HSL → OKLAB → CMYK → RGB 왕복이 단계별 부동소수점 드리프트 없이 이뤄집니다. HSL이나 sRGB를 피벗으로 거치는 레거시 변환기는 각 변환마다 반올림 오차를 누적합니다. (OKLAB이 아닌) OKLCH 선택은 색조(hue)를 안정적인 축으로 보존하므로, 색조 슬라이더를 드래그해도 회색을 통과해 크로스페이드되는 일이 없습니다. Björn Ottosson의 2020년 OKLAB 논문에 따른 것입니다.

채널 인코딩: 8비트 부호 없음, sRGB 감마 인코딩

각 RGB 채널은 IEC 61966-2-1(1996)이 정의한 sRGB 색 공간에 인코딩된 8비트 부호 없는 정수(0-255)입니다. 값은 *감마 인코딩되어* 있습니다. 즉, 채널 값과 지각 밝기의 관계가 비선형이며, 조각별 sRGB 전송 함수(0 근처의 작은 선형 구간을 가진 대략 2.4 지수)를 따릅니다. 이것은 색상 수학을 할 때 중요합니다. 감마 인코딩 형식의 두 RGB 값을 평균하면 잘못된 지각 중간점이 나옵니다. 올바른 색상 블렌딩을 위해서는 먼저 선형 RGB로 디코딩하고(CSS Color 4 §11.2), 평균을 낸 뒤, 다시 인코딩하십시오. 본 도구의 OKLCH 내부 모델이 이를 투명하게 만들어 줍니다.

RGB / HEX 작업 모범 사례

브랜드 가이드라인에는 대문자 HEX, 코드에는 소문자 선호

브랜드 가이드라인, 마케팅 PDF, 디자이너 대상 문서는 일반적으로 시각적 일관성을 위해 대문자 HEX (`#FF5733`)를 사용합니다. 전체 대문자 외양이 브랜드 식별자로 읽힙니다. 코드(CSS, JSON, JavaScript 소스)는 관례적으로 소문자 (`#ff5733`)를 사용합니다. 소문자가 입력하기 더 빠르고 자동 생성된 린터 출력에서 더 흔하기 때문입니다. 두 형식 모두 유효한 CSS이며 동일하게 파싱됩니다. 각 컨텍스트에 하나를 선택해 일관성을 유지하십시오. 본 도구는 기본적으로 대문자를 내보냅니다. 기계적인 치환 한 번으로 소문자로 뒤집을 수 있습니다.

알파 < 1일 때만 8자리 HEX 내보내기

알파가 1(완전 불투명)일 때는 6자리 형식으로 되돌아가십시오. 후행 `FF` 쌍 (`#FF5733FF`)은 법적인 CSS이지만 스타일시트를 시각적으로 어지럽히고 일부 레거시 파서가 잘못 렌더링하도록 혼동시킵니다. 8자리 형식은 알파가 의미 있게 투명할 때만 등장해야 합니다. 본 도구는 이 규칙을 자동으로 따릅니다. 불투명 색상은 6자리 HEX를, 알파 포함 색상은 8자리 HEX를 내보내며, 컷오프는 정확합니다 (알파 = 1.0이면 6자리, 알파 = 0.9999면 데이터를 보존하기 위해 8자리).

색상 수학에서 RGB 채널을 직접 평균하지 말 것

RGB 채널은 감마 인코딩되어 있습니다. 두 RGB 값을 평균하면 잘못된 지각 중간점이 나옵니다. `(255, 0, 0)`을 `(0, 255, 0)`과 평균하면 `(127, 127, 0)`이 나오며, 이는 예상한 시각적으로 밝은 노랑 중간점이 아니라 탁한 진한 올리브색입니다. 올바른 색상 블렌딩을 위해서는 먼저 선형 RGB로 디코딩하고(CSS Color 4 §11.2), 평균을 낸 뒤, 다시 인코딩하십시오. 더 나은 방법은 지각 거리가 균일한 OKLAB이나 OKLCH에서 작업하는 것입니다. 디자인 시스템 팔레트 생성기가 정확히 이렇게 합니다.

CSS 변수에는 HEX, 하드웨어에는 RGB 선호

CSS 사용자 정의 속성이나 Tailwind 설정 토큰을 작성할 때는 HEX를 선호하십시오. 더 간결하고 JSON이나 YAML에 깔끔하게 들어맞습니다. 소비 코드가 채널별 산술(canvas 호출, 이미지 조작, 하드웨어 LED 드라이버, OpenGL 색상 속성)을 수행한다면, RGB 정수 형식이 소비하기 더 빠릅니다. 두 형식은 동일한 색상을 기술합니다. 선택은 정확성이 아니라 누가 읽고 쓰느냐에 관한 것입니다. 본 도구의 동시 입력란 뷰는 두 형식 모두를 동등하게 저렴하게 만들어 줍니다.

255로 곱하기 전에 알파 범위 검증

자체 RGB → 8자리 HEX 변환기를 구현할 때는 `× 255` 단계 전에 알파 부동소수점이 `[0, 1]` 안에 들어가는지 검증하십시오. 범위를 벗어난 알파(음수 또는 > 1)는 일부 파서가 받아들이고 일부가 거부하는 잘못된 HEX 쌍을 조용히 만들어 냅니다. 취약한 실패 모드입니다. 먼저 클램프하고(`Math.max(0, Math.min(1, alpha))`), 곱하고, 반올림하고, HEX로 인코딩하십시오. 본 도구는 망가진 HEX 문자열을 내보내는 대신 범위를 벗어난 알파에 대해 조용한 인라인 오류를 노출합니다.

실시간 색상 결정 공유에 URL 해시 사용

모든 색상 변경은 URL 해시를 `#hex=ff5733` 형태로 자동 업데이트합니다. URL을 Slack 스레드나 GitHub 이슈에 복사하면, 그것을 여는 모든 사람이 동일한 HEX의 동일한 색상에 도달합니다. 채팅에 RGB 튜플을 붙여넣는 것보다 더 안정적이며(수신자가 값을 수작업으로 입력할 때 가끔 콤마를 잘못 치거나 채널을 빠뜨립니다), 디자인 리뷰 스레드가 "화요일에 논의한 그 주황색"이 아니라 정확한 색상을 참조할 수 있게 해 줍니다. 해시는 서버로 전송되지 않습니다.

자주 묻는 질문