16진수 색상 코드를 RGB와 HSL로 변환하는 방법

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

입력을 생략한 상태로 변환을 실행하면 기본 16진수 값 #ff5733 이 사용됩니다. 특정 색상을 확인하려면 변환 전에 원하는 16진수 값을 입력해야 합니다.

Q: 세 자리 16진수 색상 코드도 변환할 수 있나요?

세 자리 16진수 표기도 변환할 수 있습니다. 예를 들어 369 를 입력하면 각 문자가 반복되어 여섯 자리 형태로 확장된 뒤 색상 변환에 사용됩니다.

16진수 색상 코드를 입력하면 RGB와 HSL 표현, 숫자 구성 요소, 밝기 분류를 확인할 수 있습니다. 입력을 생략하면 기본값 #ff5733이 사용됩니다.

16진수 색상 변환을 시작하기 전에

Hex Color Picker는 16진수로 적힌 색상 값을 RGB와 HSL이라는 두 가지 표현으로 바꿔 확인하는 도구입니다. 색상 코드를 다른 형식으로 읽어야 할 때 입력값을 넣고 변환 결과를 비교할 수 있습니다. 예를 들어 디자인 시안이나 스타일 문서에 16진수 코드만 적혀 있다면 RGB 숫자 구성 요소와 HSL 숫자 구성 요소를 각각 확인하는 방식으로 활용할 수 있습니다.

색상 입력은 선택 사항입니다. 입력란을 비워 둔 채 변환하면 기본값 #ff5733이 사용됩니다. 따라서 특정 색상을 확인하려는 경우에는 원하는 16진수 값을 입력하고, 도구의 기본 동작을 확인하려는 경우에는 입력 없이 진행하면 됩니다. 입력값 앞에 #을 붙인 표기와 붙이지 않은 표기를 모두 고려할 수 있으며, 세 자리 표기는 변환 전에 각 문자를 반복하는 방식으로 여섯 자리 형태로 확장됩니다.

이 도구의 출발점은 RGB나 HSL 값이 아니라 16진수 색상 값입니다. 결과를 확인할 때는 표기 문자열, 숫자 구성 요소, 밝기 분류를 서로 나누어 살펴보면 읽기 쉽습니다. 한 가지 표현만 필요한 경우에도 나머지 결과가 어떤 의미인지 알아 두면 입력한 색상이 어떻게 변환되었는지 비교하기 편합니다.

입력부터 결과 확인까지

변환할 16진수 색상 값을 준비합니다. 입력란에는 확인하려는 색상 코드를 넣습니다. 앞에 #을 붙인 형식으로 입력해도 되고, # 없이 16진수 문자만 입력해도 됩니다. 도구는 해석할 때 앞의 #을 처리하므로 두 표기의 차이를 별도의 색상으로 볼 필요는 없습니다.
세 자리 표기를 사용하는 경우에는 입력값을 그대로 여섯 자리 코드라고 해석하지 않습니다. 예를 들어 369를 입력하면 3, 6, 9가 각각 한 번씩 반복되는 방식으로 확장된 뒤 색상 변환에 사용됩니다. 이 단계는 짧은 색상 표기를 여섯 자리 표현으로 바꾸어 읽는 과정입니다. 입력값을 생략하려면 입력란을 비워 둡니다. 그때는 사용자가 별도의 코드를 제공하지 않은 것으로 처리되어 기본값 #ff5733이 적용됩니다.
변환을 실행합니다. 특정 색상을 확인할 때는 입력한 코드가 의도한 값인지 먼저 살피고, 기본값을 확인할 때는 입력란이 비어 있는지 확인한 뒤 실행합니다. 이 도구는 입력한 16진수 색상 값을 바탕으로 RGB와 HSL 표현을 계산합니다.
결과 영역에서 먼저 16진수 표기를 확인합니다. 성공적으로 해석된 색상에는 여섯 자리 대문자 표기와 여섯 자리 소문자 표기가 함께 제공됩니다. 두 표기는 문자 대소문자를 달리해 보여 주는 결과이므로, 색상 자체를 두 개로 나누어 이해하지 말고 표기 형식의 차이로 읽으면 됩니다.
이어서 RGB와 HSL 텍스트 표현을 확인하고, 같은 결과에 포함된 RGB 숫자 구성 요소와 HSL 숫자 구성 요소를 살펴봅니다. 다른 문서에 색상을 옮겨 적어야 한다면 필요한 표현을 선택해 사용하고, 값의 구조를 비교하려면 텍스트와 숫자 항목을 함께 확인합니다. 결과에는 밝기 분류도 포함되므로 마지막에 해당 항목까지 확인합니다.

결과를 읽을 때 확인할 기준

