이미지 색상 추출

이미지를 업로드하면 주요 색상을 자동으로 추출합니다 — 서버 업로드 없이 브라우저에서 처리

이미지를 여기에 놓거나 클릭하여 찾아보기

지원 형식: JPEG, PNG, WebP, SVG, GIF

Ctrl+V로 클립보드 이미지를 붙여넣기할 수도 있습니다

AI 기반 양자화 알고리즘으로 이미지의 대표 색상 8~12개를 정확하게 추출합니다.

HEX, RGB, HSL은 물론 Tailwind CSS 클래스명까지 원클릭으로 복사할 수 있습니다.

추출된 색상의 AA/AAA 접근성 등급을 자동 계산합니다. 웹 디자인에 최적화.

사용 방법

3단계로 간단하게 이미지에서 색상을 추출하세요

색상을 추출할 이미지를 드래그&드롭하거나 파일을 선택하세요.

브라우저에서 즉시 주요 색상 팔레트를 추출합니다.

HEX, RGB, HSL, Tailwind 등 원하는 포맷으로 복사하여 디자인에 활용하세요.

궁금한 점을 확인해보세요

이미지가 서버로 전송되나요?

아닙니다. 모든 이미지 처리는 100% 브라우저에서 이루어집니다. node-vibrant 라이브러리를 사용하여 로컬에서 색상을 추출하므로 이미지가 서버로 전송되거나 저장되지 않습니다.

몇 가지 색상이 추출되나요?

기본적으로 8~12가지 주요 색상이 추출됩니다. 이미지의 복잡도에 따라 6가지 의미론적 색상(Vibrant, Muted 등)과 추가 팔레트 색상이 함께 제공됩니다.

WCAG 대비 비율이란?

WCAG(웹 콘텐츠 접근성 지침)의 색상 대비 비율은 텍스트와 배경 사이의 밝기 차이를 측정합니다. AA 등급(4.5:1 이상)은 일반 텍스트, AAA 등급(7:1 이상)은 향상된 접근성을 의미합니다.

Tailwind 클래스명은 어떻게 매핑되나요?

추출된 색상을 Tailwind CSS v4 팔레트의 가장 가까운 색상과 매칭하여 클래스명(예: bg-blue-500)을 제공합니다. RGB 유클리드 거리 알고리즘을 사용합니다.

어떤 이미지 형식을 지원하나요?

JPEG, PNG, WebP, SVG, GIF 형식의 이미지를 지원합니다. 대부분의 웹 이미지를 처리할 수 있습니다.

이미지를 붙여넣어서 색상을 추출할 수 있나요?

네, 가능합니다. 이미지 선택 영역에 커서를 둔 상태에서 Ctrl+V를 누르면 클립보드에 복사한 이미지를 바로 붙여넣을 수 있습니다. 캡처한 화면이나 웹에서 복사한 이미지를 파일로 저장하지 않고 바로 추출할 수 있어 편리합니다.

색상 코드는 어떤 형식으로 복사할 수 있나요?

HEX, RGB, HSL 세 가지 기본 형식과 함께 Tailwind CSS 클래스명까지 복사할 수 있습니다. 원하는 형식의 복사 버튼을 한 번 클릭하면 클립보드에 바로 저장되어 디자인 도구나 코드에 바로 붙여넣어 사용할 수 있습니다.

추출 속도는 얼마나 걸리나요?

이미지를 업로드하면 브라우저 안에서 즉시 색상 추출이 진행됩니다. 서버로 파일을 보내지 않고 WebAssembly로 처리하기 때문에 네트워크 상태와 관계없이 빠르게 결과를 확인할 수 있습니다.

AA와 AAA 등급은 어떤 기준인가요?

WCAG 접근성 가이드라인의 대비 비율 등급입니다. 도구가 추출된 색상의 대비 비율을 자동으로 계산하여 AA와 AAA 통과 여부를 보여줍니다. 텍스트와 배경 색상을 정할 때 이 등급을 참고하면 시인성이 좋은 웹 디자인을 만들 수 있습니다.

로그인해야 사용할 수 있나요?

가입 없이도 사용할 수 있으며 하루 5회까지 이용할 수 있습니다. 구글 로그인을 하면 하루 10회까지 사용 가능합니다. 추출과 복사 기능 자체는 로그인 여부와 관계없이 모두 동일하게 동작합니다.