이미지 팔레트 생성기
이미지의 주요 색상을 팔레트로 추출하고 HEX 코드, CSS 변수, JSON으로 복사하세요.
이미지 팔레트 생성기는 사진이나 디자인에서 주된 색상을 찾아 견본으로 보여 줘요. 3, 4, 5, 6, 8가지 색 중에서 고를 수 있으며, 가장 넓은 면적을 차지하는 색부터 순서대로 나오고 아주 비슷한 색조는 합쳐져서 견본마다 뚜렷이 달라요. 팔레트를 CSS 변수나 JSON 배열로 복사하거나 PNG 색상표로 다운로드하세요.
이미지 팔레트 생성기 사용 방법
- 1
이미지 열기
사진, 일러스트, 로고, 스크린샷을 끌어다 놓거나, 선택하거나, 붙여넣으세요.
- 2
색상 개수 선택
3, 4, 5, 6, 8 중 하나를 클릭하세요. 견본이 바로 업데이트돼요.
- 3
색 하나씩 복사
견본의 복사 아이콘을 클릭하면 HEX 코드가 복사돼요.
- 4
팔레트 내보내기
CSS 변수 복사나 JSON 복사를 쓰거나, 팔레트를 PNG 색상표로 다운로드하세요.
주요 기능
- 면적 순으로 정렬
- 첫 번째 견본은 이미지에서 가장 넓은 부분을 차지하는 색이에요.
- 뚜렷이 다른 색조
- 거의 같은 색은 합쳐지므로 팔레트에 같은 톤이 반복되지 않아요.
- 개발자용으로 바로 사용
- CSS 사용자 정의 속성(--color-1, --color-2 등)이나 HEX 코드 JSON 배열로 내보내세요.
- PNG 색상표
- 견본마다 아래에 HEX 코드가 적힌 팔레트 이미지를 다운로드하세요.
자주 묻는 질문
팔레트 색은 어떻게 정해지나요?
이미지를 작은 크기로 샘플링하고 비슷한 색끼리 묶은 다음, 가장 넓은 면적을 차지하는 묶음부터 보여 줘요. 투명한 픽셀은 무시해요.
선택한 것보다 색이 적게 나오는 이유는 뭔가요?
서로 아주 가까운 색조는 견본마다 확실히 다르도록 합쳐져요. 뚜렷한 색이 몇 개 없는 이미지는 견본이 더 적게 나올 수 있어요.
팔레트를 CSS에서 어떻게 쓰나요?
CSS 변수 복사를 클릭하면 --color-1, --color-2 등의 변수가 담긴 :root 블록을 얻을 수 있어요. 스타일시트에 붙여넣으세요.
작은 포인트 색상이 빠진 이유는 뭔가요?
팔레트는 넓은 면적을 차지하는 색을 우선하기 때문에 작은 로고 같은 세부 요소는 나타나지 않을 수 있어요. 특정 지점의 정확한 값은 이미지 색상 추출기로 얻으세요.