CodeKitHub이 도구는 무엇인가요?
평균 색상은 각 픽셀의 빨강, 초록, 파랑 값의 산술 평균입니다 — 이미지 전체 톤을 나타내는 단일 혼합 색상이지만, 이미지에 서로 매우 다른 색상 영역이 있으면 탁하게 보일 수 있습니다.
주요 색상은 다릅니다: 이 도구는 유사한 픽셀 색상을 버킷으로 그룹화하고(각 RGB 채널을 양자화), 각 버킷에 몇 개의 픽셀이 속하는지 계산한 다음, 가장 흔한 것을 고유한 스와치로 반환합니다 — 이는 단일 평균 혼합보다 사람이 "이 이미지의 주요 색상"이라고 부를 만한 것에 더 가깝습니다.
왜 사용해야 할까요?
- 한 번의 업로드로 단일 숫자가 아닌 평균 색상과 실제 다색 팔레트를 모두 얻으세요.
- 디자인 프로젝트를 위해 사진, 스크린샷 또는 로고에서 사용 가능한 색상 팔레트를 추출하세요.
- 아무 스와치나 클릭하면 정확한 HEX 코드가 즉시 복사됩니다.
- 완전히 브라우저에서 실행됩니다 — 이미지는 캔버스를 통해 로컬에서 읽히며 어디에도 업로드되지 않습니다.
- 무료, 즉시, 계정 불필요, 브라우저 자체의 제한 외에는 파일 크기 제한이 없습니다.
사용 방법
- 업로드 버튼을 클릭하고 기기에서 이미지를 선택하세요.
- 평균 색상과 주요 색상 팔레트가 자동으로 표시됩니다 — 추가 버튼 클릭이 필요 없습니다.
- 아무 스와치(평균 색상 또는 팔레트의 아무 색상)나 클릭하여 HEX 코드를 복사하세요.
예시
입력
주황색 하늘과 짙은 파란색 실루엣이 있는 노을 사진결과
평균 색상: 탁한 갈색빛 주황 혼합 · 주요 색상: 밝은 주황, 짙은 빨강, 거의 검정, 옅은 노랑(각각 별도의 고유 스와치로)이는 평균 색상과 주요 색상이 가장 크게 벌어지는 전형적인 경우입니다 — 평균은 따뜻한 톤과 차가운 톤을 섞어 탁하게 만들지만, 주요 색상 팔레트는 이를 명확하게 구분되는 색상으로 유지합니다.
자주 묻는 질문
평균 색상이 실제 이미지에 존재하는 어떤 색상과도 왜 이렇게 다른가요?
평균화는 모든 픽셀을 수학적으로 함께 섞습니다 — 이미지에 밝은 주황색 영역과 짙은 파란색 영역이 모두 있으면, 평균은 원본 사진 어디에도 시각적으로 존재하지 않을 수 있는 탁한 갈색 근처에 위치하게 됩니다. 이는 진짜 평균의 예상된 동작이며 버그가 아닙니다. 이미지에 실제로 나타나는 색상을 원한다면 대신 주요 색상 팔레트를 사용하세요.
제 이미지가 서버에 업로드되나요?
아니요. 이미지는 Canvas API를 사용하여 브라우저에서 직접 읽히며, 모든 색상 분석은 JavaScript로 로컬에서 이루어집니다. 네트워크를 통해 전송되는 것은 전혀 없습니다.
주요 색상은 몇 개까지 반환되나요?
최대 8개이며, 각 색상 버킷에 일치한 픽셀 수가 많은 순서대로 정렬됩니다. 이미지가 색상 면에서 매우 균일하다면 8개보다 적은 고유 버킷이 보일 수 있습니다.
PNG의 투명 픽셀도 계산에 포함되나요?
아니요 — 불투명도가 50% 미만인 픽셀은 평균 색상과 주요 색상 계산 모두에서 제외되므로, 투명한 배경이 그 뒤로 비치는 색상으로 결과가 왜곡되지 않습니다.