컬러 피커 및 팔레트 추출기 - 이미지에서 색상 추출하기

JPG, PNG, WebP, GIF 이미지를 업로드하고 화면에 표시된 이미지의 아무 곳이나 클릭하세요. 커서 아래의 정확한 픽셀이 추출되어 HEX, RGB, HSL로 표시되며 각 형식을 한 번의 클릭으로 복사할 수 있습니다. 브랜드 색상을 맞추거나, 사진에서 색상을 추출하거나, 디자인 목업에서 포인트 컬러를 가져올 때 완벽합니다.

이미지는 가장 긴 변이 320픽셀이 되도록 다운샘플링된 다음, 각 픽셀이 채널당 상위 4비트 기준으로 버킷에 분류됩니다. 가장 많이 채워진 버킷은 다시 전체 8비트 색상으로 평균화되어 빈도순으로 정렬되고 팔레트로 반환됩니다. 결과는 일반적으로 이미지를 시각적으로 요약하는 5~24개의 주요 색상입니다.

네. 다운로드 버튼은 두 가지 형식을 생성합니다. :root 선택자에 바로 붙여넣을 수 있는 CSS 변수 블록(--color-1, --color-2…)과, 각 색상의 헥스값, RGB 구성 요소, 가중치 백분율이 담긴 JSON 파일입니다. 두 형식 모두 디자인 토큰, Tailwind 설정, 팔레트 라이브러리에 깔끔하게 통합됩니다.

아니요 — 색상 추출과 팔레트 추출은 HTML canvas API를 사용해 전적으로 브라우저에서 이루어집니다. 이미지는 기기에 그대로 남아 있어, 미공개 제품 사진, 초안 목업, 비밀유지계약이 적용된 브랜드 자산에도 안심하고 쓸 수 있습니다.

브랜드 아이덴티티 작업의 경우 5~8개 색상이 가장 적당합니다. 강조 색상을 흐트러뜨리지 않으면서 핵심 테마를 잘 담아내기 때문입니다. 데이터 시각화의 경우 충분한 범주별 색조를 확보할 수 있도록 10~16개 색상을 권장합니다. 슬라이더로 5개에서 24개 사이를 선택할 수 있습니다.

알파 값이 128 미만인 픽셀은 무시되므로 투명 배경이 "배경" 색상으로 팔레트를 오염시키지 않습니다. 덕분에 이미지 색상 추출기는 제품 누끼, 스티커 아트워크, 분리된 피사체에 특히 적합합니다.

HEX(#RRGGBB)는 가장 간결하며 CSS, Figma, Sketch가 기본으로 사용하는 형식입니다. RGB는 0~255 범위의 세 가지 구성 값을 보여 주므로 — 프로그래밍 방식으로 이미지 데이터를 다룰 때 유용합니다. HSL(색조, 채도, 명도)은 색상 조정에 직관적입니다. 색조를 바꿔 색 계열을 변경하고, 명도를 조절해 밝거나 어두운 색을 만드세요.

네. 무료이며 계정이 필요 없고, 이미지 크기나 추출하는 팔레트 수에 제한이 없습니다. 설치할 것도 없으며, 도구 전체가 하나의 웹페이지로 되어 있습니다.