본문으로 건너뛰기
Utilizy

색상 추출

이미지에서 대표 색상 팔레트 뽑기

브라우저 내 처리

이미지

결과

결과

아직 이미지를 올리지 않았습니다

이미지를 올리면 대표 색상이 여기에 표시됩니다.

표시된 비율은 해당 색 계열이 이미지에서 차지하는 면적입니다.

마음에 드는 사진이나 참고 디자인의 색 조합을 그대로 가져오고 싶을 때 씁니다. 이미지에서 가장 많이 쓰인 색들을 비중과 함께 보여 주므로 어떤 색이 주가 되는지 바로 알 수 있습니다.

사용 방법

  1. 1 색을 뽑을 이미지를 올립니다.
  2. 2 팔레트가 자동으로 만들어집니다.
  3. 3 색상 개수를 조절해 원하는 만큼 세분화합니다.
  4. 4 개별 HEX 값을 복사하거나 CSS 변수 블록을 통째로 가져갑니다.

자주 묻는 질문

색이 어떻게 뽑히나요?

k-means 군집화로 이미지의 픽셀을 비슷한 색끼리 묶고, 각 묶음의 평균 색을 대표색으로 삼습니다. 옆에 표시되는 비율은 그 색 계열이 이미지에서 차지하는 면적입니다.

몇 개로 뽑는 게 좋나요?

브랜드 색을 찾는 용도라면 4~6개가 적당합니다. 개수를 늘리면 비슷한 톤이 더 세분화되어 그러데이션에 가까워집니다.

실행할 때마다 값이 조금씩 다릅니다.

픽셀을 샘플링해 계산하므로 미세한 차이가 생길 수 있습니다. 큰 색 계열은 항상 동일하게 나옵니다.

함께 쓰면 좋은 도구