결과의 대문자 및 소문자 여섯 자리 16진수는 같은 변환 결과를 서로 다른 문자 형식으로 나타냅니다. 문서나 작업 환경에서 대문자 표기가 필요한지 소문자 표기가 필요한지에 따라 해당 항목을 골라 볼 수 있습니다. RGB와 HSL 텍스트는 사람이 읽거나 다른 색상 정보와 대조할 때 참고하는 표현이고, 숫자 구성 요소는 각 색상 모델을 구성하는 값을 따로 확인할 때 유용합니다.

HSL의 색조, 채도, 밝기는 정수가 되도록 반올림됩니다. 따라서 결과에 소수점이 표시되지 않는다고 해서 변환이 이루어지지 않은 것은 아닙니다. 소수점 단위의 HSL 값을 예상하고 있었다면 이 도구가 제공하는 표시 방식이 정수 반올림이라는 점을 감안해 결과를 읽어야 합니다. 입력값을 다른 색상 모델의 숫자로 바꾸어 넣는 방식이 아니라, 16진수 입력에서 나온 결과를 해석하는 과정이라는 점도 구분해야 합니다.

밝기 분류는 RGB 값에서 계산한 가중 밝기를 기준으로 정해집니다. 그 계산값이 128보다 클 때만 해당 분류가 참이 됩니다. 128과 같거나 그보다 낮은 경우에는 참 조건에 해당하지 않습니다. 이 분류는 사람이 색상을 보며 느끼는 인상과 반드시 같은 방식으로 판단되는 값이 아니므로, 경계에 가까운 색상을 검토할 때는 분류만 단독으로 사용하지 말고 RGB 또는 HSL 숫자 구성 요소도 함께 비교하는 편이 좋습니다.

입력 해석에 문제가 생기면 파싱 과정에서 값 또는 위치 오류가 발생할 수 있습니다. 이 경우 도구는 해당 파싱 오류를 다시 일으키는 대신 오류 정보가 포함된 성공 표시 결과를 반환할 수 있습니다. 화면에 성공 표시가 있더라도 색상 결과 항목에 오류 정보가 보이는지 확인해야 합니다. 변환 결과가 필요한 상황이라면 입력한 16진수 표기와 문자를 다시 점검한 뒤 재시도하십시오.

선택적으로 제공되는 기록 플래그는 기본값이 거짓이며, 색상 변환 결과에 기록을 추가하거나 결과를 바꾸는 데 사용되지 않습니다. 따라서 변환 결과를 해석할 때 이 옵션을 색상 이력 기능으로 이해해서는 안 됩니다. 이 도구에서 확인할 핵심은 입력한 16진수 값, 변환된 표현, 숫자 구성 요소, 밝기 분류 사이의 관계입니다.

사용 예시

웹 디자인 시안에 있는 #336699의 RGB와 HSL 표현을 확인해야 하는 상황입니다.

입력란에 #336699를 넣고 변환을 실행한 뒤, 표시된 16진수 표기와 RGB·HSL 텍스트 및 숫자 구성 요소를 비교합니다.

성공적으로 해석되면 대문자와 소문자 여섯 자리 16진수, RGB와 HSL 텍스트, RGB와 HSL 숫자 구성 요소, 밝기 분류가 포함된 결과 형태를 확인할 수 있습니다.

제한 사항

입력은 16진수 색상 값 기준으로 처리됩니다. 파싱에서 값 또는 위치 오류가 발생하면 오류 정보가 포함된 성공 표시 결과가 반환될 수 있으며, 선택적 기록 플래그는 기록을 추가하거나 색상 변환 결과를 바꾸지 않습니다.

자주 발생하는 오류

입력한 값에 16진수 색상으로 해석할 수 없는 문자나 위치가 포함되면 오류 정보가 포함된 성공 표시 결과가 나올 수 있습니다. #을 붙였는지 여부보다 입력한 문자와 표기 구성을 먼저 다시 확인하고, 의도한 16진수 색상 값으로 수정한 뒤 변환을 재실행하십시오.

자주 묻는 질문

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

입력을 생략한 상태로 변환을 실행하면 기본 16진수 값 #ff5733이 사용됩니다. 특정 색상을 확인하려면 변환 전에 원하는 16진수 값을 입력해야 합니다.

세 자리 16진수 색상 코드도 변환할 수 있나요?

세 자리 16진수 표기도 변환할 수 있습니다. 예를 들어 369를 입력하면 각 문자가 반복되어 여섯 자리 형태로 확장된 뒤 색상 변환에 사용됩니다.

변환 결과에서 무엇을 확인할 수 있나요?

성공적으로 해석된 결과에는 대문자와 소문자의 여섯 자리 16진수 표기, RGB와 HSL 텍스트, RGB와 HSL 숫자 구성 요소, 밝기 분류가 포함됩니다. HSL의 색조·채도·밝기는 정수로 반올림됩니다.