컬러 팔레트 추출기: 이미지에서 색상 추출
모든 사진이나 이미지에서 주요 색상 팔레트를 추출하세요. HEX, RGB, HSL 코드를 복사하고, CSS 변수, Tailwind 팔레트, JSON으로 즉시 내보낼 수 있습니다.
100% 비공개. 업로드되지 않습니다.
이미지에서 색상 팔레트 추출하는 방법
이미지 업로드
이미지 선택을 누르거나 JPG, PNG, WebP, GIF, BMP, SVG 파일을 페이지에 끌어다 놓으세요.
색상 보기
최대 8색의 팔레트가 나타납니다. 색상 개수에서 4, 6, 10, 12를 선택해 변경할 수 있습니다.
복사 및 내보내기
견본이나 코드를 클릭해 복사하거나, CSS 변수, Tailwind, JSON, PNG로 내보내세요.
주요 기능
- 팔레트당 4~12색
- 파일은 기기에만 저장
- 무료 온라인 도구
- 등록이 필요 없습니다
- CSS 및 Tailwind 내보내기
- HEX, RGB 및 HSL 값
추출한 색상 팔레트로 무엇을 할 수 있을까요?
웹 및 앱 디자인
- 디자인 시스템의 색상 토큰 만들기
- CSS 변수 또는 Tailwind 설정 내보내기
- 히어로 사진에 맞춰 웹사이트 테마 매칭
- 무드 사진에서 UI 색상 구성 선택
브랜딩 및 아이덴티티
- 로고나 제품 사진의 주요 색상 확인
- 참고 사진을 활용하여 무드보드를 만드세요.
- 여러 브랜드 이미지의 색상 일관성 유지
- 팔레트를 PNG 이미지나 JSON으로 공유
미술 및 사진
- 그림이나 일러스트의 색상 연구
- 유명 작품 사진에서 팔레트 추출
- 자연 사진으로 색상 스터디 만들기
- 디지털 일러스트용 팔레트 시작하기
색상 팔레트 추출기란?
색상 팔레트 추출기는 이미지에서 주요 색상을 찾아 각 색상 코드와 함께 색상 견본 줄로 보여줍니다. 전체 이미지를 한 번에 분석합니다. 색상 피커는 다릅니다. 클릭한 한 지점의 정확한 색상 값만 알려줍니다.
이미지에서 색상 팔레트를 얻는 방법
사진을 도구에 올리면 최대 8색의 팔레트가 나타납니다. 아래 답변은 적절한 색상 개수와 이미지를 고르는 데 도움을 주고, 각 견본이 무엇을 의미하는지 알려줍니다.
팔레트에는 몇 가지 색상이 적당할까요?
견본 바로 위에 있는 색상 개수에서 4, 6, 8, 10, 12 중 선택하세요. 팔레트는 매번 같은 이미지에서 새로 생성됩니다. 대략적인 기준은 다음과 같습니다:
- 4색: 단순한 색상 구성이거나 색상 수가 적은 로고에 적합합니다.
- 6~8색: 대부분의 사진에 적합합니다. 기본값은 8색입니다.
- 10~12색: 복잡한 사진이나 그림에서 더 다양한 색조를 원할 때 적합합니다.
추출기는 색상을 어떻게 선택하나요?
미디언 컷이라는 방식을 사용합니다. 이 도구는 픽셀을 비슷한 색상끼리 그룹으로 나눕니다. 요청한 개수만큼 그룹이 생길 때까지 색상 범위가 가장 넓은 그룹을 계속 반으로 나눕니다. 각 견본은 한 그룹의 평균 색상입니다.
- 견본은 해당 색상이 차지하는 픽셀 수가 많은 순서대로 정렬됩니다.
- 이미지의 약 0.5% 미만을 차지하는 색상은 제외되므로, 선택한 개수보다 견본이 적게 나올 수 있습니다.
- 대부분 투명한 픽셀은 건너뛰므로, 투명한 PNG 배경이 견본으로 나타나지 않습니다.
어떤 이미지가 가장 좋은 팔레트를 만들까요?
색상 영역이 뚜렷하게 구분된 사진일수록 깔끔한 팔레트가 나옵니다. 몇 가지 팁:
- 제품이나 칠해진 벽처럼 특정 부분이 중요하다면, 먼저 해당 부분을 잘라내세요.
- 하늘이나 흰색 배경 같은 넓은 단색 영역은 자체적으로 견본을 얻습니다.
- 2~3색으로 된 로고는 4색 설정에서 가장 잘 나타납니다. 색상 수가 많아지면 일부 견본이 같은 색을 반복하거나 두 색이 섞인 결과를 보일 수 있습니다.
- 애니메이션 GIF는 첫 프레임의 팔레트를 보여줍니다.
팔레트와 단일 색상, 어느 쪽이 필요할까요?
이미지 전체의 색상 구성을 보려면 팔레트를 사용하세요. 각 견본은 평균값이므로 특정 픽셀과 정확히 일치하지 않을 수 있습니다. 로고의 브랜드 색상처럼 한 지점의 정확한 코드가 필요하다면 이미지 색상 피커로 해당 지점을 클릭하세요.
더 많은 무료 도구
회원가입 없이 이용 가능한 다른 무료 이미지 및 디자인 도구도 확인해 보세요.
색상 팔레트 추출기 FAQ
이미지에서 색상 팔레트를 추출, 사용 및 내보내는 것과 관련된 일반적인 질문입니다.
이미지에서 색상 팔레트를 얻으려면 어떻게 하나요?
이미지 선택을 누르거나 JPG, PNG, WebP, GIF, BMP, SVG 파일을 페이지에 끌어다 놓으세요. 이미지 아래에 최대 8색의 팔레트가 나타납니다. 색상 개수에서 4, 6, 10, 12를 선택해 변경할 수 있습니다. 이후 견본이나 코드를 클릭해 복사하거나 전체 팔레트를 내보내세요.
어떤 이미지 형식을 사용할 수 있나요?
JPG, PNG, WebP, GIF, BMP, SVG 파일을 한 번에 하나씩 열 수 있습니다. SVG 로고도 사용 가능하며, 투명 배경은 제외됩니다. 애니메이션 GIF는 첫 프레임을 사용합니다. PNG, WebP, GIF의 투명하거나 거의 투명한 영역은 제외되어 견본으로 나타나지 않습니다.
8색보다 더 많이 추출할 수 있나요?
네. 기본값은 8색이며, 첫 팔레트가 표시된 후 색상 개수에서 4, 6, 8, 10, 12를 선택할 수 있습니다. 팔레트는 같은 이미지에서 다시 생성됩니다. 이미지의 약 0.5% 미만을 차지하는 색상은 제외되므로 선택한 개수보다 견본이 적을 수 있습니다.
이미지 속 색상의 헥스 코드를 얻을 수 있나요?
네. 각 견본 카드에 HEX, RGB, HSL 코드가 표시됩니다. 예: #3A7BDF, rgb(58, 123, 223), hsl(216, 72%, 55%). 코드를 클릭해 복사하거나 색상 자체를 클릭해 HEX 코드를 복사할 수 있습니다. 각 코드는 픽셀 그룹의 평균값입니다. 특정 픽셀의 정확한 코드가 필요하면 이미지 색상 피커 도구를 사용하세요.
팔레트를 CSS나 Tailwind에서 어떻게 사용하나요?
팔레트 내보내기에서 CSS 변수, Tailwind 설정, JSON 중 하나를 선택한 후 코드 복사를 누르세요. CSS 변수는 --color-1, --color-2 등을 포함한 :root 블록을 제공하며 var(--color-1)처럼 사용합니다. Tailwind 설정은 tailwind.config.js용 코드를 제공해 bg-palette-1 같은 클래스를 사용할 수 있게 합니다. JSON은 각 색상의 HEX, RGB, HSL 코드를 나열합니다. PNG 다운로드는 견본을 HEX 코드와 함께 이미지로 저장합니다.
추출된 색상이 예상과 다르게 보이는 이유는 무엇인가요?
각 견본은 비슷한 픽셀 그룹의 평균값이므로 가장 밝은 지점보다 다소 흐리게 보일 수 있습니다. 견본은 색상이 눈에 띄는 정도가 아니라 이미지에서 차지하는 비중에 따라 결정됩니다. 작은 빨간 꽃은 제외되고 넓은 하늘이 두 개의 견본을 차지할 수도 있습니다. 관심 있는 영역을 잘라내거나 색상 개수를 늘려 보세요.
팔레트를 추출할 때 이미지는 안전한가요?
네. 이미지는 기기에서만 읽히며 절대 업로드되지 않아 저희도 볼 수 없습니다. 아무것도 저장되지 않으며, 복사하거나 다운로드하지 않으면 페이지를 새로고침하거나 닫을 때 팔레트가 사라집니다.
색상 팔레트 추출기는 무료인가요?
네. 계정이나 가입이 필요 없고 이미지 확인 횟수에 제한도 없습니다. 모든 기능이 무료입니다. 5가지 색상 개수 선택, 코드 복사, CSS, Tailwind, JSON, PNG 내보내기 모두 포함됩니다.