이미지 색상 추출

색상추출 사용 방법

1. 이미지를 고릅니다. 팔레트가 바로 나옵니다.
2. 뽑을 색 수를 조절합니다.
3. 색을 누르면 헥스 코드가 복사됩니다.
4. .css 버튼을 누르면 CSS 변수 형태로 내려받습니다.

지원 형식과 입력 조건

방식

중앙값 자르기(median cut) 후 가까운 색 병합

색 수

2 ~ 16색

결과

헥스 · RGB · 이미지에서 차지하는 비율 · 전체 평균색

내려받기

CSS 변수 파일(:root { --color-1: ... })

처리 위치

브라우저 안에서만 분석하며 서버로 올리지 않습니다

많이 나온 색을 세는 방식과 무엇이 다른가

• 픽셀을 세어 상위 색을 뽑으면 사진에서는 거의 언제나 비슷한 색이 줄줄이 나옵니다. 하늘 사진에서 열 가지 파랑이 나오는 식입니다.
• 중앙값 자르기는 색 공간을 실제로 반으로 나눠 가며 서로 구별되는 대표색을 찾습니다.
• 뽑은 뒤에도 너무 가까운 색은 하나로 합칩니다. 팔레트에 거의 같은 색이 여럿 있으면 쓸모가 없기 때문입니다.

이미지에 없는 색은 내놓지 않습니다

• 구간의 평균색을 그대로 쓰면 원본에 없는 색이 나올 수 있습니다. 빨강과 노랑이 한 구간에 들어가면 평균이 주황이 되는 식입니다.
• 이 도구는 평균에 가장 가까운 **실제 픽셀 색**으로 맞춥니다. 팔레트에 있는 색은 모두 그 이미지 안에 실제로 존재합니다.
• 분석할 때 이미지를 줄이는데, 이때 보간을 끕니다. 보간하면 경계에서 두 색이 섞인 픽셀이 새로 만들어져 원본에 없던 색이 올라옵니다.

자주 묻는 질문

색상·디자인 분류의 다른 도구

• 색상코드변환 HEX·RGB·HSL 색상값을 서로 바꿔 줍니다
• 색상믹서 두 색을 섞어 중간색과 단계별 그러데이션을 만듭니다
• 색상팔레트생성 기준 색 하나로 어울리는 색 조합을 뽑아 줍니다