RGB에서 Hex로의 정확한 변환 – 이 페이지의 핵심
이 페이지는 빨강, 초록, 파랑 각 채널의 0–255 사이 십진수 값을 입력받아 여섯 자리 16진수 색상 코드(예: #4F46E5)를 즉시 출력합니다. 단순히 숫자가 바뀌는 것 이상으로, 입력과 동시에 색상 견본이 표시되고 HSL, HSV, CMYK, LAB 등 다른 색상 형식도 함께 갱신됩니다. 변환 버튼은 존재하지 않습니다. 어떤 필드든 값을 수정하는 순간 나머지 모든 필드가 실시간으로 업데이트됩니다.
이 도구의 가장 중요한 특징은 RGB와 Hex가 같은 sRGB 색 공간을 사용한다는 점입니다. 따라서 변환 과정에서 색 영역이 잘리거나 근사치가 발생하지 않으며, 언제나 정확히 같은 색상이 유지됩니다. 24비트 트루 컬러 디스플레이에서 보이는 바로 그 색이 그대로 16진수로 옮겨집니다.
RGB 색상 모델과 0–255 값의 의미
RGB는 빛의 삼원색(Red, Green, Blue)을 더해서 색을 만드는 가산 혼합 모델입니다. 각 채널은 0(꺼짐)에서 255(최대 밝기)까지의 정수로 표현되며, 이 범위는 1바이트(8비트)로 나타낼 수 있는 값입니다. 0,0,0은 완전한 검정, 255,255,255는 흰색이 됩니다. 256×256×256 = 16,777,216가지 색상을 표현할 수 있으며, 이는 현재 대부분의 화면이 지원하는 sRGB 공간의 표준입니다.
16진수 색상 코드의 구조와 표기법
16진수 색상 코드는 반드시 # 기호로 시작하며, 그 뒤에 여섯 자리의 16진수 숫자(0–9, A–F)가 옵니다. 앞의 두 자리는 빨강, 가운데 두 자리는 초록, 마지막 두 자리는 파랑을 나타냅니다. 예를 들어 #4F46E5에서 4F = 79, 46 = 70, E5 = 229입니다. 대소문자는 구분하지 않지만, 일반적으로 대문자로 표기합니다.
이 도구는 여섯 자리 출력만 제공하며, 세 자리 단축 표기(#ABC → #AABBCC)로 자동 축약하지 않습니다. 단, 입력 필드에서 세 자리 단축 코드를 입력하면 내부적으로 여섯 자리로 확장하여 처리합니다. 알파 채널(투명도)은 기본적으로 포함되지 않지만, 여덟 자리 16진수(예: #4F46E580)를 입력하면 알파 값이 있는 것으로 인식되어 해당 색상도 함께 표시합니다.
변환 수학: 0–255에서 FF로
각 십진수 채널 값을 16진수 두 자리로 바꾸는 방법은 간단합니다.
- 값을 16으로 나눕니다. 몫(0–15)이 첫 번째 자리, 나머지(0–15)가 두 번째 자리가 됩니다.
- 10–15는 각각 A, B, C, D, E, F로 표시합니다.
- 이 두 자리를 붙입니다.
예제: 빨강 값 79
- 79 ÷ 16 = 4 (몫) … 15 (나머지) → 4와 F →
4F
초록 값 70 - 70 ÷ 16 = 4 (몫) … 6 (나머지) →
46
파랑 값 229 - 229 ÷ 16 = 14 (몫) … 5 (나머지) → E와 5 →
E5
따라서 RGB(79, 70, 229)는 #4F46E5가 됩니다. 255는 FF (15×16+15), 0은 00입니다. 이 변환은 항상 정확하며 역으로도 동일합니다.
입력 형식과 오류 처리 규칙
RGB 값은 세 개의 숫자를 쉼표 또는 공백으로 구분하여 입력합니다. 예: 79, 70, 229 또는 79 70 229. 각 숫자에는 앞에 0을 붙여도 됩니다(예: 079, 070, 229). 입력값이 0–255 범위를 벗어나거나 형식이 맞지 않으면 다음과 같은 오류 메시지가 표시됩니다:
“Enter RGB as three numbers 0–255, like 79, 70, 229.”
소수점이나 음수, 문자가 포함된 경우에도 동일한 오류가 나타납니다. 모든 변환과 표시는 사용자의 브라우저에서만 처리되며, 어떤 데이터도 서버로 전송되지 않습니다.
이 도구가 필요한 사람들
- 프런트엔드 개발자 – CSS의
color나background-color속성에 16진수 코드를 사용해야 할 때, 갖고 있는 RGB 값을 바로 변환합니다. - UI/UX 디자이너 – 포토샵, GIMP, 브라우저 개발자 도구에서 추출한 RGB 값을 디자인 핸드오프 도구나 코드로 옮길 때 유용합니다.
- 그래픽 디자이너 – 웹 에셋 제작 시 RGB 기반 프로토타입과 최종 16진수 코드 간의 일관성을 유지해야 합니다.
- 학생이나 취미로 색상을 공부하는 사람 – 디지털 색상의 작동 방식, 십진수와 16진수 표현 간의 관계를 이해하는 데 도움이 됩니다.
자주 묻는 질문 (FAQ)
Q: 왜 세 자리 단축 코드(#ABC)를 출력하지 않나요?
A: 모든 색상을 고유하게 표현하기 위해 여섯 자리를 유지합니다. 단축 코드는 두 자리씩 같은 값이 반복될 때만 사용 가능하며(예: #AA22CC → #A2C), 이 도구는 입력에서 단축 코드를 받아들이지만 자동 축약은 하지 않습니다.
Q: 알파 채널(투명도)이 있는 16진수를 만들 수 있나요?
A: 이 도구는 RGB 입력만 받으므로 알파는 포함되지 않습니다. 여덟 자리 Hex를 직접 입력하면 해당 알파 값을 인식하여 표시해 주지만, RGB 입력만으로는 여섯 자리 코드만 생성됩니다. 알파가 필요하면 별도로 값을 더하거나 CSS의 rgba() 함수를 사용해야 합니다.
Q: 범위를 벗어난 값을 입력하면 어떻게 되나요?
A: (0–255) 범위를 벗어난 숫자가 하나라도 있으면 변환을 수행하지 않고 위의 오류 메시지를 표시합니다. 잘못된 입력은 무시되지 않습니다.
Q: 이 도구는 인터넷이 없어도 작동하나요?
A: 예. 모든 코드는 브라우저 안에서만 실행되며, 페이지를 한 번 로드한 후에는 오프라인 상태에서도 사용할 수 있습니다.
Q: RGB와 Hex 변환이 왜 정확한가요?
A: 두 형식이 모두 같은 sRGB 색 공간을 사용하기 때문입니다. 8비트 채널 값을 16진수로 바꾸는 데 손실이 전혀 없으며, 역변환도 완전히 동일합니다. CMYK나 다른 색 공간으로의 변환과 달리 근사나 보정이 필요하지 않습니다.
Q: 입력할 때 쉼표와 공백 중 어떤 것을 써야 하나요?
A: 둘 다 가능합니다. 79 70 229처럼 공백만 사용해도 인식됩니다. 하지만 79,70,229처럼 쉼표만으로 구분하는 것이 더 명확하며, 대부분의 사용자에게 권장됩니다.