lokesh/color-thief

어떤 프로젝트인가요?

핵심 기능

• 01이미지에서 대표 색상, 여러 색상으로 구성된 팔레트 또는 의미 기반 색상 견본을 추출합니다.
• 02브라우저와 Node.js에서 동일한 API를 제공하며, 동기 및 비동기 버전을 지원합니다.
• 03observe()를 통해 비디오, canvas 또는 img 요소에서 팔레트를 실시간으로 업데이트합니다.
• 04해상도와 무관한 소수 좌표를 사용해 이미지의 일부 영역을 샘플링합니다.
• 05hex, RGB, HSL, OKLCH 및 CSS 출력과 WCAG 대비율을 제공하는 Color 객체를 반환합니다.
• 06ANSI 색상 견본, JSON 또는 CSS 변수를 출력하는 CLI를 포함합니다.

활용 사례

• 웹 페이지에서 제품 사진이나 앨범 사진과 잘 어울리는 배경색이나 강조색을 고를 때.
• 재생 중인 비디오에 맞춰 변하는 앰비언트 조명이나 그라데이션 효과를 만들 때.
• 접근성을 위해 이미지의 대표 색상과 텍스트 간 대비를 확인할 때.
• 빌드 스크립트에서 이미지로부터 CSS 색상 변수를 일괄 생성할 때.

토픽

자주 묻는 질문

color-thief은(는) 무엇인가요?

브라우저와 Node.js에서 이미지의 대표 색상과 색상 팔레트를 추출하는 JavaScript 라이브러리입니다. Color Thief는 이미지(img, canvas, 비디오 프레임, 또는 Node에서 파일 경로나 Buffer)를 받아 대표 색상, 여러 색상으로 구성된 팔레트, 또는 Vibrant, Muted, DarkVibrant, LightMuted 같은 의미 기반 색상 견본을 반환합니다. 각 결과는 hex, RGB, HSL, OKLCH 및 CSS 출력용 헬퍼와 텍스트 색상 추천, WCAG 대비율을 제공하는 Color 객체입니다.

color-thief은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

color-thief은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

color-thief은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. color-thief의 마지막 커밋은 2026년 8월 3일입니다.

color-thief은(는) 어디에 사용할 수 있나요?

웹 페이지에서 제품 사진이나 앨범 사진과 잘 어울리는 배경색이나 강조색을 고를 때. 재생 중인 비디오에 맞춰 변하는 앰비언트 조명이나 그라데이션 효과를 만들 때. 접근성을 위해 이미지의 대표 색상과 텍스트 간 대비를 확인할 때. 빌드 스크립트에서 이미지로부터 CSS 색상 변수를 일괄 생성할 때.

color-thief은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/lokesh/color-thief