같은 이미지인데 결과가 조금씩 다릅니다.

이미지를 200px로 줄여 처리하기 때문에 미세한 차이가 있을 수 있습니다. 다만 대표 색 자체는 안정적으로 같은 계열이 나옵니다.

원하는 색이 안 나옵니다.

면적이 아주 작은 색은 대표 색에 들어가지 못합니다. 개수를 12~16으로 늘려 보거나, 그 색이 크게 보이도록 이미지를 잘라서 넣어 보세요.

알파값이 낮은 픽셀은 제외합니다. 투명 배경 PNG에서도 실제 그림의 색만 뽑힙니다.

사진에서 대표 색을 뽑아 HEX 코드로 보여줍니다.

설정

뽑을 색 개수 (2~16)

이미지를 고르면 대표 색을 뽑아 보여줍니다.

뽑은 색으로 배색을 만들고 명암비를 검사하려면 색상 팔레트 만들기를 쓰세요.

같은 이미지인데 결과가 조금씩 다릅니다.: 이미지를 200px로 줄여 처리하기 때문에 미세한 차이가 있을 수 있습니다. 다만 대표 색 자체는 안정적으로 같은 계열이 나옵니다.
원하는 색이 안 나옵니다.: 면적이 아주 작은 색은 대표 색에 들어가지 못합니다. 개수를 12~16으로 늘려 보거나, 그 색이 크게 보이도록 이미지를 잘라서 넣어 보세요.
투명한 부분은 어떻게 되나요?: 알파값이 낮은 픽셀은 제외합니다. 투명 배경 PNG에서도 실제 그림의 색만 뽑힙니다.

중앙값 분할(median cut) 방식입니다. 이미지의 모든 색을 3차원 공간에 놓고, 가장 넓게 퍼진 축을 기준으로 절반씩 계속 쪼갭니다. 각 덩어리의 평균이 대표 색이 됩니다.

단순 ‘가장 많이 쓰인 색’을 세는 방식보다 색의 분포를 고르게 반영해, 사람이 보기에 자연스러운 팔레트가 나옵니다.

비중이 큰 색이 그 이미지의 바탕색입니다. 비중이 작으면서 채도가 높은 색이 보통 강조색으로 쓰기 좋습니다.

‘CSS 변수로 복사’를 누르면 :root 블록이 클립보드에 담깁니다. 스타일시트에 붙여넣고 var(--color-1) 처럼 쓰면 됩니다.

예쁜 색이 읽기 좋은 색은 아닙니다. 배경과 글자의 명암비가 WCAG AA 기준(본문 4.5:1)을 넘는지 확인해야 합니다 — 색상 팔레트 만들기에 검사 기능이 있습니다.

색 추출은 브라우저의 캔버스에서 이뤄집니다. 이미지가 서버로 전송되지 않습니다.

화면에서 고른 색이 인쇄하면 달라 보이는 것은 화면은 빛을, 인쇄는 잉크를 쓰기 때문입니다. 인쇄물이라면 시안을 실제로 한 장 뽑아 보고 정하세요.