이미지 평균 색상 추출기

모든 픽셀을 평균 낸 색 하나

이미지를 올리면 캔버스에 그린 뒤 모든 픽셀을 읽어, 완전히 투명하지는 않은 픽셀의 빨강·초록·파랑 값을 각 픽셀의 불투명도만큼 가중해 평균 냅니다. 결과는 HEX와 RGB 코드가 함께 표시된 색상 스와치로 나타나며, CSS나 디자인 도구, 팔레트에 바로 복사해 넣을 수 있습니다. 올린 그림도 옆에 함께 보여 주므로 어떤 이미지에서 뽑은 색인지 바로 확인할 수 있습니다. 평균 색상과 함께 그림에서 많이 쓰인 주요 색상 팔레트도 3개에서 10개까지 원하는 개수만큼 뽑아 주며, 색마다 HEX 코드와 그림에서 차지하는 비율이 표시되고 모든 코드를 한 번에 복사하는 버튼도 있습니다. 알파값 128인 픽셀은 불투명한 픽셀의 절반만큼만 당기고 완전히 투명한 픽셀은 전혀 반영되지 않아, 부드러운 가장자리나 반투명 레이어가 평균을 흰색이나 검은색 쪽으로 끌고 가지 않습니다. 평균 방식은 두 가지로, 단순 평균은 각 채널을 그대로 평균 내고, 제곱근 평균은 빛이 섞이는 방식대로 제곱의 평균에 제곱근을 취해 빨강 절반·초록 절반이 탁한 #808000 이 아니라 #b4b400 으로 나옵니다.

평균 색상이 유용한 순간

이미지의 평균 색상은 사진이 로딩되는 동안의 자리표시 배경, 카드나 히어로 영역의 은은한 배경색, 일러스트 전체 분위기를 빠르게 파악하는 용도로 좋습니다. 디자이너는 통일감 있는 팔레트를 만들 때, 개발자는 저품질 이미지 자리표시(LQIP)를 생성할 때 활용합니다. 계산이 결정적이라 같은 이미지는 언제나 같은 HEX 코드를 돌려줍니다.