이미지 평균 색상·팔레트 추출기
이미지의 평균 색을 hex·RGB로 확인하고, 색상별 비율을 보여주는 2~12색 팔레트도 추출 — 투명도에 따라 가중치를 둬 계산합니다.
🔒 스와치와 팔레트를 만드는 모든 픽셀 계산이 브라우저에서 이뤄지며, 이미지는 업로드되지 않습니다.
이미지를 끌어다 놓거나 눌러서 고르세요
모든 픽셀을 평균 낸 색 하나
이미지를 불러오면 캔버스에 그린 뒤 모든 픽셀을 읽어, 완전히 투명하지는 않은 픽셀의 빨강·초록·파랑 값을 각 픽셀의 불투명도만큼 가중해 평균 냅니다. 결과는 HEX와 RGB 코드가 함께 표시된 색상 스와치로 나타나며, CSS나 디자인 도구, 팔레트에 바로 복사해 넣을 수 있습니다. 불러온 그림도 옆에 함께 보여 주므로 어떤 이미지에서 뽑은 색인지 바로 확인할 수 있습니다. 평균 색상과 함께 그림에서 많이 쓰인 주요 색상 팔레트도 2개에서 12개까지 원하는 개수만큼 뽑아 주며, 색마다 HEX 코드, RGB·HSL 값(값마다 복사 버튼이 따로 있습니다)과 그림에서 차지하는 비율이 표시되고, 모든 코드를 목록이나 배열로 한 번에 복사하는 버튼도 있습니다. 알파값 128인 픽셀은 불투명한 픽셀의 절반만큼만 당기고 완전히 투명한 픽셀은 전혀 반영되지 않아, 부드러운 가장자리나 반투명 레이어가 평균을 흰색이나 검은색 쪽으로 끌고 가지 않습니다. 평균 방식은 두 가지로, 단순 평균은 각 채널을 그대로 평균 내고, 제곱근 평균은 빛이 섞이는 방식대로 제곱의 평균에 제곱근을 취해 빨강 절반·초록 절반이 탁한 #808000 이 아니라 #b4b400 으로 나옵니다.
평균 색상이 유용한 순간
이미지의 평균 색상은 사진이 로딩되는 동안의 자리표시 배경, 카드나 히어로 영역의 은은한 배경색으로 쓰거나, 일러스트 전체 분위기를 빠르게 파악하는 데 쓸 수 있습니다. 디자이너는 통일감 있는 팔레트를 만들 때, 개발자는 저품질 이미지 자리표시(LQIP)를 생성할 때 활용합니다. 같은 이미지는 언제나 같은 HEX 코드를 돌려줍니다.
자주 묻는 질문
제 이미지가 서버로 업로드되나요?
아니요. 사진은 브라우저 안 캔버스로 디코딩되고, 모든 픽셀을 가중 평균하는 계산까지 로컬에서 이뤄집니다. 화면에는 계산된 스와치와 비율만 나타날 뿐 사진 자체는 기기를 벗어나지 않습니다.
평균 색상은 어떻게 계산되나요?
완전히 투명하지 않은 모든 픽셀이 자신의 불투명도만큼 가중되어 들어갑니다. 알파값 128인 픽셀은 불투명한 픽셀의 절반만큼 당깁니다. 빨강·초록·파랑 채널을 그 가중치로 합산한 뒤 가중치 합으로 나눈 반올림 평균을 HEX 코드로 변환합니다. 평균 방식을 제곱근으로 바꾸면 제곱을 합산해 평균에 제곱근을 취하는데, 빛이 섞이는 방식이라 강한 두 색이 탁한 색으로 섞이지 않습니다.
투명한 영역은 왜 무시되나요?
완전히 투명한 픽셀은 의미 있는 색이 없어 아예 빠집니다. 반투명한 픽셀은 불투명도에 비례해 반영되는데, 배경 위에 겹쳤을 때 실제로 보이는 만큼입니다. 아래 팔레트 비율은 더 단순한 기준을 씁니다. 절반 이상 불투명한 픽셀부터 한 번씩 셉니다.
주요 색상은 어떤 기준으로 고르나요?
거의 같은 색끼리 묶어 가장 큰 덩어리부터 고르되, 이미 고른 색과 너무 비슷한 색은 건너뜁니다. 그래서 비슷한 파란색만 열 개 나오는 대신 그림의 실제 색이 골고루 나옵니다. 색마다 HEX 코드와 그림에서 차지하는 비율이 함께 표시됩니다.
팔레트 색은 몇 개까지 뽑을 수 있나요?
2개에서 12개까지입니다. 슬라이더를 움직이면 이미 읽어 둔 그림에서 팔레트를 다시 읽으므로, 파일을 다시 불러오지 않고도 3색 구성과 12색 구성을 비교할 수 있습니다.
팔레트 색을 RGB나 HSL로, 또는 팔레트 전체를 한 번에 복사할 수 있나요?
네. 스와치마다 HEX 복사 버튼과 함께 RGB·HSL 값 옆에 각각 복사 버튼이 있습니다. 전체 코드 복사는 모든 hex 코드를 쉼표로 이어 복사하고, 배열로 복사는 같은 코드를 ["#0000ff", "#00ff00"] 같은 배열로 복사해 코드에 바로 붙여 넣을 수 있습니다.