이미지 컬러 팔레트 추출

이미지를 올리면 주요 색상이 팔레트로 자동 추출돼요. 개수를 조절하고 HEX나 CSS 변수를 한 번에 복사하세요. 업로드는 없어요.

이미지를 여기에 끌어다 놓으세요클릭해서 골라도 돼요 — JPEG, PNG, WebP, AVIF, GIF, BMP, SVG

이미지를 올리는 순간 컬러 팔레트가 자동으로 만들어져요.

클립보드에 담아 둔 이미지는 Ctrl + V(맥은 Cmd + V)로 바로 붙여넣어도 돼요.

파일이 서버로 전송되지 않아요

모든 작업이 지금 쓰고 있는 브라우저 안에서 끝나요. 업로드 자체가 없어서, 탭을 닫는 순간 아무것도 남지 않아요.

광고

사용 방법

  1. 이미지 불러오기

    JPEG·PNG·WebP·AVIF·GIF·BMP·SVG를 끌어다 놓거나 Ctrl + V로 붙여넣으세요. 브라우저가 파일을 바로 읽어서 업로드도 기다림도 없어요.

  2. 팔레트가 알아서 만들어져요

    이미지가 올라오는 순간 미디언 컷(median cut) 방식으로 주요 색상이 자동으로 추출돼요. 버튼을 누르거나 미리 설정할 것도 없어요.

  3. 색상 개수 조절하기

    4개부터 16개까지 개수를 바꿔서, 딱 필요한 브랜드 컬러만 뽑을 수도 있고 이미지의 색 범위를 더 폭넓게 담을 수도 있어요.

  4. 한 번에 복사하기

    HEX를 전부 복사하거나, 바로 붙여넣을 수 있는 CSS 변수로 복사하세요. 주요 색상 말고 정확히 한 픽셀이 필요하다면 아래쪽 픽셀 선택 기능도 그대로 쓸 수 있어요 — 이미지 위에 커서를 올리고 클릭하면 돼요.

자주 묻는 질문

주요 색상은 정확히 어떻게 계산되나요?

이미지를 10만 픽셀 정도로 줄인 다음 미디언 컷 방식으로 묶어요. 색이 가장 넓게 퍼진 덩어리를 둘로 쪼개는 과정을 원하는 개수가 될 때까지 반복하고, 각 덩어리의 평균색을 스와치 하나로 만들어요. 스와치는 이미지에서 차지하는 넓이순으로 정렬돼서, 첫 번째 색이 언제나 가장 지배적인 색이에요.

왜 어도비나 Coolors랑 팔레트가 다르게 나오나요?

팔레트 추출 도구마다 픽셀을 묶는 방식이 조금씩 달라서 결과가 완전히 똑같이 나오는 경우는 드물어요. 이 도구는 미디언 컷을 쓰는데, 이미지에서 넓게 퍼진 단색 영역을 잘 잡아내는 방식이에요. 로고나 일러스트처럼 색이 몇 가지로 딱 떨어지는 이미지는 깔끔하게 뽑히고, 그러데이션이 많은 사진은 도구가 색 퍼짐과 픽셀 수를 어떻게 가중치 두느냐에 따라 결과가 조금씩 달라질 수 있어요.

UI나 브랜드 팔레트는 몇 개 색을 뽑는 게 좋나요?

브랜드 보드용이라면 4~6개 정도가 잡색 없이 주요 색만 딱 보여줘요. 기본색 하나에 강조색 몇 개, 중립색까지 담는 UI 팔레트라면 8~12개가 적당한 범위예요. 그보다 많아지면 뒤로 갈수록 확연히 다른 색이라기보다 미세한 변형에 가까워져요.

추출한 팔레트를 무드보드나 브랜드 보드에 써도 되나요?

네. HEX 목록을 디자인 툴에 붙여 넣거나, CSS 변수를 스타일시트에 바로 붙여 넣어서 눈대중으로 색을 고르는 대신 이미지의 실제 색으로 시안을 잡아 볼 수 있어요.

팔레트 말고 특정 색 하나만 필요하면 어떻게 하나요?

같은 도구 안에 있는 픽셀 선택 기능을 쓰면 돼요. 이미지 위에 커서를 올리면 돋보기가 주변 픽셀을 확대해서 보여주고, 클릭하거나 드래그하면 그 색이 HEX·RGB·HSL·HSB·CMYK로 한 번에 표시돼요.

이미지가 어딘가로 업로드되는 순간이 있나요?

없어요. Canvas API를 이용해서 브라우저 안에서만 읽고 색을 뽑기 때문에 파일이 서버로 전송되지 않아요. 뽑은 색은 그 탭 안에만 남고, 어디에도 저장되지 않아서 탭을 닫으면 그대로 사라져요.