이미지 색상 팔레트 추출기

사용 방법

1. 1

   이미지 고르기

   업로드 영역에 사진을 끌어다 놓거나 클릭해서 파일을 선택합니다. 이미지가 아니거나 브라우저가 열 수 없는 파일이면 미리보기 대신 안내 문구가 나옵니다. 샘플 이미지 버튼으로 데모 그림으로 돌아갈 수 있습니다.

2. 2

   색상 개수 정하기

   슬라이더를 3~10 사이로 움직입니다. 값은 상위 색상 상자를 몇 개 반환할지만 정하며, 같은 순위의 앞쪽 N개 색은 어떤 설정에서도 같습니다. 버튼을 누를 필요 없이 팔레트가 바로 바뀝니다.

3. 3

   색 상자 확인하기

   색 상자는 픽셀이 많은 묶음부터 적은 묶음 순으로 놓입니다. 각 상자에는 대문자 HEX 코드와 불투명 픽셀 중 그 묶음의 비율이 표시되고, 아래 막대가 같은 비율을 한눈에 보여 줍니다.

4. 4

   색이나 CSS 변수 복사하기

   상자의 아이콘으로 HEX 하나를, 패널 머리글 버튼으로 모든 코드를, --palette-1: #c82828;이 들어 있는 :root 블록은 복사하거나 파일로 내려받을 수 있습니다. 쓰기 전에 대비 검사기로 글자와 배경 조합을 확인하세요.

작동 원리

묶음(v)   = min(255, round(v / 32) * 32)
색 상자    = 묶음 안 실제 픽셀의 평균
거리       = sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)
이미 뽑은 모든 색과 거리 > 42 일 때만 채택
비율       = 묶음 픽셀 수 / 불투명 픽셀 수

실제 예시

불투명 픽셀 115개:
50 x rgb(250,120,40)
20 x rgb(252,124,44)
30 x rgb(30,60,200)
10 x rgb(240,240,240)
5 x rgb(10,10,10)

1. #fb7929  61%
2. #1e3cc8  26%
3. #f0f0f0  8.7%
4. #0a0a0a  4.3%

10 x rgb(200,200,200)
8 x rgb(210,205,198)
5 x rgb(255,255,255)

1. #c8c8c8  43%
2. #ffffff  22%

40 x rgba(0,0,0,0)
10 x rgba(200,40,40,255)

1. #c82828  100%

색 상자: #fb7929, #1e3cc8, #f0f0f0, #0a0a0a

:root {
  --palette-1: #fb7929;
  --palette-2: #1e3cc8;
  --palette-3: #f0f0f0;
  --palette-4: #0a0a0a;
}

자주 하는 실수

• 한 픽셀이 아니라 묶음의 평균입니다

  색 상자는 비슷한 픽셀 묶음의 평균입니다. 팔레트의 방향을 잡는 데는 좋지만 브랜드 색의 기준값은 아닙니다. 정확한 값이 필요하면 색 선택기로 평평한 영역의 한 픽셀을 찍고 색상 코드 변환기로 확인하세요.

• 넓은 단색 배경이 1등을 차지합니다

  순위가 픽셀 수 기준이라 하얀 스튜디오 배경이나 하늘이 첫 칸을 채웁니다. 피사체의 색이 필요하면 이미지를 피사체 위주로 먼저 자르거나 색상 개수를 늘리세요.

• 요청보다 적게 나오는 것은 정상입니다

  앞 색과 너무 가까운 색은 버려지고, 단순한 그래픽은 서로 다른 묶음이 몇 개뿐일 수 있습니다. 2색 이미지는 슬라이더가 10이어도 2~3개만 나옵니다.

• 안티앨리어싱 가장자리가 잡색을 만듭니다

  도형과 배경이 맞닿는 가장자리 픽셀은 두 색이 섞여 작은 색 상자가 되기도 합니다. 보통 비율이 아주 작으니 무시하거나 색상 개수를 줄이세요.

• 팔레트가 곧 접근성 있는 배색은 아닙니다

  대표 색은 이미지 한 장에서 나온 것이라 가독성에 대해 아무것도 말해 주지 않습니다. 디자인에 쓰기 전에 모든 글자·배경 조합의 대비를 확인하세요.

자주 묻는 질문