Grab the exact color from any image

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

아무 픽셀이나 클릭하면 이 컬러 피커 도구가 RGB, HSL과 함께 HEX 색상 코드(예: #FF6B35)를 보여 줍니다 — 스타일시트, 디자인 토큰, HTML 속성에 그대로 붙여넣을 수 있는 바로 그 HTML/CSS 색상 코드입니다. Copy를 누르면 클릭 한 번으로 hex 코드를 복사할 수 있습니다.

이미지는 가장 긴 변이 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(색조, 채도, 명도)은 색상 조정에 직관적입니다. 색조를 바꿔 색 계열을 변경하고, 명도를 조절해 밝거나 어두운 색을 만드세요.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

단독 Color Picker & Wheel에서 색상을 조정하면 패널이 순백과 순흑 대비의 명암비를 WCAG 등급(AAA, AA, AA Large, Fail)과 함께 표시합니다. 텍스트나 버튼 색상을 확정하기 전에 이를 사용하면 가독성을 유지하고 WCAG 2.1 접근성 지침을 충족할 수 있습니다.

네. 독립형 Color Picker & Wheel은 입력한 HEX, RGB 또는 HSL 값 옆에 가장 가까운 CSS 색상 이름을 표시하므로, 브리프, 티켓 또는 디자인 사양에서 색조를 어림짐작 없이 빠르게 설명하는 데 편리합니다.

색상 선택기 및 색상환에서 랜덤을 클릭하여 새 색상으로 이동한 다음, 그 아래의 색상 조화 패널을 사용해 그 색상에서 만들어진 보색, 유사색, 삼각 배색 등 조화로운 팔레트를 확인하세요. 기존 이미지에서 색을 추출하는 대신 처음부터 디자인할 때 출발점을 빠르게 찾는 방법입니다.

팔레트 위의 크기 드롭다운을 사용해 주요 색상 5, 8, 10, 16, 24개를 선택하세요. 변경하는 즉시 팔레트가 다시 계산됩니다. 깔끔한 브랜드 팔레트를 위해 5처럼 작은 크기를 색상 추출 스포이드와 함께 사용하면, 자동 추출이 평균 내어 놓쳤을 수 있는 정확한 강조색 한두 가지를 집어낼 수 있습니다.

네 — 독립형 Color Picker & Wheel은 견본 바로 아래에 현재 색상의 순백색 및 순검정색 대비율을 표시하며, WCAG 기준(7:1, 4.5:1, 3:1)에 따라 AAA, AA, AA Large 또는 Fail로 라벨링됩니다. 디자인 색상을 확정하기 전에 텍스트/배경 조합이 접근성 표준을 충족하는지 확인하는 데 사용하세요.

Color Picker & Wheel은 선택기, HEX 상자, RGB/HSL 필드 중 어떤 방법으로 지정한 색이든 가장 가까운 표준 CSS 색 이름과 자동으로 매칭해, 견본 옆에 'Closest name'으로 표시합니다. 색을 말로 설명하거나 가장 가까운 웹 안전 색을 찾는 빠른 방법입니다.

네 — 업로드한 이미지를 클릭하거나 탭할 때마다 마지막 것을 대체하지 않고 Picked Colors 목록에 새 견본이 추가되므로, 사진의 여러 부분에서 정확한 픽셀 색상으로 이루어진 맞춤 세트를 구성할 수 있습니다. 개별 견본은 × 버튼으로 제거하고, 전체 목록은 Clear picked로 지울 수 있습니다.

네 — Color Picker & Wheel의 Random 버튼(셔플 아이콘)은 한 번의 클릭으로 새로운 색상, 채도, 밝기 조합으로 이동하는데, 창작의 벽을 깨거나 직접 입력하지 않았을 팔레트를 탐색하는 데 유용합니다. 아래의 HEX, RGB, HSL과 조화 견본이 모두 함께 업데이트됩니다.

터치스크린에서는 이미지 위로 손가락을 끌면 그 아래 색상이 실시간 플로팅 스와치로 미리 표시되고, 손가락을 떼면 정확히 그 픽셀이 Picked Colors 목록에 추가됩니다 — 별도의 확인 탭이 필요 없습니다. 동일한 팔레트 크기 드롭다운과 내보내기 버튼이 모바일에서도 똑같이 작동합니다.

네. 페이지 상단의 색상환에는 무작위 색상으로 이동하는 Random 버튼이 있어, HEX, RGB, HSL 코드와 가장 가까운 색상 이름, 흰색·검은색 대비 명암비, 그리고 보색, 유사색, 삼각 배색, 분할 보색, 사각 배색, 단색 등 전체 하모니 세트를 즉시 보여줍니다. 팔레트의 출발점을 빠르게 탐색하는 방법입니다.

이 도구는 실시간 화면을 읽는 대신 업로드한 이미지나 내장 컬러 휠에서 색상을 추출합니다. 화면 색상 피커를 대신할 가장 빠른 방법은 스크린샷을 찍어 페이지에 올린 뒤 원하는 픽셀을 정확히 클릭하는 것입니다 — 확장 프로그램을 설치하지 않고도 동일한 HEX, RGB, HSL 코드를 얻을 수 있으며, 스크린샷은 브라우저 밖으로 전혀 전송되지 않습니다.