색상 팔레트 추출
사진에서 많이 쓰인 대표색을 골라 팔레트로 보여 주고, 원하는 곳을 눌러 색을 집을 수도 있어요. HEX, RGB 코드 복사와 CSS 변수, 팔레트 이미지 저장을 지원해요.
사진을 끌어다 놓거나 붙여넣기JPG, PNG, WEBP, HEIC
파일 선택이미지를 올리면 대표색을 자동으로 뽑아요. 사진을 누르면 그 위치의 색을 집어요.
팔레트
아직 색이 없어요.
사용 방법
1이미지 올리기색을 참고할 사진이나 디자인 이미지를 올려요.
2팔레트 확인대표색 개수와 정렬을 바꿔 보고, 사진을 눌러 원하는 색을 직접 집어요.
3복사·저장색을 눌러 HEX 코드를 복사하거나 CSS 변수, 팔레트 이미지로 저장해요.
이런 때 쓰면 좋아요
마음에 드는 사진이나 포스터의 색감을 내 디자인에 옮기고 싶을 때, 눈으로 비슷한 색을 고르면 생각보다 잘 맞지 않아요. 사진에서 실제로 많이 쓰인 색을 숫자로 뽑아내면 블로그 대표 이미지, 발표 자료, 브랜드 색을 정할 때 훨씬 정확해요.
이 도구는 사진의 픽셀을 비슷한 색끼리 묶어서(k-평균 군집) 대표색을 찾고, 각 색이 사진에서 차지하는 비율도 함께 보여 줘요. 색 개수를 바꾸면 굵직한 분위기 색부터 세세한 포인트 색까지 볼 수 있어요.
스포이드처럼 사진을 눌러 특정 위치의 색을 집을 수도 있어요. 뽑은 색은 CSS 변수로 복사해서 웹 개발에 바로 쓰거나, 팔레트 이미지로 저장해 팀과 공유하세요.
자주 묻는 질문
뽑을 때마다 색이 조금씩 달라요.
대표색 계산은 사진의 일부 픽셀을 골라서 묶는 방식이라 실행할 때마다 아주 조금 다를 수 있어요. 정확한 한 점의 색이 필요하면 사진을 눌러 직접 집으세요.
투명한 부분도 색으로 잡히나요?
아니요. 거의 투명한 픽셀은 계산에서 빼요.
이미지가 서버로 올라가나요?
아니요. 색 계산은 모두 브라우저 안에서 이뤄져요.
CSS 변수는 어떤 형식인가요?
:root { --color-1: #aabbcc; } 형식으로 복사돼요. 그대로 스타일시트에 붙여 넣으면 돼요.
큰 사진도 되나요?
네. 계산할 때는 사진을 작게 줄여서 쓰기 때문에 큰 사진도 빠르게 처리돼요.