CHROMA

이미지에서 색상 추출

사진을 올리면 대표 색을 뽑아드립니다. 각 색이 사진에서 차지하는 비율과 가장 가까운 CSS 색 이름도 함께 보여드립니다.

올린 사진은 브라우저 밖으로 나가지 않습니다. 서버로 보내지 않고 화면 안에서만 읽습니다.

01 / PALETTE

뽑아낸 색

색을 누르면 HEX가 복사됩니다. 비율은 사진에서 그 색이 차지하는 넓이입니다.

아직 이미지가 없습니다. 위에 사진을 올려주세요.

02 / HOW

어떻게 뽑나요

사진의 픽셀을 고르게 표본으로 추린 뒤 median cut 방식으로 색 덩어리를 나눕니다. 빨강·초록·파랑 중 가장 넓게 퍼진 축을 골라 색이 크게 벌어지는 지점에서 자르고, 원하는 개수가 될 때까지 반복합니다.

각 덩어리의 대표색은 평균이 아니라 평균에 가장 가까운 실제 픽셀입니다. 평균을 쓰면 빨강과 파랑이 한 덩어리에 섞였을 때 사진에 없는 보라가 팔레트에 오릅니다.

같은 사진이면 항상 같은 팔레트가 나옵니다. 흔히 쓰이는 k-means는 난수로 시작해 돌릴 때마다 결과가 달라집니다.

03 / FAQ

자주 묻는 질문

올린 사진이 서버로 전송되나요?

아니요. 사진은 브라우저 안에서만 열려 픽셀을 읽는 데 쓰이고, 페이지를 닫으면 사라집니다. 네트워크로 내보내는 코드가 없습니다.

요청한 개수보다 적게 나올 때가 있어요.

사진에 뚜렷이 구분되는 색이 그만큼 없을 때 그렇습니다. 억지로 채우면 거의 같은 색이 여러 칸에 늘어서기 때문에, 구별되지 않는 색은 합쳐서 보여드립니다.

비율은 정확한가요?

표본으로 추린 픽셀을 최종 대표색에 다시 배정해 셉니다. 큰 사진은 최대 2만 픽셀을 고르게 뽑아 쓰므로 소수점 아래로는 오차가 있을 수 있지만, 눈에 보이는 넓이 비율과는 일치합니다.

MORE

이어서 볼 것