ColorPicker는 이미지를 클릭해 색상을 추출하는 무료 온라인 도구입니다. 마우스를 올리면 8배 확대경이 표시되어 픽셀 단위로 정확하게 색상을 집을 수 있으며, 추출한 색상을 HEX, RGB, HSL 형식으로 즉시 복사할 수 있습니다. 모든 처리가 브라우저 내에서만 이루어지므로 이미지가 외부 서버로 전송되지 않습니다.
주요 기능
기본 사용법
이미지 업로드
업로드 영역을 클릭하거나 이미지를 드래그해 불러옵니다. JPG, PNG, WEBP 형식을 지원합니다.
마우스를 올려 색상 미리보기
이미지 위에 마우스를 올리면 8배 확대경이 나타납니다. 원하는 위치로 이동하면 현재 색상이 우측 패널에 실시간으로 표시됩니다.
클릭해 색상 저장
원하는 색상 위를 클릭합니다. 색상이 우측 팔레트에 자동으로 저장되고 토스트 메시지로 확인됩니다.
코드 복사
우측 패널에서 원하는 형식(HEX / RGB / HSL) 옆의 복사 버튼을 클릭합니다. 클립보드에 바로 복사됩니다.
색상 코드 형식 가이드
ColorPicker는 동일한 색상을 3가지 형식으로 동시에 제공합니다. 사용하는 툴에 맞는 형식을 선택하세요.
| 형식 | 주로 사용하는 곳 | 특징 |
|---|---|---|
HEX | HTML, CSS, Figma, Sketch | 가장 범용적인 형식. 웹 개발의 표준 |
RGB | CSS, Photoshop, Illustrator | 빨강·초록·파랑 채널을 0~255로 표현 |
HSL | CSS, 색상 조화 작업 | 색상·채도·밝기로 표현. 색 조합에 직관적 |
팔레트 기능 활용
색상 저장 및 재선택
이미지를 클릭할 때마다 해당 색상이 팔레트에 자동으로 추가됩니다. 동일한 색상은 중복 저장되지 않습니다. 팔레트의 색상 칩을 클릭하면 해당 색상이 우측 패널에 다시 표시되어 코드를 복사할 수 있습니다.
팔레트 내보내기
내보내기 버튼을 클릭하면 저장된 모든 색상이 아래 형식으로 클립보드에 복사됩니다. 노션, 메모장, 스프레드시트에 바로 붙여넣을 수 있습니다.
#34D399 | rgb(52,211,153) | hsl(158, 62%, 52%)
#F87171 | rgb(248,113,113) | hsl(0, 91%, 71%)
대표 색상 자동 추출
이미지 전체의 색을 일일이 클릭하지 않아도 됩니다. ✨ 대표 색상 자동 추출 버튼을 클릭하면 이미지를 5×5 격자로 분석해 구역별 평균 색상을 계산하고 유사한 색상을 병합한 뒤 최대 10가지 대표 색상을 한 번에 보여줍니다.
추출된 색상 칩을 클릭하면 해당 색상이 팔레트에 저장되고 코드가 표시됩니다. 브랜드 색상 분석, 사진의 주요 컬러 파악, 디자인 레퍼런스 정리에 활용하기 좋습니다.
활용 예시
웹 개발 — 디자인 시안에서 색상 추출
디자이너에게 받은 시안 이미지를 업로드하고 주요 색상을 클릭합니다. HEX 코드를 복사해 CSS에 바로 붙여넣으면 색상 값을 직접 입력하는 번거로움이 사라집니다.
브랜드 가이드 작성
회사 로고 이미지를 업로드하고 대표 색상 자동 추출을 실행합니다. 추출된 색상을 팔레트에 저장한 뒤 내보내기로 색상 코드 목록을 만들 수 있습니다.
사진 기반 색상 팔레트 제작
마음에 드는 사진을 업로드하고 주요 색상 5~6가지를 클릭해 저장합니다. 팔레트를 내보내면 해당 사진의 무드를 담은 색상 세트를 완성할 수 있습니다. 인테리어, 패션, SNS 피드 색감 기획에 활용할 수 있습니다.