HEX 색상을 RGB 값으로 변환하는 방법

Q: HEX 코드 앞에 #을 꼭 입력해야 하나요?

# 은 선택 사항입니다. #336699 처럼 입력하거나 336699 처럼 앞의 기호를 생략해도 변환할 수 있습니다.

Q: 색상 코드를 입력하지 않으면 어떻게 되나요?

입력란을 비워 두면 기본값 #ff0000 이 사용됩니다. 특정 색상을 변환하려면 지원되는 3자리 또는 6자리 HEX 값을 입력하세요.

3자리 또는 6자리 HEX 색상 코드를 입력하면 RGB 채널 숫자와 여러 색상 표기 형식으로 변환할 수 있습니다. 앞의 #은 생략할 수 있습니다.

HEX 색상을 RGB로 바꾸기 전에 알아둘 점

HEX 색상 코드는 웹 디자인, 화면 시안, 그래픽 작업에서 색을 표시할 때 자주 사용되는 표기입니다. 하지만 RGB 값을 요구하는 작업에서는 16진수 문자열을 빨강, 초록, 파랑 채널의 숫자로 바꿔 확인해야 합니다. 이 도구는 입력한 HEX 색상 값을 RGB 관련 정보로 변환하는 데 사용할 수 있습니다. 3자리와 6자리 표기를 지원하며, 앞에 #이 있는 형태와 없는 형태를 모두 받아들입니다.

예를 들어 #336699처럼 입력하거나 336699처럼 입력할 수 있습니다. 짧은 #369 표기도 사용할 수 있습니다. 입력을 생략한 상태라면 기본값 #ff0000이 사용되므로, 별도의 색상 코드를 준비하지 않고 기본 변환 결과의 형식을 살펴볼 수도 있습니다. 반대로 특정 색상을 확인하려는 경우에는 변환할 값을 입력하는 편이 적절합니다.

이 도구의 결과는 단순히 한 가지 숫자만 보여주는 데 그치지 않습니다. RGB의 빨강, 초록, 파랑 채널 숫자를 확인할 수 있고, 같은 색상을 다른 표기 방식으로 옮겨 적을 때 참고할 수 있는 결과도 함께 확인할 수 있습니다. 따라서 디자인 시안의 색을 RGB 기반 작업에 전달하거나, 여러 표기 형식 중 필요한 형태를 골라 확인할 때 활용할 수 있습니다.

입력부터 변환 결과 확인까지

먼저 변환하려는 색상 코드를 준비합니다. 6자리 HEX 값은 #336699 또는 336699처럼 적을 수 있습니다. 앞의 #은 입력에 포함해도 되고 생략해도 됩니다. 3자리 표기를 가지고 있다면 #369 또는 369처럼 입력할 수 있습니다. 색상 코드를 아직 정하지 않았다면 입력을 비워 기본값을 사용할 수도 있습니다.
도구의 색상 입력란에 준비한 값을 입력합니다. 기존 값이 표시되어 있다면 변환하려는 값으로 바꿉니다. 3자리 표기는 변환 과정에서 각 숫자가 확장되어 6자리 색상 값으로 처리됩니다. 따라서 짧은 표기를 임의로 다른 문자열로 바꾸기보다, 지원되는 형식 그대로 입력하는 편이 좋습니다. #을 생략한 값도 변환 전에 필요한 방식으로 처리됩니다.
입력 내용을 확인한 뒤 화면의 변환 동작을 실행합니다. 입력이 유효하면 결과 영역에서 RGB 채널 숫자와 관련 표기 결과를 확인할 수 있습니다. 필요한 값이 숫자라면 빨강, 초록, 파랑 채널을 확인하고, 문자열을 옮겨 적어야 한다면 표시된 HEX 또는 RGB 형식을 선택합니다. 백분율이 필요한 작업에서는 백분율 RGB 결과를 확인합니다.
결과가 실패로 표시되면 입력 문자열을 다시 살펴봅니다. 지원되는 HEX 길이는 3자리 또는 6자리이며, 값에는 16진수로 사용할 수 있는 문자가 필요합니다. 길이가 다른 값이나 16진수가 아닌 문자가 들어간 값은 변환된 색상 값으로 처리되지 않습니다. 입력을 지원되는 길이로 고치고 불필요한 기호를 제거한 다음 다시 실행합니다.
결과를 다른 문서나 디자인 작업에 옮기기 전에는 필요한 표현의 구분 방식을 확인합니다. 이 도구는 대문자 HEX 표현, 쉼표로 구분한 RGB 표현, 공백으로 구분한 RGB 표현, 백분율 RGB 표현을 함께 제공합니다. 숫자 세 개가 필요한지, 쉼표가 들어간 문자열이 필요한지, 공백으로 나뉜 문자열이 필요한지에 따라 해당 결과를 선택하면 됩니다.

결과를 읽고 입력 범위를 판단하는 방법

