MultiKit
사용 방법
- 사진을 상자에 놓거나 선택합니다.
- 찾을 색상 수를 4~12개 중에서 고릅니다. 적으면 가장 뚜렷한 색 위주로, 많으면 작은 디테일까지 잡아냅니다.
- 색상 옆의 "복사"로 헥스 코드 하나를 복사하거나, "모두 CSS 변수로 복사"로 전부를 한 번에 스타일시트에 붙여 넣을 수 있는 형태로 복사하세요.
예시
흰 테이블 위 빨간 사과 사진
→ 가장 큰 비율의 #f5f5f0에 가까운 흰색과 #c0392b에 가까운 빨간색피사체가 화면을 꽉 채우지 않는 한 배경이 가장 큰 비율을 차지하는 경우가 많습니다.
3색 단순 로고에서 6색 요청
→ 실제 3가지 색이 각각 더 큰 비율로 나옴단순한 그림에서 색을 더 요청해도 같은 색을 더 깔끔히 나눌 뿐입니다.
"모두 CSS 변수로 복사"
→ --color-1부터 --color-N까지 담은 :root 블록스타일시트에 바로 붙여 넣을 수 있습니다.
계산 방식
사진은 다른 무엇보다 먼저 긴 변 기준 최대 200픽셀로 줄입니다. 팔레트는 요약이라 모든 픽셀이 필요 없고, 이렇게 하면 큰 사진에서도 페이지가 빠릅니다. 픽셀은 GIF 만들기에서도 쓰는 같은 오픈소스 라이브러리 gifenc(MIT)로 고른 색상 수만큼 양자화하고, 모든 픽셀을 그 팔레트에서 가장 가까운 색에 대응시켜 색마다 픽셀 수를 셉니다. 색상은 그 수를 기준으로 많이 쓰인 순서대로 보여 줍니다.
세고 정렬하는 부분은 테스트로 확인하고, 외부 루틴인 양자화 자체는 실제 브라우저에서 페이지를 통해 확인합니다.
출처
자주 묻는 질문
- 색상은 어떻게 고르나요?
- 양자화라는 방식입니다. 사진의 픽셀을 색상 거리로 요청한 수만큼 군집으로 묶고 각 군집의 평균 색을 취합니다. GIF 인코더가 제한된 팔레트에 그림을 맞출 때 쓰는 것과 같은 단계이지, '좋은' 색을 예술적으로 판단하는 것이 아닙니다.
- 퍼센트는 무슨 뜻인가요?
- 표본으로 삼은 모든 픽셀 중 그 색에 가장 가까운 픽셀의 비율입니다. 모든 픽셀이 보이는 색 중 정확히 하나에 들어가므로 보이는 색들의 퍼센트를 합치면 100%가 됩니다.
- 분명히 보이는 색이 왜 안 나오나요?
- 사진에서 작은 부분이라 고른 색상 수에서 근처의 비슷한 색 군집에 묻혔을 수 있습니다. 찾을 색상 수를 늘리면 대개 드러납니다.
- 사진에도 되나요, 단순한 그래픽에만 되나요?
- 둘 다 됩니다. 다만 사진은 로고보다 색이 훨씬 다양해서 색상 수를 적게 요청하면 정확한 목록이라기보다 요약에 가깝습니다.
- 내 사진이 업로드되나요?
- 아니요. 색상은 브라우저에서 계산합니다.
관련 도구
버전 기록
- 1.0.1 — 검색 제목에서 도구의 핵심 작업과 무료·온라인 사용 여부를 더 분명하게 안내합니다.
- 1.0.0 — 첫 공개.