팔레트 추출기 가이드

JPG, PNG, WebP, AVIF, GIF, BMP 또는 TIFF 이미지에서 주요 색상 팔레트를 추출하세요. 각 색상의 HEX 및 RGB 코드를 확인하세요. 모든 추출 작업은 브라우저 내에서 로컬로 실행되며, 서버로 업로드되지 않습니다.

준비 사항

브라우저 — OffscreenCanvas를 지원하는 Chrome, Firefox, Safari 또는 Edge 형식 — JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP 또는 TIFF 제한 — 파일당 20MB (20MB를 초과하는 파일은 거부됨) 계정 — 필요 없음 인터넷 — 페이지 로드 후에는 필요 없음

팔레트 추출 방법

브라우저에서 팔레트 생성기를 엽니다. 파일 탐색기에서 이미지 파일을 드래그하여 업로드 영역에 놓으세요. 또는 업로드 영역을 클릭하여 기기에서 파일을 선택할 수 있습니다.

업로드 전 파일이 20MB 제한 미만인지 확인하세요. 이 기준을 초과하는 파일은 거부됩니다. 추출할 색상 수(5, 8, 10 또는 12개)를 선택하세요.

색상 수가 적을수록 더 깔끔하고 활용하기 좋은 팔레트가 생성됩니다. 색상 수가 많으면 미세한 차이까지 포착할 수 있지만, 시각적으로 뚜렷하지 않은 작은 차이가 포함될 수 있습니다. 추출 버튼을 클릭하세요.

양자화 알고리즘이 브라우저 내에서 이미지의 픽셀 데이터를 처리합니다. k-평균 군집화(k-means clustering)를 사용하여 색상 유사도에 따라 픽셀을 그룹화하고 각 군집의 평균 색상을 계산합니다. 네트워크를 통해 전송되는 데이터는 없습니다.

추출된 팔레트를 확인하세요. 각 색상은 HEX 코드와 RGB 값이 포함된 시각적 견본으로 표시됩니다. 색상 코드를 클릭하면 클립보드에 복사됩니다.

이 코드들을 디자인, CSS 또는 인쇄 프로젝트에 활용하세요.

작동 원리

팔레트 생성기는 OffscreenCanvas 요소와 색상 양자화 알고리즘을 사용하여 주요 색상을 추출합니다. 이미지를 업로드하면 브라우저가 File API를 통해 직접 메모리로 읽어들이며, 서버 업로드는 발생하지 않습니다.

libvips는 OffscreenCanvas를 사용하여 오프스크린 캔버스를 생성하고 drawImage를 통해 원본 해상도로 이미지를 그립니다. 그런 다음 getImageData를 사용하여 픽셀 데이터를 RGBA 배열로 읽어오며, 이는 이미지의 모든 픽셀에 대한 빨간색, 녹색, 파란색 및 알파 값을 포함하는 Uint8ClampedArray를 반환합니다. 1920x1080 이미지의 경우 약 800만 개의 개별 색상 값이 생성됩니다.

양자화 알고리즘은 k-평균 군집화를 사용하여 색상 유사도에 따라 픽셀을 그룹화합니다. 선택한 팔레트 크기만큼 k개의 군집 중심을 초기화한 다음, RGB 공간에서의 유클리드 거리를 기준으로 각 픽셀을 가장 가까운 군집 중심에 반복적으로 할당합니다. 각 할당 단계 후에는 해당 군집 내 모든 픽셀의 수학적 평균으로 군집 중심을 다시 계산합니다.

이 과정은 중심이 안정화되거나 최대 반복 횟수에 도달할 때까지 반복됩니다. 결과적으로 이미지의 시각적 정체성을 포착하는 대표 색상 세트가 생성됩니다.

각 색상은 HEX 코드와 RGB 값이 포함된 시각적 견본으로 표시됩니다. libvips는 각 군집의 정확한 중심 색상을 샘플링하여, 표시된 견본이 해당 그룹 픽셀의 수학적 평균을 정확하게 나타내도록 합니다.

파일은 OffscreenCanvas를 사용하여 브라우저 내부에서 완전히 처리됩니다. ConvertCraft 서버로는 절대 업로드되지 않습니다.

오류 발생 시

이미지 업로드 실패: 이미지가 20MB 제한을 초과했습니다. OffscreenCanvas는 엄격한 메모리 제한 내에서 작동합니다. 20MB보다 큰 이미지를 처리하려면 RAM에 거대한 비압축 픽셀 버퍼가 필요하며, 이로 인해 브라우저 탭이 충돌할 수 있습니다.

팔레트에 비슷한 색상이 포함됨: 이미지에 알고리즘이 별도의 군집으로 처리하는 미세한 색상 차이가 있습니다. 팔레트 크기를 줄여 더 적고 뚜렷한 색상을 얻으세요.

색상이 눈에 보이는 것과 다름: 알고리즘은 수학적 평균을 추출합니다. 색상 간의 지각적 차이가 시각적 인식과 일치하지 않을 수 있습니다. 다른 팔레트 크기를 시도하거나 특정 픽셀에 스포이드 도구를 사용해 보세요.

팔레트가 대부분 한 가지 색상임: 이미지가 단일 색상으로 지배적입니다. 알고리즘은 이미지의 색상 분포를 충실히 반영합니다. 색상이 더 다양한 다른 이미지를 시도해 보세요.

### 몇 가지 색상을 추출할 수 있나요?

이 도구는 5, 8, 10 또는 12가지 색상 추출을 지원합니다. 색상 수가 적을수록 더 깔끔한 팔레트가 생성됩니다. 색상 수가 많으면 미세한 차이를 포착할 수 있지만, 시각적으로 뚜렷하지 않은 작은 차이가 포함될 수 있습니다.

### 특정 영역에서 색상을 추출할 수 있나요?

현재 버전은 전체 이미지를 분석합니다. 특정 영역에서 색상을 추출하려면 먼저 Image Converter나 전용 자르기 도구를 사용하여 이미지를 자른 다음, 자른 이미지를 업로드하세요.

### 개인적인 이미지에서 색상을 추출해도 안전한가요?

네. 파일은 OffscreenCanvas를 사용하여 브라우저 내부에서 완전히 처리됩니다. ConvertCraft 서버로는 절대 업로드되지 않습니다.

이미지 데이터가 컴퓨터를 벗어나지 않으므로 네트워크 가로채기나 서버 측 로깅으로부터 완전히 안전합니다.