사진에서 색상 추출
마음에 드는 사진의 색감을 그대로 가져와 디자인이나 발표 자료에 쓰세요.
도구를 준비하고 있어요.
이용자 평가
아직 등록된 리뷰가 없어요. 이 도구를 써 보셨다면 첫 리뷰를 남겨 주세요.
사진에서 색상 추출 상세 가이드
사용법과 예제를 살펴보고, 궁금한 내용은 주제별로 찾아보세요.
시작 전에 한눈에 보기
- 지원 형식
- JPG·PNG·WebP 등 브라우저가 여는 이미지 한 장, 25MB까지.
- 색 개수
- 2개부터 12개까지. 사진의 색 종류가 적으면 있는 만큼만 나옵니다.
- 뽑는 방식
- 중앙값 자르기. 색이 넓게 퍼진 축에서 반복해 나눕니다.
- 비율 표시
- 각 색이 차지하는 픽셀 비율을 함께 보여 줍니다.
- 지점 색 읽기
- 그림을 누르면 그 지점의 색을 따로 읽습니다.
- 내보내기
- HEX 목록·CSS 변수·JSON 중에 고릅니다.
- 제외 대상
- 거의 투명한 픽셀은 대표색에서 뺍니다.
- 처리 위치
- 사진을 서버로 보내지 않고 이 브라우저에서만 읽습니다.
사진에서 색상 추출 사용 순서
사진을 한 장 넣으세요
끌어다 놓거나 눌러서 고르면 바로 대표색을 뽑습니다. 색을 셀 때는 긴 변 220px로 줄여 보기 때문에 큰 사진도 기다릴 일이 거의 없고, 줄여도 대표색은 거의 달라지지 않습니다.
뽑을 색 개수를 정하세요
기본은 6개입니다. 전체 분위기만 보려면 3~4개, 배색을 자세히 나누려면 8개 이상으로 올려 보세요. 개수를 바꾸면 바로 다시 계산합니다.
원하는 지점의 색을 따로 읽으세요
대표색에 없는 색이 필요하면 미리보기 그림에서 그 부분을 누르세요. 화면에 보이는 크기가 아니라 원본 비율로 좌표를 옮겨 읽으므로, 작게 보고 눌러도 정확한 색이 나옵니다.
코드를 복사하거나 내보내세요
색마다 HEX를 바로 복사할 수 있고, 아래에서 HEX 목록·CSS 변수·JSON 중 하나를 골라 전체를 복사하거나 파일로 저장할 수 있습니다. 더 다양한 형식이 필요하면 색상 코드 변환기로 이어서 쓰세요.
이런 작업에 활용하세요
어떤 색이 얼마나 쓰였는지까지 봅니다
색을 하나씩 세는 대신 비슷한 색을 묶어 대표색을 정합니다. 색이 가장 넓게 퍼진 방향으로 계속 나누는 중앙값 자르기 방식이라, 사진 전체 분위기를 대표하는 색이 남습니다. 각 색이 화면에서 차지하는 비율을 함께 표시하므로 어떤 색이 주조색이고 어떤 색이 강조색인지 바로 구분됩니다. 거의 투명한 부분은 눈에 보이지 않으니 세지 않습니다.
전체 색과 한 지점의 색을 함께 다룹니다
대표색 목록과 별개로, 사진 위를 누르면 그 지점의 색을 정확히 읽어 줍니다. 로고의 특정 부분이나 옷 한 벌의 색처럼 좁은 영역이 필요할 때 쓰세요. 뽑은 색은 HEX 목록·CSS 변수·JSON 중에 골라 내보낼 수 있어 코드에 바로 붙여 넣을 수 있습니다.
예제로 결과 이해하기
노을 사진에서 5색 뽑기
주황빛 하늘 사진 · 색 개수 5#F2A65A 42.3%
#D9643A 26.1%
#3C4A6B 18.7%
#1B2036 9.4%
#F7E3C6 3.5%투명한 로고 이미지
배경이 투명한 PNG 로고로고에 실제로 쓰인 색만 나옵니다.대표색과 지점 색은 쓰임이 다릅니다
표를 좌우로 밀어 나머지 내용을 확인하세요.
| 구분 | 무엇을 주나 | 언제 쓰나 |
|---|---|---|
| 대표색 목록 | 사진 전체에서 넓게 쓰인 색과 비율 | 분위기에 맞는 배색을 짤 때 |
| 누른 지점의 색 | 그 한 점의 정확한 색 | 로고나 특정 부분의 색을 맞출 때 |
| 색상 코드 변환기 | 이미 아는 코드의 다른 표기 | 뽑은 코드를 다른 형식으로 바꿀 때 |
결과가 예상과 다를 때
비슷한 색만 여러 개 나옵니다
사진에 한 계열의 색이 넓게 깔린 경우입니다. 색 개수를 3~4개로 줄이면 계열별로 묶여 나옵니다.
원하는 색이 목록에 없습니다
좁은 영역의 색은 비율이 낮아 대표색에 들지 않습니다. 미리보기에서 그 부분을 직접 눌러 읽어 주세요.
대표색을 찾지 못했다고 나옵니다
전체가 투명한 이미지일 때 나옵니다. 보이는 픽셀이 없으면 셀 색도 없기 때문입니다.
이미지를 읽지 못한다고 나옵니다
브라우저가 열 수 없는 형식입니다. HEIC라면 HEIC JPG 변환으로 바꾼 뒤 넣어 주세요.
알아두면 쉬운 용어
- HEX
- #28613E처럼 색을 여섯 자리로 적는 방식입니다. 웹에서 가장 널리 쓰입니다.
- HSL
- 색상·채도·명도로 색을 적는 방식입니다. 밝기만 조금 바꾸고 싶을 때 편합니다.
- 중앙값 자르기
- 색이 넓게 퍼진 방향에서 반복해 반씩 나눠 대표색을 정하는 방법입니다.
- 주조색
- 화면에서 가장 넓게 쓰인 색입니다. 비율이 가장 높은 색이 여기에 해당합니다.
사진에서 색상 추출 자주 묻는 질문
색이 몇 개까지 나오나요?
2개부터 12개까지 고를 수 있습니다. 다만 사진에 있는 색 종류가 요청한 수보다 적으면 있는 만큼만 나옵니다.
인쇄용 색으로 바꿔 주나요?
바꿔 주지 않습니다. 화면 색(HEX·RGB·HSL)만 다룹니다. CMYK나 팬톤 별색은 인쇄소의 색 관리 기준을 따라야 해서 여기서 변환하면 실제 인쇄물과 달라질 수 있습니다.
큰 사진도 되나요?
됩니다. 색을 셀 때는 긴 변 220px로 줄여 보기 때문에 큰 사진도 금방 끝나고, 줄여도 대표색은 거의 달라지지 않습니다.
같은 사진이면 항상 같은 색이 나오나요?
나옵니다. 무작위로 고르지 않고 정해진 방식으로 나누기 때문에 결과가 매번 같습니다.
색 비율을 다 더하면 100%인가요?
맞습니다. 보이는 픽셀만 기준으로 하므로 대표색 비율의 합이 전체가 됩니다.
여러 장을 한 번에 넣을 수 있나요?
지금은 한 장씩 다룹니다. 사진마다 대표색이 다르기 때문에 한 장씩 확인하는 편이 정확합니다.