🎨 이미지 컬러 팔레트 추출

이미지에서 주요 색상 5 / 10 / 16 추출. HEX · RGB · HSL · CSS 변수 출력 지원.

완전 무료 가입 불필요 브라우저 완결 5 개 언어 다크 모드

🔒 개인정보 보호

・모든 처리는 브라우저 내에서
・이미지 데이터는 서버로 전송되지 않습니다
・저장 로그 · 기록 · DB 없음

🎨

드래그 · 클릭 · 붙여넣기

📖 자주 걸리는 지점

이미지에서 주요 색을 5 / 10 / 16 색 추출해 HEX · RGB · HSL 로 표시합니다. 처리는 브라우저 안에서 끝나며 이미지는 업로드되지 않습니다. 추출되는 것은 면적이 많은 색이지 디자인상 중요한 색이 아닙니다 — 사진이라면 배경의 하늘이나 벽이 상위를 차지하고 로고에서도 여백이 최다가 됩니다. 브랜드 컬러를 꺼내고 싶을 때는 그 전제로 결과를 읽으세요.

사례	무슨 일이 일어나는가	어떻게 하면 되는가
비슷한 색만 나열된다	JPEG 의 압축 노이즈, 사진의 그러데이션, 안티에일리어싱의 가장자리 등 사람 눈에는 한 색으로 보이는 영역이 데이터상으로는 수백 개의 미묘하게 다른 색으로 되어 있습니다. 단순히 출현 빈도로 나열하면 상위가 같은 계열 색으로 채워집니다. 특히 하늘이나 피부 같은 넓은 그러데이션에서 두드러집니다.	추출 색 수를 줄이세요. 16색보다 5색 쪽이 통일감 있는 팔레트가 됩니다. 용도가 디자인이라면 그중 실제로 쓰는 것은 2~3색이고 나머지는 뉘앙스의 참고입니다. 이미지 쪽에서 대처한다면 이미지 리사이즈로 작게 한 뒤 통과시키면 세밀한 노이즈가 평균화되어 주요 색을 집기 쉬워집니다.
추출한 색을 그대로 UI 에 쓰면 안 읽힌다	사진에서 딴 색은 명도가 고르지 않습니다. 배경에 쓸 생각인 색이 중간 명도라면 흰색으로도 검정으로도 글자의 대비가 부족합니다. WCAG 는 본문에 4.5:1, 큰 글자에 3:1 의 대비비를 요구하지만 사진에서 딴 그대로의 색으로 이를 충족하는 일은 드뭅니다.	추출한 색은 색상의 힌트로 쓰고 명도와 채도는 스스로 정하세요. 색상 코드 변환으로 HSL 로 고쳐 `H` 만 남기고 `L` 을 흔들면 통일감 있는 스케일(배경용 95%, 경계선용 80%, 텍스트용 30% 등)을 만들 수 있습니다. 만든 조합은 반드시 대비비를 재고 나서 채용하세요.
같은 이미지인데 매번 결과가 다르다	주요 색 추출에는 k-means 같은 초깃값에 난수를 쓰는 알고리즘이 일반적으로 쓰입니다. 그래서 실행할 때마다 결과가 조금씩 달라집니다. 이는 결함이 아니라 알고리즘의 성질이며, 색 수가 많을수록 또 색의 분포가 완만할수록 흔들림이 커집니다.	마음에 드는 결과가 나오면 그 HEX 를 적어 고정하세요. 디자인 토큰으로 CSS 변수에 써 두면 이후 재추출할 필요가 없습니다. 반대로 매번 같은 결과가 필요한 처리(썸네일 배경색을 자동 생성하는 등)를 프로그램으로 짤 경우에는 k-means 가 아니라 색 공간을 격자로 나누어 최빈 구획을 고르는 방식을 선택하세요 — 결정적이므로 같은 입력에서 반드시 같은 색이 나옵니다.

추출한 색을 그대로 나열한 것만으로는 배색이 되지 않습니다. 실제로 필요한 것은 주색 하나와 그에 대한 명도 차이의 스케일, 그리고 대비를 위한 액센트 한 색입니다. 색 수를 늘릴수록 화면은 정리되지 않게 됩니다. 또 다크 모드에서는 색을 반전시키는 것이 아니라 채도를 낮추고 명도를 다시 올리는 것이 정석입니다 — 밝은 배경에서 돋보이는 선명한 색은 어두운 배경에서는 번들거려 읽기 어려워집니다. 추출 결과는 그 스케일을 조립하기 위한 출발점으로 쓰세요.

📖 사용법

1

이미지 불러오기

드래그 · 클릭 · 붙여넣기.
2

색상 수 선택

5 / 10 / 16 색 선택, HEX/RGB/HSL.
3

추출 · 복사

스와치 클릭 또는 일괄 CSS 복사.

❓ 자주 묻는 질문

어떤 알고리즘을 사용합니까?

Median Cut 알고리즘 사용. k-means보다 빠르고 안정적.

이미지가 업로드됩니까?

아니요. Canvas API로 브라우저 내에서만.

투명 PNG 처리 방법은?

완전 투명은 무시, 반투명은 그대로 사용.

🔗 관련 도구

🐛 이 도구에서 문제가 발생했나요?

무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.