이미지 색상 추출은 사진이나 디자인 시안을 올리면 이미지 전체를 분석해 대표 색상을 팔레트로 뽑아주는 도구입니다. 단순히 색을 나열하는 데서 끝나지 않고, 팔레트에서 색상을 클릭하면 그 색이 이미지의 어느 영역에 쓰였는지 나머지를 어둡게 가려 바로 보여줍니다. 반대로 이미지의 궁금한 부분을 클릭하면 그 부분의 색이 팔레트에서 선택됩니다. 뽑은 색은 HEX 복사는 물론 CSS 변수·Tailwind 설정 형식으로 한 번에 내보낼 수 있습니다.
카드뉴스 배경색을 정할 때 마음에 드는 레퍼런스 사진에서 색 조합만 빌려오고 싶은 경우가 많은데, 기존 색상 추출 사이트들은 HEX 몇 개를 던져주고 끝이라 그중 어떤 게 벽지 색이고 어떤 게 소품 색인지는 원본을 확대해 가며 눈으로 맞춰야 했습니다. 특히 카페 인테리어 사진처럼 비슷한 톤이 여러 군데 섞여 있으면 팔레트만 보고는 구분이 안 돼서 결국 스포이드를 따로 켜는 이중 작업이 생겼습니다. 그래서 이 도구는 뽑힌 색을 클릭하면 그 색이 실제로 쓰인 영역을 이미지 위에 바로 짚어주게 만들었습니다. 색을 고르는 동시에 그게 배경색인지 포인트색인지 판단할 수 있고, 색상별 비중(%)도 함께 표시되어 주조색과 보조색을 감이 아니라 숫자로 확인할 수 있습니다.
사용 방법
지원하는 형식
입력은 PNG·JPEG·WebP 이미지이며 한 번에 최대 20장, 장당 30MB까지 올릴 수 있습니다. 결과물은 색상별 HEX 코드(개별·전체 복사), CSS 변수(:root) 코드, Tailwind CSS colors 설정 코드, 그리고 팔레트를 한 장으로 담은 PNG 이미지입니다. 투명 배경 PNG는 투명한 부분을 제외하고 분석합니다.
-
이미지를 드래그하거나 클릭해서 업로드합니다. 여러 장을 한 번에 올리면 아래 썸네일에서 전환하며 볼 수 있습니다.
-
업로드하는 즉시 대표 색상이 비중 순으로 정렬된 팔레트가 나타납니다. 색상 개수 슬라이더를 움직이면 3~16개 사이에서 더 굵직하게 묶거나 더 잘게 나눌 수 있습니다.
-
팔레트에서 색상을 클릭하면 그 색이 쓰인 영역만 밝게 남고 나머지는 어둡게 표시됩니다. 반대로 이미지에서 궁금한 부분을 클릭해도 해당 색상이 선택됩니다.
-
색상 옆 복사 버튼으로 HEX 코드를 하나씩 복사하거나, 내보내기에서 HEX 전체·CSS 변수·Tailwind 설정을 한 번에 복사합니다. 팔레트 PNG 버튼을 누르면 색상표 이미지로 저장됩니다.
색상은 k-means 군집화로 계산하므로 노이즈가 많은 사진에서도 비슷한 색이 중복으로 나오지 않고, 같은 이미지는 언제나 같은 팔레트가 나옵니다.