이미지 색상 추출

사진, 스크린샷, 로고에서 원하는 픽셀의 정확한 색을 찾아 HEX, RGB, HSL 색상 코드로 알려 주는 이미지 색상 추출 도구입니다. 확대 돋보기로 휴대폰이나 컴퓨터에서 원하는 픽셀을 정확히 고를 수 있고, 5~12색 팔레트와 대표색, 평균색도 뽑아 줍니다. 이미지는 브라우저 밖으로 나가지 않습니다.

사용법

1. 이미지를 열거나 카드에 끌어 놓거나 Ctrl+V로 스크린샷을 붙여 넣으세요. 그 전까지는 예시 이미지가 보입니다.
2. 이미지 위에 포인터를 올리면 돋보기가 나오고 클릭하면 그 픽셀의 색을 고릅니다. 휴대폰에서는 이미지를 손가락으로 누른 채 돋보기에 원하는 픽셀이 보일 때까지 움직인 뒤 떼세요.
3. HEX, RGB, HSL을 누르면 고른 색이 복사됩니다. 최근에 고른 색은 큰 색상 견본 옆 줄에 남습니다.
4. 팔레트는 자동으로 바뀝니다. 5~12색과 방식을 고르고, 견본을 눌러 복사하거나 CSS, JSON, PNG 견본으로 내보내세요.

• k-평균은 비슷한 색을 묶어 대개 가장 자연스러운 팔레트를 만듭니다. 미디언 컷은 색 범위를 고르게 나눠 작은 포인트 색도 남깁니다.
• 대표색은 팔레트에서 가장 큰 색 묶음입니다. 평균색은 보이는 모든 픽셀의 평균이라 차분한 색이 나오는 경우가 많습니다.
• 큰 이미지는 색을 고를 때 긴 쪽을 2400픽셀로 줄이며, 단색 영역의 색은 정확히 유지됩니다. 완전히 투명한 픽셀은 무시합니다.
• 이미지는 브라우저 안에만 있고 아무것도 업로드되지 않습니다.

픽셀 하나까지 정확하게

이미지 위에 포인터를 올리면 확대 돋보기가 나오고, 클릭하면 색을 가져옵니다. 터치 화면에서는 손가락을 댄 채 돋보기에 원하는 픽셀이 보일 때까지 움직였다가 떼면 됩니다. 큰 이미지는 색을 고를 때 긴 변 2400px로 줄여 로고나 화면의 단색 부분은 정확하게 잡힙니다. 사진에는 노이즈가 있어 하늘의 옆 픽셀끼리도 값이 조금 다를 수 있으니, 대표적인 색이 필요하면 팔레트를 보세요.

팔레트를 만드는 방식

k-means는 비슷한 색을 묶는 방식으로, 사진에서 가장 자연스러운 팔레트가 나오는 경우가 많습니다. median cut은 색 범위를 고르게 나누고 작은 포인트 색도 남겨 일러스트나 브랜드 이미지에 잘 맞습니다. 색마다 이미지에서 차지하는 비율이 표시됩니다.

대표색은 가장 큰 색 묶음입니다. 평균색은 보이는 모든 픽셀의 평균이라 실제 이미지에는 없는 탁한 색이 나오기도 합니다. 완전히 투명한 픽셀은 계산에서 뺍니다.

색상 코드 활용

HEX(#1e88e5)는 CSS, 디자인 툴, 브랜드 가이드에서 가장 많이 쓰는 형식입니다. RGB는 같은 색을 빨강·초록·파랑 0~255로, HSL은 색상·채도·명도로 나타내 더 밝거나 어두운 색을 만들기 쉽습니다. 팔레트는 CSS 변수, JSON, PNG 색상표로 내보낼 수 있습니다.

자주 묻는 질문