이미지의 주요 색상 뽑아내기
사진에 맞춰 페이지 색을 정할 때, 또는 스타일 가이드를 아무도 못 찾을 때 로고에서 브랜드 색상을 되찾을 때 씁니다.
- 브라우저 안에서 전부 처리됩니다
- 오프라인에서도 작동합니다
- 업로드 없음
- 가입 없음
- 워터마크 없음
도구를 불러오는 중…
작동 방식
- 이미지를 한 장 이상 끌어다 놓으세요.
- 원하는 색상 개수를 고르세요.
- 결과를 CSS 변수(웹페이지용)나 JSON으로 복사하세요.
왜 아무것도 업로드되지 않는가
이 페이지가 하는 모든 작업은 브라우저 탭 안에서 도는 코드가 처리합니다. 웹 페이지를 그리는 그 엔진을 그대로 씁니다. 파일은 디스크에서 탭의 메모리로 읽어 들여 거기서 변환한 뒤 다시 다운로드 파일로 내보냅니다. 어디로도 전송되지 않습니다. 우리에게도, 제3자에게도.
직접 확인해 보세요
- 브라우저 개발자 도구(F12)를 열고 네트워크(Network) 탭을 선택합니다.
- 파일을 올리고 도구를 실행합니다.
- 보이는 요청은 도구 자체의 코드를 받아 오는 것뿐입니다. 무거운 몇몇 도구는 공개 CDN에서 오픈소스 엔진을 함께 받아 옵니다. 여기에 loreatec.jp로 가는 작은 방문 집계 신호 하나(페이지 주소와 제목, 그 이상은 없습니다)가 더해집니다. 어느 것도 당신의 파일을 실어 나르지 않습니다.
자주 묻는 질문
색상은 어떻게 고르나요?
비슷한 색끼리 묶은 뒤, 그 묶음이 이미지에서 차지하는 비율로 순위를 매깁니다. 그래서 첫 번째 색이 흔히 “배경색”이라고 부를 법한 색입니다. 같은 이미지라면 결과는 항상 같습니다. 브랜드 색상을 정할 때 중요한 부분입니다.
팔레트가 왜 조금 탁하게 나오나요?
각 색상 견본이 그 묶음의 평균값이기 때문입니다. 넓은 회색 벽에 새빨간 로고가 있는 사진은 대부분 회색이고, 순위도 그렇게 매겨집니다. 색상 개수를 늘리면 작은 포인트 색도 드러납니다.
로고의 정확한 색을 얻을 수 있나요?
평면 그래픽이라면 됩니다. 영역이 균일해서 평균값이 곧 실제 값이니까요. 인쇄된 로고를 찍은 사진이라면 안 됩니다. 조명 때문에 픽셀마다 색이 조금씩 달라져서 결과는 근사값일 뿐입니다.
투명 배경도 처리되나요?
투명한 픽셀은 흰색으로 세지 않고 아예 제외됩니다. 그래서 배경 없는 PNG 로고라면 흰색이 뒤덮은 팔레트 대신 로고 자체의 색상이 나옵니다.