이미지 색상 추출기
이미지를 올리면 캔버스에서 원하는 픽셀을 찍고 HEX, RGB, HSL, HSV, CMYK 값을 확인합니다. 최근 색을 비교하고, 이미지의 주요 팔레트를 추출한 뒤 PNG로 내려받을 수 있습니다.
클릭 또는 드래그 앤 드롭
업로드한 이미지는 브라우저 안에서만 읽습니다. 캔버스에 표시된 뒤 마우스나 터치로 원하는 픽셀을 선택하세요.
최대 10MB · 브라우저 지원 이미지캔버스 미리보기
선택 색상
최근 색
팔레트
바로 쓸 수 있게.
- 바로 보이는 화면입력 위치와 결과 위치를 또렷하게 둡니다.
- 결과 먼저핵심 결과를 앞에 두고, 과정은 필요할 때만 보여줍니다.
- 요구 줄이기가입이나 불필요한 정보 입력 없이 바로 쓰게 합니다.
이미지에서 색을 찍을 때는 픽셀과 팔레트를 따로 봐야 합니다
이미지 색상 추출기는 사진이나 캡처에서 원하는 지점을 찍어 색상 코드를 확인하는 도구입니다. 캔버스에서 한 픽셀을 고르면 HEX, RGB, HSL, HSV, CMYK 값이 함께 바뀌고, 방금 찍은 색은 최근 색 목록에 남습니다.
로고 한쪽의 정확한 색을 복사할 때와 사진 전체의 분위기 팔레트를 잡을 때는 보는 기준이 다릅니다. 이 화면은 픽셀 선택, 최근 색 비교, 주요 팔레트 추출, PNG 다운로드를 한 흐름에 묶어 작업 메모나 디자인 시안에 바로 옮기기 좋게 구성했습니다.
이미지를 올리고 첫 색을 찍는 순서
- 이미지 추가 또는 업로드 영역에서 JPG, PNG, GIF, WebP처럼 브라우저가 읽을 수 있는 이미지를 선택합니다.
- 캔버스에 이미지가 보이면 마우스나 터치로 원하는 지점을 가리키고 클릭합니다.
- 선택한 색상은 큰 색상 미리보기, 좌표, 코드 입력칸에 바로 반영됩니다.
돋보기로 한 픽셀 차이를 확인하기
- 로고 가장자리, 그림자, 그라데이션은 한두 픽셀만 옮겨도 코드가 달라질 수 있습니다.
- 9×9 돋보기와 좌표 표시를 보면서 면 안쪽, 경계선, 투명 영역을 구분합니다.
- 투명 PNG에서는 알파 값도 함께 보고 완전히 불투명한 색인지 확인합니다.
색상 코드 형식 고르기
- HEX는 CSS, 디자인 토큰, 문서 공유에 가장 무난합니다.
- RGB는 캔버스, 스크립트, 이미지 처리 작업에서 값을 그대로 쓰기 좋습니다.
- HSL/HSV는 색상·채도·명도를 조절하는 방향을 설명할 때, CMYK는 인쇄 대화의 참고값으로만 둡니다.
최근 색으로 후보를 비교하기
- 같은 이미지에서 여러 지점을 찍으면 최근 색 카드가 쌓입니다.
- 배경 후보, 버튼 후보, 포인트 컬러를 번갈아 찍어 톤 차이를 비교합니다.
- 작업이 바뀌면 비우기로 이전 후보를 지우고 새 기준만 남깁니다.
팔레트 추출은 대표색을 좁히는 작업
- 팔레트는 이미지 전체 픽셀을 샘플링해 비슷한 색을 묶고 많이 보이는 색을 앞에 둡니다.
- 5개는 대표색만 볼 때, 8개는 웹 화면이나 썸네일 분위기를 잡을 때, 10~12개는 사진처럼 색 변화가 많은 이미지에 맞습니다.
- 팔레트 카드는 최종 확정값이 아니라 후보를 좁히는 출발점입니다.
PNG 다운로드를 작업 메모에 붙이기
- 다운로드는 추출한 팔레트 또는 마지막 선택 색을 PNG 색상표로 저장합니다.
- 색상 칩과 코드가 같이 남아 회의 메모, 블로그 초안, 디자인 피드백에 붙이기 쉽습니다.
- 여러 색을 한 번에 남기려면 먼저 팔레트를 추출한 뒤 다운로드합니다.
브라우저 안에서 처리된다는 뜻
- 선택한 파일은 현재 브라우저에서 읽혀 캔버스에 그려집니다.
- 색상 값은 그 캔버스의 픽셀을 기준으로 계산되며, 이 도구는 색을 읽기 위해 이미지를 서버로 올리지 않습니다.
- 탭을 닫거나 이미지를 바꾸면 현재 캔버스 상태도 새 작업으로 넘어갑니다.
색이 다르게 보일 수 있는 경우
- 큰 이미지는 화면 반응성을 위해 미리보기 캔버스 크기로 다시 그려질 수 있습니다.
- 색상 프로파일, 모니터 밝기, 브라우저 디코딩 방식 때문에 눈으로 본 색감과 코드의 인상이 달라질 수 있습니다.
- 인쇄 감리나 원본 픽셀 검증처럼 엄격한 작업에는 원본 파일과 전문 도구를 함께 확인합니다.
대비와 가독성은 따로 확인하기
- 추출한 색이 예뻐 보여도 본문 글자색이나 버튼 글자색으로 바로 쓰면 읽기 어려울 수 있습니다.
- 밝은 배경과 어두운 배경에서 제목, 본문, 버튼 텍스트가 충분히 구분되는지 확인합니다.
- 접근성이 중요한 화면은 별도의 대비 검사 도구로 최종 조합을 검토합니다.
실무에서 바로 쓰는 예시
- 캡처 이미지에서 브랜드 배경색을 찍고 HEX를 복사해 CSS 변수에 붙입니다.
- 제품 사진에서 많이 보이는 색을 8개 팔레트로 뽑아 썸네일 분위기를 맞춥니다.
- 일러스트의 포인트 컬러를 여러 번 찍어 최근 색에서 가장 덜 튀는 후보를 고릅니다.
자주 묻는 질문
이미지가 서버로 업로드되나요?
아니요. 선택한 이미지는 현재 브라우저에서 읽혀 캔버스에 그려집니다. 이 도구는 색상 값을 확인하기 위해 이미지를 서버로 업로드하지 않습니다.
어떤 이미지 파일을 사용할 수 있나요?
JPG, PNG, GIF, WebP처럼 사용 중인 브라우저가 읽을 수 있는 이미지 파일을 사용할 수 있습니다. 실제 표시 여부는 브라우저의 이미지 디코딩 지원에 따릅니다.
큰 이미지는 원본 픽셀 그대로 읽나요?
항상 그렇지는 않습니다. 화면 반응성을 위해 큰 이미지는 미리보기 캔버스 크기로 다시 그려질 수 있으며, 색상 값은 그 캔버스에서 읽은 픽셀 기준입니다.
팔레트 색상은 정확한 브랜드 색으로 써도 되나요?
팔레트는 이미지에서 많이 보이는 색을 묶어 보여 주는 후보입니다. 브랜드 확정값이나 인쇄 기준색이 필요하다면 원본 가이드, 원본 파일, 별도 색상 관리 도구를 함께 확인해야 합니다.
다운로드한 PNG에는 무엇이 들어가나요?
팔레트를 추출했다면 추출된 색상 칩과 HEX 코드가 저장됩니다. 아직 팔레트를 만들지 않았다면 마지막으로 선택한 색상만 PNG 색상표로 저장됩니다.