컬러 팔레트 추출기 | 이미지에서 16진수 코드 가져오기

사용방법

색상 팔레트 추출기 사용 방법

01
이미지 업로드
사진, 로고, 스크린샷을 드래그 앤 드롭하거나 선택하세요. 팔레트는 브라우저에서 즉시 추출됩니다.
02
팔레트 다듬기
카운트 컨트롤을 밀어서 3~12개의 색상을 추출하거나 '이미지에서 선택'을 켜고 아무 지점이나 클릭하여 정확한 픽셀을 샘플링합니다.
03
검사 및 조정
HEX/RGB/HSL을 확인하고 밝기를 미세 조정하고 흰색과 검정색의 WCAG 대비를 확인하려면 견본을 선택하세요. 지팡이를 누르면 실패한 색상이 자동으로 수정됩니다.
04
내보내다
CSS, SCSS, Tailwind, JSON 또는 SVG를 선택하고 코드를 복사하거나 디자인 문서용 SVG 견본 시트를 다운로드하세요.

사용 사례

개요

이미지를 업로드하면 추출기가 주요 색상을 식별하여 바로 사용할 수 있는 HEX 및 RGB 값을 반환합니다. 디자인 앱 없이 사진에서 팔레트를 만들고, 브랜드 색상과 일치시키고, 스크린샷에서 정확한 색상을 찾는 가장 빠른 방법입니다.

영감을 유용한 가치로 전환하세요. 일몰을 샘플링하여 그라데이션을 적용하거나, 경쟁사의 강조 색상을 강화하거나, 히어로 이미지에서 응집력 있는 테마를 생성할 수 있습니다. 처리는 브라우저에서 이루어지므로 이미지는 서버에 업로드되지 않습니다.

특징

FAQ

이미지에서 16진수 색상 코드를 어떻게 얻나요?+

이미지를 업로드하면 도구가 자동으로 이미지를 분석하여 K-평균 클러스터링을 사용하여 주요 색상을 추출합니다. 각 색상은 HEX, RGB 및 HSL 값으로 표시됩니다. 복사하려면 색상을 클릭하세요.

로고에서 브랜드 컬러를 추출할 수 있나요?+

예. 로고 이미지를 업로드하면 도구가 기본 및 보조 브랜드 색상을 식별하여 CSS, Tailwind 또는 Figma와 같은 디자인 도구에서 사용할 정확한 16진수 코드를 제공합니다.

WCAG 대비 검사란 무엇입니까?+

WCAG(웹 콘텐츠 접근성 지침)는 텍스트와 배경색 간의 명암비를 정의합니다. 시각 장애가 있는 사용자가 일반 텍스트(AA 표준)를 읽을 수 있으려면 최소 4.5:1의 비율이 필요합니다.

추출기는 몇 가지 색상을 식별합니까?+

원하는 대로 제어할 수 있습니다. 슬라이더를 사용하면 이미지에 얼마나 많은 시각적 공간과 생동감이 있는지에 따라 순위가 매겨진 3~12개의 주요 색상을 추출할 수 있습니다. 사진을 직접 클릭하여 정확한 픽셀 색상을 샘플링할 수도 있습니다.

CSS 또는 Tailwind에서 사용하기 위해 팔레트를 내보낼 수 있나요?+

예. 이 도구는 바로 사용할 수 있는 CSS 사용자 정의 속성 변수(--color-primary: #hex)와 프로젝트에 직접 붙여넣을 수 있는 Tailwind 구성 스니펫을 생성합니다.

로고에서 정확한 16진수 코드를 얻을 수 있나요?+

예. 추출기는 주요 색상을 디자인 도구에 직접 복사할 수 있는 16진수 값으로 반환합니다.