대화형 색상 선택기 및 팔레트 빌더 사용 방법

웹 디자인과 개발 작업에서는 16진수 색상 코드를 RGB나 HSL로 바꾸고 보색을 확인하는 작업이 필요합니다. 색상 변환기를 이용하면 HEX 코드를 손쉽게 표준 형식으로 변환하고 밝기 여부를 판정할 수 있습니다.

색상 변환 도구의 입력 지원 범위

이 도구는 3자리 및 6자리 HEX 코드를 지원합니다. 앞부분의 해시 기호(#)는 입력하거나 생략할 수 있으며, 공백은 자동으로 제거됩니다. 3자리 약식 코드는 각 자릿수를 두 번 반복한 6자리 표준 코드로 자동 확장됩니다.

색상 코드 변환 절차

1. 색상 입력란에 변환할 HEX 문자열(예: #3498db 또는 f00)을 입력합니다.
2. 출력 형식에서 전체(all), HEX, RGB, HSL 중 원하는 방식을 선택합니다.
3. 계산을 실행하여 RGB 정수 값, HSL 값, 보색 코드 및 밝기 판정 결과를 확인합니다.
4. 이미지 파일에서 색상 코드를 직접 추출해야 한다면 이미지 색상 추출기를 함께 활용할 수 있습니다.

보색 계산 및 밝기 판별 방식

도구는 각 RGB 채널의 반전 값을 계산하여 16진수 보색 코드를 생성합니다. 또한 빨강, 초록, 파랑 가중치 공식으로 계산된 수치가 128을 초과하는지 검사하여 밝은 색상 여부(is_light)를 불리언 값으로 판별합니다. 이 판정은 웹 접근성 대비 기준을 직접 인증하지는 않습니다.

실제 변환 예시

기본 색상인 #3498db를 입력하고 전체 형식을 선택하여 변환한 결과는 다음과 같습니다.

• HEX: #3498db
• RGB: rgb(52, 152, 219)
• HSL: hsl(204, 70%, 53%)
• 보색: #cb6724
• 밝은 색 여부: True (가중치 계산값 129.738로 128 초과)

도구 사용 시 제한 사항

• rgb(52, 152, 219)와 같은 함수형 문자열은 입력할 수 없습니다.
• 알파 채널이 포함된 8자리 HEX 코드는 지원하지 않습니다.
• 16진수 이외의 문자가 포함되면 오류가 반환됩니다.

자주 발생하는 실수

• 색상 코드 중간에 공백이나 특수 문자를 넣으면 유효성 검사를 통과하지 못합니다.
• 16진수 형식이 아닌 RGB나 색상 이름을 입력하면 변환이 실행되지 않습니다.

자주 묻는 질문

3자리 HEX 코드도 입력할 수 있나요?

네, 3자리 코드는 시스템이 6자리 표준 코드로 자동 확장하여 처리합니다.

출력 형식을 지정하지 않으면 어떻게 되나요?

기본값인 all이 적용되어 HEX, RGB, HSL, 보색, 밝기 판정 결과가 모두 표시됩니다.

투명도 값이 포함된 코드도 지원하나요?

지원하지 않습니다. 알파 채널이 없는 3자리 또는 6자리 HEX 코드만 입력 가능합니다.