이미지 컬러 피커
이미지 위의 원하는 위치를 드래그하면서 색상을 추출하고 RGB, HEX, HSL, HSV를 한 번에 확인할 수 있는 브라우저 완결형 컬러 피커 도구입니다.
이미지를 선택한 뒤 이미지 위를 드래그하거나 탭하면 색상을 가져올 수 있습니다.
이미지 위에서 클릭하거나 길게 탭하면 확대경이 표시되어 세밀한 색상도 확인할 수 있습니다.
이미지 미리보기
이미지 컬러 피커 사용법과 활용 장면
이 이미지 컬러 피커는 업로드한 이미지에서 스포이트처럼 색상을 집어내고 그 자리에서 컬러 코드를 확인할 수 있는 온라인 도구입니다. 웹 디자인, 배너 제작, 문서 작성, 상품 이미지의 색상 확인 등 정확한 색상 추출이 필요한 상황에서 빠르게 사용할 수 있습니다.
드래그하면서 연속으로 색상 확인
이미지 위를 따라 움직이기만 해도 좌표와 색상이 실시간으로 바뀌므로 경계선이나 그라데이션의 색 변화도 쉽게 추적할 수 있습니다.
확대경으로 세부 색상까지 쉽게 확인
커서 주변이 확대되어 표시되므로 가는 선, 작은 아이콘, 그림자 색상 같은 세부 요소도 확대해 가며 정확하게 확인할 수 있습니다. (이미지 위를 클릭하거나 길게 탭하면 확대경이 표시됩니다)
RGB, HEX, HSL, HSV를 동시에 표시
여러 색상 표현 방식을 한꺼번에 확인할 수 있어 디자인 지정, CSS 작성, 인상 비교 같은 작업을 오가며 반복할 필요가 없습니다.
기록에서 색상을 바로 재사용
방금 추출한 색상이 기록에 남기 때문에 브랜드 컬러나 비교할 색을 여러 번 다시 집을 필요가 없습니다.
이런 상황에서 편리합니다
웹사이트나 랜딩 페이지의 참고 이미지에서 배색을 추출하고 비슷한 톤의 버튼색이나 배경색을 정하고 싶을 때.
이커머스 상품 이미지나 배너 소재의 색감을 확인하고 기존 디자인과의 색 차이를 빠르게 비교하고 싶을 때.
문서, SNS 이미지, 썸네일을 만들 때 이미지 안의 포인트 컬러를 그대로 제목이나 장식에 활용하고 싶을 때.
사용 팁
- 먼저 이미지를 불러온 뒤 원하는 부분 위에서 마우스를 누른 채 움직이면 색상을 연속으로 확인할 수 있습니다. 스마트폰과 태블릿의 터치 조작도 지원합니다.
- 경계선이나 작은 장식의 색을 가져오고 싶다면 확대경을 보면서 위치를 조금씩 조정하면 원하는 픽셀을 더 쉽게 집을 수 있습니다.
- 추출한 RGB, HEX, HSL, HSV는 각각 복사할 수 있으므로 CSS, 디자인 도구, 사양서로 옮기는 작업을 최소한의 조작으로 끝낼 수 있습니다.
- 최근 추출한 색상이 기록에 남으므로 후보 색상을 비교하고 싶을 때는 여러 위치를 순서대로 추출해 놓고 비교하는 방식이 편리합니다.
- 밝기가 다른 색을 구분하고 싶다면 RGB뿐 아니라 HSL과 HSV도 함께 확인하면 채도와 명도/값의 차이까지 파악하기 쉬워집니다.
- 이미지는 서버로 전송되지 않고 모든 처리가 브라우저 안에서 끝나므로 제작 중인 비공개 이미지나 사내 자료의 스크린샷에도 안전하게 사용할 수 있습니다.