이미지 색상 추출
🎨 색상이미지를 올려 원하는 지점을 클릭하면 HEX·RGB 색상 코드를 뽑아 줍니다.
이미지 업로드
이미지를 클릭하여 색상을 추출하세요
최대 10MB
이미지 위에서 클릭하면 해당 위치의 색상이 추출됩니다.
최대 10개의 색상을 저장할 수 있습니다.
🖼️ 이미지 색상 추출이란?
이미지 색상 추출 도구는 업로드한 이미지에서 정확한 색상 코드를 뽑아내는 도구입니다. 마우스를 올리면 실시간으로 색상을 미리 보고, 클릭하면 해당 색상이 저장됩니다.최대 10개의 색상을 저장하여 팔레트로 활용할 수 있으며, HEX와 RGB 코드를 제공합니다. 디자인 레퍼런스 분석, 브랜드 컬러 추출, 사진 색감 연구 등에 유용합니다.
🎨 디자인 팁
이미지를 5등분해서 각 영역에서 가장 넓은 면적의 색을 한 번씩 뽑으면 자연스러운 5색 팔레트가 만들어집니다.
📊 색상 추출 활용 분야
| 분야 | 활용 방법 | 예시 |
|---|---|---|
| 웹 디자인 | 참고 이미지에서 색상 추출 | 영감받은 사이트의 색상 분석 |
| 브랜딩 | 로고/제품 이미지에서 컬러 추출 | 브랜드 가이드라인 문서화 |
| 사진 편집 | 원본 사진의 색조 분석 | 색보정 참고값 확보 |
| 일러스트 | 참고 작품의 팔레트 추출 | 색감 연구 및 학습 |
💡 색상 추출 팁
- 대표색 선택: 이미지를 5등분해서 각 영역에서 가장 넓은 면적의 색을 한 번씩 뽑으면, 자연스러운 5색 팔레트가 만들어집니다.
- 그림자/하이라이트 짝짓기: 같은 물체의 빛 받는 면(밝은 톤)과 그늘진 면(어두운 톤)을 함께 뽑으면 UI 버튼의 기본/액티브 상태로 그대로 매핑할 수 있습니다.
- 고해상도 이미지: 가로 1200px 이상의 이미지가 좋습니다. 썸네일급 이미지는 안티앨리어싱으로 인해 경계선 픽셀이 의도와 다른 색으로 나옵니다.
- JPEG 압축 주의: JPEG는 8x8 블록 단위로 색이 평균화되어 단색 영역이라도 가장자리에서 색이 살짝 흔들립니다. 정확도가 중요하면 PNG/WebP(loseless) 권장.
- 중앙 픽셀만 보지 말기: 사진 인물의 피부톤을 뽑을 때 정확히 한 픽셀만 보면 노이즈에 영향을 받습니다. 같은 영역을 3~4번 다른 위치에서 뽑고 평균을 내세요.
- 웹/인쇄 색공간: 이 도구는 sRGB 기준입니다. 인쇄용 CMYK는 별도 변환이 필요하며, 채도 높은 형광색은 그대로 인쇄되지 않을 수 있습니다.
🖌️ 어떤 작업에 자주 쓰는지
무드보드를 만들 때 가장 유용합니다. Pinterest에서 마음에 드는 인테리어 사진을 다운로드한 뒤 가구, 벽, 소품, 조명 영역에서 한 색씩 뽑으면 거실에 어울리는 5색 팔레트가 완성되고, 그대로 Figma 컬러 변수로 옮겨 디자인을 시작할 수 있습니다.영화 포스터 분석에도 활용도가 높은데, 웨스 앤더슨 영화의 핑크-시안 조합이나 누아르 영화의 시안-앰버 같은 유명한 색조 패턴을 직접 뽑아보면서 색채 설계의 이론을 체감할 수 있습니다. 개인 브랜딩에서는 자신이 좋아하는 사진 3장에서 공통적으로 등장하는 색조를 찾으면 자연스러운 퍼스널 컬러 키트가 만들어집니다.
자주 묻는 질문
추출한 색상이 원본과 다르게 보여요▼
모니터의 색상 프로필(sRGB/P3/Adobe RGB), 이미지 압축, 색공간 차이로 인해 발생할 수 있습니다. 캘리브레이션된 모니터와 무손실 이미지(PNG, 무압축 WebP)를 사용하면 더 정확한 결과를 얻을 수 있습니다.
이미지가 서버로 업로드되나요?▼
아니요, 모든 처리는 브라우저에서 로컬로 이루어집니다. 이미지는 서버로 전송되지 않으며, 페이지를 닫으면 데이터가 삭제됩니다. 저작권 있는 레퍼런스도 안심하고 분석할 수 있습니다.
최대 10개 이상 추출할 수 있나요?▼
새로운 색상을 추출하면 가장 오래된 색상이 자동으로 삭제됩니다. 필요한 색상은 복사 버튼으로 미리 메모장이나 디자인 툴에 저장해두는 워크플로우를 권장합니다.
한 픽셀의 평균색이 아니라 영역 평균을 뽑을 수 있나요?▼
현재는 클릭한 정확한 픽셀의 색을 가져옵니다. 영역 평균이 필요하면 같은 부근을 여러 번 클릭한 뒤 결과들의 RGB 평균을 직접 내거나, 사전에 이미지를 약간 블러 처리한 뒤 뽑는 방법이 효과적입니다.