이미지에서 색상 선택기 - HEX 및 RGB 색상 코드 얻기

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

예. 브라우저에서 실행되며 계정이 필요하지 않습니다. 설치할 것이 없으며 검사하는 팔레트 수에도 제한이 없습니다.

이미지가 필요하지 않습니다. 상단의 색상 선택기 및 휠은 자체적으로 작동합니다. 채도/밝기 사각형과 색조 슬라이더를 드래그하거나 HEX, RGB 또는 HSL 값을 입력하여 정확한 색상을 입력합니다. 사진에서 색상을 스포이드하기 위한 이미지 업로드는 선택 사항입니다.

기본 색상을 선택하면 색상 하모니 패널에서 색상환 이론을 사용하여 보색, 유사, 3원, 분할 보완, 4원 및 단색 구성표를 즉시 구축합니다. HEX 코드를 복사하려면 견본을 클릭하세요.

단독 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 코드를 얻을 수 있으며, 스크린샷은 브라우저 밖으로 전혀 전송되지 않습니다.

예 — Pixoate는 일괄 처리 및 대량 처리를 지원합니다. 배치 모드로 전환하고 Premium에서 최대 60개, Pro에서 최대 200개의 이미지를 추가하고 옵션을 한 번 설정하면 하나의 스프레드시트(이미지당 팔레트 행)를 다운로드하기 전에 모든 이미지가 동일한 설정으로 처리됩니다. 대량 처리는 프리미엄 기능입니다. 출력은 단일 모드와 동일한 품질과 설정을 사용합니다.

예. 대량 처리를 사용하면 설정을 한 번만 구성하면 일괄 처리의 모든 항목에 적용됩니다(Premium의 경우 최대 60개 이미지, Pro의 경우 최대 200개). 항목별로 설정을 반복할 필요가 없으며 브라우저에서 팔레트 추출이 실행됩니다. 완료된 스프레드시트만 다운로드용으로 저장됩니다.

대부분 다음 세 가지 중 하나가 원인입니다. 파일이 무료 업로드 한도인 11 MB 용량을 초과했을 수 있습니다. Premium 플랜은 50 MB, Pro 플랜은 120 MB 크기까지 지원합니다. 또는 이 도구에서 지원하지 않는 형식일 수 있으므로 업로드 패널의 목록을 확인하세요. 파일 이름에 표시된 형식과 실제 내용이 다를 수도 있습니다. 이름을 바꿔도 파일 내부 형식은 바뀌지 않기 때문에 정상으로 보이는 이미지도 거부될 수 있습니다.

파일에 실제로 무엇이 있는지 보고하므로 비어 있거나 놀라운 결과는 일반적으로 데이터가 거기에 전혀 없었다는 것을 의미합니다. 즉, 마지막으로 저장한 앱에 의해 제거되었거나 업로드 시 플랫폼에 의해 제거되었거나 원본에 없음을 의미합니다. 메시징 앱을 통해 전송된 복사본이 아닌 카메라나 소스에서 직접 손대지 않은 원본 파일을 사용해 보세요.

아니요. 계정 없이도 Color Picker를 실행하고 무료 결과를 다운로드할 수 있으며 워터마크가 없습니다. 프리미엄은 한 배치에 최대 60개 파일, 더 큰 업로드, 일일 한도 없음, 원본 해상도 결과 등 한도가 다가오기 시작할 때 구입하는 것입니다. 시작하기 전에 표시되지 않았던 다운로드 단계에서는 아무것도 표시되지 않습니다.

아니요. 이 도구는 데스크톱과 휴대폰의 브라우저에서 실행됩니다. 설치하거나 체험판을 시작하거나 라이선스를 구매할 필요 없이 필요한 기능인지 확인할 수 있습니다. 예제 대신 실제로 해결하려는 파일로 사용해 보세요.