색상 변환기이란?
색상 변환기는 HEX, RGB, HSL, HSV, CMYK 형식을 서로 변환합니다. 색을 고르거나 값을 입력하면 모든 형식의 결과를 실시간 미리보기로 확인할 수 있습니다.
비주얼 컬러 휠로 선택하거나 HEX, RGB, HSL, HSV, CMYK 다섯 개 입력 칸 중 어디든 직접 입력하면 다른 칸이 실시간으로 갱신됩니다. HSV(HSB로도 표기)는 HSL과 함께 제공되어 Photoshop이나 Sketch에서 다루는 값을 일반 CSS 도구에서는 보기 힘들 때 유용합니다.
사용 방법
- 1단계 — 인터랙티브 색상 선택기로 시각적으로 색상을 선택하거나, 아무 형식 필드에 값을 직접 입력하세요.
- 2단계 — 모든 형식 필드가 한꺼번에 업데이트되어 각 형식의 대응 값을 바로 확인할 수 있습니다.
- 3단계 — 원하는 형식의 값을 복사하거나, 색상 선택기로 미세 조정하세요. 모든 필드가 실시간으로 업데이트됩니다.
사용 시기
- 컬러 휠로 색을 뽑은 뒤 일치하는 CMYK를 복사해 Illustrator 파일에 사용.
- Photoshop 팔레트의 HSV 값을 조정하고 CSS용 HSL 값을 읽기.
- 피커를 드래그하면서 매번 HEX를 기록해 처음부터 팔레트 구성.
결과
인쇄 디자이너가 웹 색상 rgb(0, 128, 255)의 CMYK 값이 필요할 때, 도구가 정확한 인쇄 재현을 위해 cmyk(100%, 50%, 0%, 0%)로 변환해 줍니다.
자주 묻는 질문
- HSL과 HSV가 비슷한데 왜 둘 다 제공하나요?
- HSL은 CSS와 대부분의 웹 도구에서 사용되고, HSV(HSB)는 Photoshop, Sketch, macOS와 Windows의 시스템 컬러 피커에서 표준입니다. 디자이너는 두 환경을 자주 오가기 때문에 변환기에서 둘 다 보여 주어 별도 변환 단계를 줄입니다.
- 피커뿐 아니라 각 입력 칸도 직접 수정할 수 있나요?
- 모든 칸이 수정 가능합니다. HEX를 직접 입력하거나 RGB / HSL / HSV / CMYK 숫자를 바꾸면 피커와 나머지 칸이 함께 갱신됩니다. 어느 칸을 변경하든 색상은 항상 동기화 상태를 유지합니다.
- 회색일 때 HSL의 색조와 채도가 0으로 표시되는 이유는?
- 순수한 회색은 색조가 없고 채도는 0입니다. HSL 규약상 채도가 0이면 색조도 0으로 저장하는데, 이는 회색이 컬러 휠 상에서 특정 위치를 차지하지 않기 때문입니다. 수학적으로는 올바르지만 "데이터 누락"으로 오해하기 쉽습니다.
- CMYK의 K 채널은 무엇을 뜻하나요?
- K는 Key의 약자로 실제로는 검정 잉크를 가리킵니다. C+M+Y를 섞어 가까운 검정을 만드는 것보다 K를 더해 출력하면 값비싼 컬러 잉크를 아끼고 CMY 혼합에서 생기는 탁한 갈색도 피할 수 있습니다. 도구가 K를 자동으로 계산합니다.
- 스타일러스나 터치 화면에서도 피커가 동작하나요?
- 동작합니다. 컬러 피커는 브라우저 기본 입력 요소라서 마우스, 손가락, 펜, 트랙패드 모두 사용할 수 있습니다. 모바일에서는 탭하면 시스템 피커가 열리고, 데스크톱에서는 클릭하면 휠이 펼쳐집니다. 정확한 값은 숫자 필드가 더 편합니다.