컬러 컨버터 · 대표색 추출
HEX·RGB·HSL·CMYK 색값을 알파까지 서로 변환하고, 이미지에서 대표색 5개를 뽑아 클립보드로 복사하는 도구입니다. 파일은 기기 밖으로 나가지 않습니다.
게임 엔진이나 플랫폼마다 요구하는 색 표기가 달라, 같은 색을 HEX·RGB·HSL·CMYK로 바꿔 적어야 할 때가 많습니다. 이 도구는 한 값을 입력하면 네 표기와 알파를 즉시 함께 보여줍니다.
값은 어느 칸이든 고쳐 넣을 수 있고, 고치는 즉시 나머지 표기가 다시 계산됩니다. 네이티브 색 선택기와 화면 색을 집는 스포이드(지원 브라우저)도 함께 제공됩니다.
이미지를 올리면 안티엘리어싱으로 희석된 색과 투명 픽셀을 걸러 사용률이 높은 대표색 다섯 개를 추출합니다. 뽑힌 색을 누르면 그대로 컨버터에 실려 네 표기로 복사할 수 있습니다.
CMYK는 장치·프로파일에 따라 달라지는 근사 변환이므로 화면 색과 인쇄 색이 정확히 같지는 않습니다. 알파는 HEX 8자리·RGBA·HSLA로 왕복하며 CMYK에는 적용되지 않습니다.
화면을 열면 아무것도 넣지 않아도 파란 계열 색 하나가 이미 잡혀 있습니다. rgb(58, 123, 213)이고 열여섯 진수로는 #3A7BD5인 값이라, 네 칸이 서로 어떻게 대응하는지 보고 싶을 때 파일을 준비하지 않고도 그 자리에서 바로 견주어 볼 수 있습니다.
입력을 읽는 규칙은 생각보다 너그럽습니다. 열여섯 진수 칸은 앞의 우물 정 기호가 있어도 없어도 되고 세 자리·네 자리·여섯 자리·여덟 자리를 모두 받는데, 짧은 표기는 글자를 두 번씩 늘려 읽으므로 1a2는 #11AA22와 같은 색이 되고 네 자리로 적으면 마지막 글자가 알파 자리로 들어갑니다. RGB 칸은 rgb(…)나 rgba(…) 껍데기를 벗겨 내고 읽기 때문에 괄호 없이 숫자만 쉼표로 늘어놓아도 통하며, 네 번째 값인 알파만 0에서 1 사이 소수로 받습니다.
HSL 칸도 퍼센트 기호를 지우고 읽으므로 210, 60, 53처럼 적어도 그대로 통하고, 색상은 0에서 360까지 채도와 명도는 0에서 100까지를 벗어나면 그 칸만 거부합니다. CMYK 칸은 네 값이 모두 0에서 100 사이여야 합니다. 쉼표 사이를 비워 둔 자리는 0으로 접어 읽지 않고 잘못된 입력으로 봅니다 — 지우다 만 자리가 조용히 0이 되어 엉뚱한 색으로 넘어가는 사고를 막기 위한 규칙입니다.
표기의 모양은 알파가 정합니다. 알파가 꽉 찬 상태에서는 여섯 자리와 rgb(…)·hsl(…)로 적히고, 알파가 조금이라도 빠지면 각각 여덟 자리와 rgba(…)·hsla(…)로 모양이 바뀝니다. 열여섯 진수 글자는 언제나 대문자로 나오며, CMYK만은 알파와 무관하게 네 값에 퍼센트 기호를 붙인 한 가지 모양을 끝까지 유지합니다.
화면에 적히는 HSL 값은 세 축을 각각 정수로 반올림한 것입니다. 그래서 그 문자열을 복사해 다른 곳에 옮겼다가 다시 읽어 들이면 원래 색에서 한두 단계 어긋난 값이 될 수 있습니다. 같은 색을 한 치 오차 없이 옮겨야 하는 작업이라면 열여섯 진수나 RGB 표기를 쓰는 편이 안전합니다.
고치는 동안에는 입력한 글자가 그대로 남습니다. 키를 누를 때마다 정돈된 표기로 스냅되면 커서가 튀어 이어서 타이핑하기 어려워지기 때문에, 편집 중인 칸만 원문을 보여 주고 나머지 세 칸은 해석된 색에서 다시 계산해 보여 줍니다.
알파 숫자 칸은 자리를 다 지운 중간 상태를 무시합니다. 빈 칸을 곧바로 0으로 받아들이면 값을 지우고 다시 적는 동안 색이 투명으로 깜빡이기 때문이고, 범위를 벗어난 숫자는 0에서 255 사이로 접어 반올림합니다. 왼쪽 미리보기 네모에는 회색 체크무늬가 깔려 있어 알파를 낮췄을 때 얼마나 비치는지를 눈으로 가늠할 수 있습니다.
스포이드로 화면 색을 집다가 Esc로 물러나도 붉은 오류 배너는 뜨지 않습니다. 취소는 정상 흐름이라 잡아 둔 값을 건드리지 않고 그대로 두며, 집는 데 성공하면 빨강·초록·파랑 세 채널만 갈리고 알파는 건드리지 않습니다.
파일 선택 창은 이미지만 추려 보여 주지만 끌어다 놓기는 그 필터를 지나칩니다. 그래서 이미지가 아닌 파일이 떨어지면 이미지를 고르라는 배너가 뜨면서 직전에 뽑아 둔 색 칸과 파일 이름까지 함께 지워집니다 — 지난 결과가 화면에 남아 새 파일의 결과인 것처럼 보이는 일을 막기 위한 처리입니다.
뽑힌 색 칸에는 열여섯 진수 값과 사용률이 소수 한 자리까지 나란히 적힙니다. 이 화면이 하지 않는 일도 분명합니다 — 뽑은 색을 파일로 내보내는 경로가 없어 옮기는 수단은 칸별 복사뿐이고, 두 색의 명암비를 재 주지도 마음에 든 색을 모아 두는 보관함을 내주지도 않으며, 이미지에서 뽑는 개수는 다섯으로 고정돼 있어 늘리거나 줄일 수 없습니다.
주요 기능
- HEX·RGB·HSL·CMYK 상호 변환(알파 포함)
- 네이티브 색 선택기 + 화면 스포이드
- 이미지 대표색 5개 추출 → 클릭해 컨버터로
- 표기별 클립보드 복사 — 완전 브라우저 처리
- 열자마자 기본색 #3A7BD5 적용 — 업로드 없이 바로 변환
- HEX 3·4·6·8자리 수용, 우물 정 기호 생략 가능 — 짧은 표기는 글자 배가
- rgb()·hsl() 껍데기와 퍼센트 기호 생략 가능, 빈 자리는 0으로 접지 않고 거부
- 알파가 꽉 차면 6자리·rgb()·hsl(), 모자라면 8자리·rgba()·hsla()로 표기 전환
- HSL 표기는 정수 반올림 — 정확한 왕복은 HEX·RGB 권장
- 편집 중인 칸만 원문 유지 — 커서 튐 방지
- 알파 0~255 슬라이더+숫자 입력, 빈 입력 무시 · 체커보드 미리보기
- 스포이드 취소는 오류로 처리하지 않음 — 잡아 둔 값 유지
- 비이미지 드롭은 배너와 함께 직전 결과 초기화
- 색 파일 내보내기·명암비 계산·보관함 없음, 추출 개수 5개 고정
사용 전 확인
HEX·RGB·HSL·CMYK 색값을 상호 변환하고 이미지에서 대표색 5개를 추출합니다.
엔진·플랫폼이 요구하는 색 표기에 맞춰 값을 바꾸거나, 이미지의 테마색을 뽑을 때 씁니다.
사용 순서
- 색값을 직접 입력하거나 이미지를 올려 대표색을 추출합니다.
- 추출된 색을 클릭하면 컨버터에 로드됩니다.
- HEX·RGB·HSL·CMYK 표기와 알파를 확인합니다.
- 필요한 표기의 복사 버튼으로 클립보드에 담습니다.
주의사항
- CMYK는 장치·프로파일에 따라 달라지는 근사값이라 인쇄 정합을 보장하지 않습니다.
- 대표색은 안티엘리어싱·반투명 픽셀을 제외하고 사용률 상위로 뽑으므로 원본의 모든 색을 담지 않습니다.
자주 묻는 질문
Q. 잘못된 값을 입력했더니 빨간 테두리가 떴습니다. 다른 칸도 초기화되나요
아니요. 오류가 난 칸에만 빨간 테두리와 안내 메시지가 뜨고 나머지 세 칸과 저장된 색상 값은 그대로 남습니다. 오류가 난 칸에서 포커스를 벗어나면 표시가 지워지고 마지막으로 유효했던 값으로 되돌아갑니다.
Q. 대표색 스와치를 클릭했더니 알파(투명도) 값이 100%로 바뀌었습니다
의도된 동작입니다. 이미지에서 뽑은 대표색 다섯 개는 항상 완전 불투명(알파 255)으로 계산되므로, 스와치를 누르면 R·G·B와 함께 알파도 255로 함께 실립니다. 알파를 유지하려면 스와치를 누른 뒤 알파 슬라이더나 숫자칸을 다시 조정하세요.
Q. "복사" 버튼을 눌렀는데 클립보드에 제대로 담겼는지 어떻게 확인하나요
버튼 라벨이 잠깐 "복사됨"으로 바뀌고 2초 뒤 원래대로 돌아옵니다. 화면을 보지 못하는 사용자를 위해 같은 안내가 별도 라이브 리전으로도 함께 전달됩니다.
Q. 이미지를 올렸는데 대표색이 하나도 안 나옵니다
이미지 전체가 투명하거나 빈 픽셀뿐이면 대표색을 하나도 추출하지 못했다는 안내가 배너로 뜹니다. 오류가 아니라 집계할 불투명 픽셀이 없다는 뜻이므로, 불투명한 부분이 있는 이미지를 다시 올리면 됩니다.
이 도구는 설치 없이 브라우저에서 바로 실행됩니다. 화면이 이 안내에 머물러 있다면 JavaScript를 활성화한 브라우저로 접속해 주세요.