이미지 색상 추출기는 이미지 파일(드래그, 붙여넣기 또는 클릭하여 로드)을 분석하여 가중치(백분율)와 함께 최대 16개의 주요 색상을 반환합니다. 브라우저 내 픽셀 샘플링과 버킷 양자화(bucket quantization) 기술을 사용하여 업로드나 서버 통신 없이 작동합니다. 스와치를 클릭하여 HEX 코드를 복사하거나 '전체 복사'로 팔레트 전체를 가져오세요.
디자이너와 개발자는 로고에서 브랜드 컬러를 뽑아내거나, 사진에서 팔레트를 빌드하거나, 참고 작품에 맞게 UI 색상을 맞추는 등 이미지에서 색상을 추출해야 할 일이 많습니다. 이미지 색상 추출기는 업로드 없이 브라우저 내에서 이 작업을 처리합니다. 이미지(PNG, JPG, SVG, WebP, GIF)를 드래그하거나 붙여넣어 로드하세요. 도구는 이미지를 캔버스에 축소 렌더링하고 4번째 픽셀마다 샘플링하여 축소된 색상 공간(채널당 5비트, 약 32K 버킷)으로 분류합니다. 각 버킷의 실제 RGB 평균을 낸 뒤, 유사 색상(RGB 맨해튼 거리 24 이내)을 병합하며 가장 비중이 높은 상위 N개의 버킷을 선택합니다. 그 결과 단순히 픽셀이 일치하는 색상이 아닌, 실제 시각적 구성을 반영하는 깔끔하고 대표성 있는 팔레트가 생성됩니다. 슬라이더(3~16개)를 통해 팔레트 크기를 조절할 수 있습니다. 각 스와치는 HEX 값과 픽셀 점유율을 보여주며, 개별 또는 일괄 복사가 가능합니다.
모든 공통 이미지 형식을 지원하며, 대용량 이미지도 1초 미만의 매우 짧은 시간에 주요 색상 팔레트를 생성합니다.
추출된 각 색상은 이미지 내 면적 비율을 보여줍니다. 어떤 색상이 주된 색상이고 어떤 색상이 포인트 색상인지 한눈에 파악하세요.
슬라이더를 사용하여 3개에서 16개 사이의 색상을 선택할 수 있습니다. 브랜드 작업에는 작은 팔레트를, 사진 참고용으로는 큰 팔레트를 사용하세요.
스와치를 클릭하여 HEX 코드를 복사하세요. 또는 '전체 복사'를 사용하여 팔레트 전체를 줄바꿈으로 구분된 리스트 형태로 가져올 수 있습니다.
업로드나 서버 호출이 없으며 이미지가 기기를 벗어나지 않습니다. 비공개 목업, 미발표 에셋, 민감한 작품 등에도 안심하고 사용하세요.
PNG, JPG, SVG, WebP, GIF, ICO 형식을 표준 캔버스 디코딩을 통해 지원합니다. 투명한 픽셀은 자동으로 제외됩니다.
로고 이미지를 넣어 사용된 정확한 색상을 추출하고, 이를 프로젝트의 CSS 변수나 디자인 시스템에 기록하세요.
풍경 사진을 입력하여 해당 사진의 분위기를 담은 5색 팔레트를 얻으세요. 아트 디렉션이나 테마 제작에 유용합니다.
참고할 UI의 스크린샷에서 팔레트를 추출하여, 자신의 목업에 해당 색상들을 적용함으로써 시각적 느낌을 통일시키세요.
클라이언트가 브랜드 방향성으로 이미지 한 장을 보냈을 때, 8~10개의 색상을 추출하여 원본에 충실한 초기 팔레트 안을 제안해 보세요.
이미지에서 가장 비중이 높은 두 가지 색상을 가져와 에셋과 잘 어우러지는 배경 그라데이션을 만드세요.
DevSuite Pro 독에서 이미지 색상 아이콘을 클릭합니다. 드롭 존과 설정 옵션이 있는 패널이 열립니다.
파일을 드래그하거나, 클립보드에서 붙여넣거나(Ctrl+V), 클릭하여 파일 선택기를 여세요. 도구가 자동으로 픽셀을 샘플링합니다.
슬라이더를 사용하여 추출할 색상 수(3~16개)를 선택하세요. 슬라이더를 움직이는 즉시 팔레트가 재생성됩니다.
각 스와치는 HEX 코드와 이미지 면적 비율을 보여줍니다. 비율이 높은 색상이 해당 이미지의 지배적인 색상입니다.
스와치를 클릭하여 HEX 코드를 복사하거나, 디자인 도거나 CSS에서 사용하기 위해 '전체 복사'로 팔레트 전체를 가져오세요.
