HEX, RGB, HSL 색상 변환기 사용법

색상 값을 바꾸기 전 알아둘 점

색상 값을 다른 표현으로 바꾸거나 입력값이 어떻게 읽히는지 확인할 때 이 변환기를 사용할 수 있습니다. HEX, RGB, HSL 중 입력 형식을 정한 뒤 색상 텍스트를 넣으면 변환 결과를 한 화면에서 비교할 수 있습니다. 변환에 성공한 뒤에는 HEX, RGB, HSL 표현뿐 아니라 RGB 채널과 HSL 구성 요소의 숫자 값, 색상을 보여 주는 미리보기도 확인할 수 있습니다.

이 도구는 디자인 시안의 색상 코드를 다른 형식으로 옮기거나, 한 형식으로 받은 값을 다른 작업에 맞게 살펴볼 때 유용합니다. 다만 입력을 넣었다고 해서 모든 텍스트가 같은 방식으로 처리되는 것은 아닙니다. 비어 있는 값, 인식되지 않는 형식, 처리 조건에 맞지 않는 값은 결과 대신 실패로 이어질 수 있으므로 입력 형식과 숫자를 함께 살펴보는 것이 좋습니다.

입력부터 결과 확인까지

1. 색상 입력란에 확인하려는 텍스트를 입력합니다. 빈 입력은 변환 결과를 만들지 못하므로 값이 실제로 들어갔는지 먼저 살펴보세요.

2. 입력 형식을 지정합니다. 형식을 생략하면 기본값은 소문자 hex로 처리됩니다. 선택할 수 있는 형식은 소문자 hex, rgb, hsl이며, 다른 대소문자나 별도 표기는 인식되지 않을 수 있습니다.

3. HEX를 사용할 때는 세 자리 또는 여섯 자리 색상 텍스트를 입력합니다. 앞에 #을 붙인 형태와 붙이지 않은 형태가 모두 허용됩니다. 예를 들어 #abc와 abc처럼 길이와 기호 조건을 맞춰 입력할 수 있습니다.

4. RGB를 선택했다면 세 개의 숫자 부분이 읽히는지 확인합니다. 읽힌 각 채널 값은 0 이상 255 이하이어야 성공 결과를 기대할 수 있습니다. 숫자 사이의 표현이 익숙한 RGB 표기와 달라도 숫자 부분을 추출해 처리될 수 있으므로, 변환 뒤 표시된 값을 반드시 확인하세요.

5. HSL을 선택할 때도 세 개의 숫자 부분이 추출되는지 살펴봅니다. 색상 값은 360도 주기 안에서 조정되고, 채도와 밝기가 100%보다 크면 100%로 제한될 수 있습니다. 입력에 음수 기호가 있으면 그 기호를 음수 의미로 처리하지 않고 뒤에 있는 숫자만 읽을 수 있으므로, 의도한 값과 결과가 일치하는지 확인해야 합니다.

6. 변환을 실행한 뒤 표시된 세 가지 색상 표현을 서로 비교합니다. RGB 채널과 HSL 구성 요소의 숫자 값, 미리보기도 함께 살피면 입력이 예상과 다르게 읽혔는지 판단하기 쉽습니다. 결과가 없으면 빈칸 여부, 형식의 소문자 표기, 숫자 개수와 범위를 차례로 다시 점검한 뒤 입력을 고쳐 실행하세요.

표시된 값을 해석하는 기준

성공한 결과에서는 HEX, RGB, HSL 표현을 나란히 확인할 수 있고, 각 표현에 대응하는 숫자 구성 요소와 미리보기도 제공됩니다. RGB 채널 값은 정수로 표시되며, 변환된 HSL 구성 요소 역시 정수로 반올림됩니다. 따라서 입력에 소수나 긴 숫자 표현이 포함되어 있었다면 결과 화면의 정수 값과 미리보기 색상을 함께 대조하는 편이 좋습니다.

HSL 결과를 읽을 때는 입력 숫자가 그대로 복사된다고 단정하지 마세요. 색상 값은 360도 주기를 기준으로 조정되고, 채도와 밝기는 100%를 넘을 때 100%로 제한될 수 있습니다. 음수 기호가 있는 HSL 텍스트는 음수 값으로 해석되지 않고 기호 뒤의 숫자가 추출될 가능성이 있으므로, 이런 입력은 결과 숫자를 확인해야 합니다.

RGB와 HSL은 입력 전체의 문법을 엄격하게 확인하기보다 숫자 부분을 찾아 처리할 수 있습니다. 그래서 겉으로는 어색해 보이는 텍스트가 변환되는 경우도 있지만, 변환 성공이 입력 표현 전체가 올바르다는 뜻은 아닙니다. 반대로 빈 값, 잘못된 값, 범위를 벗어난 RGB 채널, 인식할 수 없는 형식은 성공 결과가 나오지 않을 수 있습니다.

사용 예시

웹 색상 코드 #3498db를 다른 색상 표현으로 확인하려는 상황입니다.

입력란에 #3498db를 넣고 형식으로 소문자 hex를 지정한 다음 변환을 실행합니다.

성공하면 입력한 색상의 HEX, RGB, HSL 표현과 RGB 채널 및 HSL 구성 요소의 숫자 값, 미리보기가 표시됩니다. 변환 숫자는 결과 화면에 표시된 값을 기준으로 확인합니다.

제한 사항

• RGB와 HSL은 숫자 부분을 추출해 처리할 수 있으므로 변환 성공만으로 입력 전체의 문법을 확인했다고 볼 수 없습니다. HSL의 음수 기호는 음수 값으로 해석되지 않을 수 있으며, 빈 입력이나 잘못된 값, 인식되지 않는 형식, 범위를 벗어난 입력은 실패할 수 있습니다.

자주 발생하는 오류

• 형식 이름을 대문자로 입력하거나 hex, rgb, hsl 이외의 값을 고르면 형식이 인식되지 않을 수 있습니다. 형식 입력을 소문자 세 가지 중 하나로 다시 맞춘 뒤 변환을 실행하세요.

자주 묻는 질문

# 기호 없이 HEX 색상 코드를 입력해도 되나요?

네. 세 자리 또는 여섯 자리 HEX 텍스트라면 앞에 #을 붙이지 않은 형태도 입력할 수 있습니다.

RGB 숫자는 어느 범위로 입력해야 하나요?

RGB에서 읽힌 세 숫자의 각 채널 값이 0 이상 255 이하일 때 처리됩니다. 채널 값이 이 범위를 벗어나면 성공 결과가 나오지 않을 수 있습니다.

입력 형식을 고르지 않으면 어떤 형식으로 처리되나요?

형식을 지정하지 않은 경우에는 hex가 기본값으로 사용됩니다. RGB나 HSL 텍스트를 넣을 때는 해당 소문자 형식을 직접 지정하세요.