이미지 색상 팔레트 추출기 - HEX, RGB, HSL 값 얻기

색상 팔레트 추출기 기능

이 도구는 하나의 좁은 질문에 정확히 답합니다: 이 이미지를 소수의 색으로 설명해야 한다면, 어떤 색이어야 할까요? 이미지를 브라우저에서 디코딩하고, 긴 쪽이 약 200픽셀이 되도록 축소한 다음, Canvas에서 원시 픽셀 데이터를 읽습니다. 축소는 정확도를 희생하는 편법이 아닙니다. 크기 조절 과정에서 이웃 픽셀을 평균내면 JPEG 압축 노이즈나 센서 노이즈가 제거되어 거의 동일한 수십 개의 흑색 계열 색상들이 나오는 것을 막아주며, 전체 분석 대상을 약 4만 픽셀 이하로 유지해 스마트폰에서도 즉시 완료됩니다. 알파 값이 128 미만인 픽셀은 모든 처리 이전에 먼저 폐기됩니다. 이 단계만으로 투명 배경 위의 로고에서 검정색이 주색으로 잘못 보고되는 다른 추출기들의 대표적인 오답을 막을 수 있습니다. 남은 불투명 픽셀들은 미디언 컷으로 그룹화됩니다. 미디언 컷은 픽셀들을 3차원 RGB 공간의 점군으로 보고 이를 감싸는 상자를 만든 뒤, 색상 분포가 가장 넓으면서 픽셀 수가 많은 상자를 골라 실제 색상 값이 변하는 지점에서 둘로 나누는 과정을 반복합니다. 요청한 개수만큼의 상자가 생길 때까지 반복하면 이미지의 실제 구조를 따르는 군집이 얻어지며, 각 군집은 임의의 버킷 중심 대신 내부 픽셀들의 평균값을 보고합니다. 고정 그리드 버킷 방식이 만들어내는 탁한 회색이 아닌, 실제 이미지에서 나온 색상이 결과로 나오는 이유입니다. 이후 순서가 조정됩니다. 순수하게 픽셀 수만으로 순위를 매기는 것은 함정입니다. 사진은 종종 40%가 하늘이나 하얀 스튜디오 배경인데, 픽셀 수 기준으로는 이것들이 첫 번째에 오르며 실제로 원하는 색을 묻어버리기 때문입니다. 따라서 정렬 시 중성색에 가까운 색, 블랙에 가까운 색, 화이트에 가까운 색 군집에는 낮은 가중치를 부여하지만, 절대 버려지지 않으며 각 견본 옆에 표시되는 백분율은 항상 가공되지 않은 실제 픽셀 비율입니다. 마지막으로, 모든 견본에는 WCAG 2.1 상대 휘도를 기반으로 계산된 텍스트 색상이 부여되며, 해당 색상과의 대비율이 더 높은 흑 또는 백을 선택합니다. 명도가 아닌 휘도를 사용하므로, 단순한 밝기 기준으로는 오답을 내놓는 중간 톤에서도 올바른 결과를 얻습니다.