이미지로 색상 팔레트 만들기

이미지 색상 추출이 필요한 순간

브랜드 색상을 웹사이트에 적용하거나, 사진에서 조화로운 색상 조합을 찾고 싶을 때 이 도구를 사용합니다. 예를 들어, 제품 사진의 배경색을 추출하여 CSS 변수로 만들어 웹 페이지에 바로 적용할 수 있습니다.

작동 방식과 실제 예시

이미지를 업로드하면 브라우저에서 초기 용량 10에 맞춰 10개의 무작위 위치를 자동으로 샘플링합니다. 하지만 이 방식은 클러스터링이 아니므로, 중요한 영역을 놓칠 수 있습니다. 예를 들어, 노을 사진에서 하늘의 주황색을 정확히 추출하려면 해당 부분을 직접 클릭해야 합니다. 팔레트 용량을 5로 설정하고 하늘, 구름, 바다 등 원하는 지점을 클릭하면 5개의 색상이 순서대로 저장됩니다.

내보내기 대화상자에서 CSS 변수 형식을 선택하면 --color-ff7f50: #ff7f50; 같은 코드가 생성됩니다. 이 코드를 복사하여 프로젝트에 붙여넣으면 됩니다.

제한 사항과 주의점

• 이 도구는 위치 기반 샘플링을 사용하므로, 이미지의 수학적으로 지배적인 색상을 보장하지 않습니다.
• 무작위 시작점은 반복되거나 작은 영역을 놓칠 수 있습니다. 중요한 색상은 직접 클릭하여 추가하세요.
• 표시 캔버스는 최대 1050x720 픽셀로 축소되지만, 색상 추출도 축소된 캔버스에서 이루어집니다. 따라서 보간과 색상 변환으로 원본 값과 달라질 수 있습니다.
• 파일 크기와 해상도 제한을 초과하면 업로드되지 않습니다.

자주 묻는 질문

팔레트 용량을 변경하면 기존 색상이 유지되나요?

용량을 늘리면 기존 색상이 유지되고, 줄이면 초과된 색상이 제거됩니다. 이후 클릭 시 용량이 가득 차면 가장 오래된 색상이 삭제됩니다.

추출된 색상의 순서를 바꿀 수 있나요?

현재 버전에서는 색상 순서를 직접 변경할 수 없습니다. 내보내기는 현재 선택된 색상의 순서를 그대로 사용합니다.

내보내기 형식 중 어떤 것을 선택해야 하나요?

웹 개발에는 CSS 변수나 코드 형식이 유용하고, 디자인 작업에는 SVG나 PNG가 적합합니다. SVG는 벡터, PNG는 래스터 이미지로 저장됩니다.