이미지 색상 추출란?
이미지 색상 추출은 사진 속 색의 정확한 코드를 알려 주는 온라인 스포이드 도구입니다. 로고나 웹사이트 캡처에서 브랜드 색을 따오거나, 마음에 드는 사진의 색감으로 디자인 팔레트를 만들 때 유용합니다. 확대경으로 픽셀 단위까지 정확하게 고를 수 있고, 휴대폰에서는 손가락으로 누른 채 움직이면 손가락 위에 확대경이 떠서 가리지 않습니다.
이미지는 브라우저 안에서만 처리되며 서버로 전송되지 않습니다.
사용 방법
- 위 상자에 이미지를 끌어 놓거나 눌러서 선택하세요. 화면 캡처는 Ctrl+V로 바로 붙여 넣을 수 있습니다.
- 이미지에서 원하는 지점을 누르세요. 확대경으로 위치를 확인하며 고를 수 있습니다.
- HEX, RGB, HSL 코드 옆의 복사를 눌러 디자인 툴이나 CSS에 붙여 넣으세요.
- 아래 대표 색상 팔레트에서 이미지 전체의 주요 색과 비율을 확인하고, 색을 누르면 바로 복사됩니다.
색상 코드 읽는 법
| 형식 | 예시 | 설명 |
|---|---|---|
| HEX | #4F46E5 | 빨강·초록·파랑을 16진수 두 자리씩 (웹, 피그마) |
| RGB | rgb(79, 70, 229) | 빨강·초록·파랑 0~255 (포토샵, PPT) |
| HSL | hsl(243, 75%, 59%) | 색상각·채도·밝기 (CSS로 색 변형할 때) |
대표 색상 팔레트는 어떻게 만드나요?
이미지를 작게 줄인 뒤 비슷한 색끼리 묶는 k-평균 군집(k-means) 방식으로 가장 많은 면적을 차지하는 색 최대 8가지를 찾습니다. 각 색 아래 숫자는 이미지에서 그 색 무리가 차지하는 비율입니다. 같은 이미지에서는 항상 같은 팔레트가 나옵니다.
JPG 사진은 압축 때문에 같은 색 면도 픽셀마다 값이 조금씩 다를 수 있습니다. 로고 색을 정확히 따려면 PNG 원본이나 확대경으로 면의 가운데를 고르세요.
자주 묻는 질문
화면에 보이는 색과 코드가 조금 달라요.
모니터 색 설정, 다크 모드, 이미지에 포함된 색 프로필 때문에 보이는 색이 약간 다를 수 있습니다. 추출한 코드는 이미지 파일에 저장된 픽셀 값 그대로입니다.
웹사이트의 색을 뽑고 싶어요.
원하는 화면을 캡처(윈도우 Win+Shift+S, 맥 Cmd+Shift+4)한 뒤 이 페이지에서 Ctrl+V로 붙여 넣고 원하는 지점을 누르세요.
최근 고른 색은 어디에 저장되나요?
최근 고른 색 12개는 이 브라우저에만 저장되어 다음에 방문해도 다시 볼 수 있습니다. 이미지는 저장되지 않습니다.
투명한 부분은 어떻게 되나요?
팔레트는 투명한 픽셀을 빼고 계산합니다. 투명한 지점을 누르면 색 정보가 없어 검정(#000000)으로 표시될 수 있습니다.