정상 입력의 결과에서는 빨강, 초록, 파랑에 해당하는 RGB 채널의 숫자 값을 확인할 수 있습니다. 세 채널은 하나의 색상을 구성하는 관련 값이므로, RGB 값을 다른 작업에 전달할 때는 채널의 이름과 숫자를 함께 확인하는 것이 좋습니다. 결과에 표시된 숫자는 입력한 HEX 색상을 RGB 방식으로 읽은 값이며, 입력 문자열 자체를 그대로 보여주는 항목과는 구분해서 보아야 합니다.

결과에는 대문자로 표시된 HEX 표현도 제공됩니다. 입력을 소문자로 작성했거나 #을 생략했더라도, 결과에 표시되는 표현은 입력 형식과 다를 수 있습니다. 이 차이는 변환 실패를 뜻하지 않습니다. 특히 #이 있는 값과 없는 값은 모두 입력할 수 있으므로, 접두사의 유무만으로 두 입력이 서로 다른 색상이라고 판단하지 않아도 됩니다.

3자리 HEX를 입력한 경우에는 각 숫자가 확장된 뒤 처리됩니다. 따라서 짧은 입력을 확인할 때는 원래 입력과 결과에 표시된 HEX 표현을 함께 보는 편이 이해에 도움이 됩니다. 결과를 다른 곳에 복사할 때는 원래의 3자리 문자열을 그대로 옮길지, 변환 결과에 표시된 대문자 HEX를 사용할지 작업 목적에 맞춰 결정합니다.

색상 문자열이 필요한 상황에서는 쉼표 구분 RGB와 공백 구분 RGB를 구별해야 합니다. 숫자 채널을 별도로 기록하는 작업, 쉼표가 포함된 표기가 필요한 작업, 공백으로 나뉜 표기가 필요한 작업은 서로 요구하는 형태가 다를 수 있습니다. 백분율로 색상 채널을 확인해야 하는 경우에는 백분율 RGB 항목을 사용합니다. 이처럼 결과의 값뿐 아니라 표현 형식도 확인하면 옮겨 적는 과정에서 구분 기호를 잘못 선택할 가능성을 줄일 수 있습니다.

실패 결과는 변환된 색상 값이 제공되지 않았다는 뜻입니다. 이때는 길이가 3자리 또는 6자리인지, 입력에 16진수가 아닌 문자가 섞이지 않았는지 확인해야 합니다. 이 도구의 확인된 범위는 선택적인 #을 포함한 3자리 또는 6자리 HEX 값입니다. 알파 채널이나 HEX가 아닌 다른 색상 형식까지 처리한다고 전제하지 말고, 지원 범위에 맞는 입력으로 다시 시도해야 합니다.

변환 결과를 활용할 때는 필요한 항목만 골라 사용합니다. 화면 작업에서 RGB 채널 숫자가 필요하면 세 채널 결과를 보고, 색상 문자열이 필요하면 구분 방식이 맞는 표현을 사용합니다. 입력 표기와 결과 표기를 나란히 확인하면 #의 생략 여부나 3자리 표기의 확장 여부도 함께 파악할 수 있습니다.

사용 예시

웹 디자인 시안의 HEX 색상 코드를 RGB 채널 값과 여러 표기 형식으로 확인하려고 합니다.

입력란에 #2A6F9B을 입력한 다음 변환을 실행하고, 숫자 RGB 채널과 각 형식의 결과 항목을 확인합니다.

결과에는 RGB의 빨강·초록·파랑 숫자 채널, 대문자 HEX 표기, 쉼표 구분 RGB, 공백 구분 RGB, 백분율 RGB 항목이 포함됩니다.

제한 사항

확인된 입력 범위는 선택적인 #이 있는 3자리 또는 6자리 HEX 값입니다. 잘못된 길이나 16진수가 아닌 문자가 포함된 값은 변환되지 않으며, 알파 채널과 다른 색상 형식의 지원 여부는 확인되지 않았습니다.

자주 발생하는 오류

입력 길이가 3자리 또는 6자리가 아니거나 16진수가 아닌 문자가 포함되면 실패 결과가 나올 수 있습니다. 입력에서 지원되지 않는 문자를 제거하고 3자리 또는 6자리 HEX 값으로 고친 뒤 다시 변환하세요.

자주 묻는 질문

HEX 코드 앞에 #을 꼭 입력해야 하나요?

#은 선택 사항입니다. #336699처럼 입력하거나 336699처럼 앞의 기호를 생략해도 변환할 수 있습니다.

3자리 HEX 색상도 변환할 수 있나요?

3자리 HEX도 지원됩니다. 각 숫자는 변환 과정에서 확장된 뒤 6자리 색상 값으로 처리됩니다.

색상 코드를 입력하지 않으면 어떻게 되나요?

입력란을 비워 두면 기본값 #ff0000이 사용됩니다. 특정 색상을 변환하려면 지원되는 3자리 또는 6자리 HEX 값을 입력하세요.