이미지 도구
이미지 색상 피커
이미지 위를 호버하면 픽셀 색상이 즉시 표시
모든 처리는 브라우저에서 이루어집니다. 데이터는 기기를 벗어나지 않습니다.
관련 도구
사용 방법
이미지를 업로드하고 마우스를 올려 색상을 실시간으로 미리보세요. 원하는 색상을 클릭해 고정하고 복사 버튼으로 값을 가져가세요.
이미지 업로드
업로드 영역을 클릭하거나 이미지를 드래그 앤 드롭하세요. 이미지가 Canvas에 그려지며 getImageData API로 픽셀 색상을 읽을 수 있게 됩니다.
마우스를 올려 색상 미리보기
이미지 위로 커서를 움직이면 해당 픽셀의 HEX·RGB·HSL 값이 실시간으로 업데이트됩니다. 색상 스와치로 정확한 색조를 미리 확인할 수 있습니다.
클릭하여 색상 고정 및 복사
원하는 픽셀을 클릭하면 해당 색상이 팔레트에 고정됩니다. HEX·RGB·HSL 각 형식 옆의 복사 버튼으로 값을 클립보드에 복사하세요.
예시
로고에서 브랜드 색상 추출
브랜드 로고 이미지를 업로드하고 주요 색상 영역 위에 마우스를 올려 정확한 HEX 값을 확인하세요. 클릭으로 색상을 고정하고 CSS 변수나 디자인 시스템에 바로 사용할 수 있습니다.
참고 사진에서 색상 매칭
무드보드나 참고 사진을 업로드하고 그림자·하이라이트·배경 색조를 선택하세요. HSL 값은 동일한 색조를 유지하며 밝기를 조절할 때 특히 유용합니다.
도구 소개
이미지를 불러와 마우스를 올리면 커서 아래 픽셀의 HEX·RGB·HSL 값이 실시간으로 표시됩니다. 색상을 클릭하면 고정되어 복사 버튼으로 각 형식의 값을 클립보드에 복사할 수 있습니다. Canvas getImageData API로 브라우저에서만 처리되며 이미지는 서버에 전송되지 않습니다.