이미지 색상 추출기

이미지 색상 추출기 사용법

1. 이미지를 점선 상자로 끌어다 놓거나, 파일 선택 버튼으로 고르거나, 복사한 이미지를 Ctrl+V로 붙여넣으세요. 폰에서는 파일 선택 버튼으로 사진을 고르면 돼요.
2. "뽑을 색 개수"에서 3개에서 8개 사이를 고르면 대표 색이 많이 쓰인 순서로 막대와 카드로 나와요. 막대의 폭은 사진에서 그 색이 차지하는 비율이에요.
3. 카드의 HEX, RGB, HSL 값을 누르면 그대로 복사돼요. 카드 아래에는 그 색을 배경으로 했을 때 흰 글자와 검은 글자의 대비비가 나와서 어떤 글자색이 읽기 좋은지 바로 알 수 있어요.
4. 원하는 정확한 한 지점의 색이 있다면 사진 위를 눌러 보세요. 누른 지점에 동그라미가 표시되고 그 색이 별도 카드로 나와요.
5. "HEX 목록 복사"와 "CSS 변수 복사"로 디자인이나 코드에 바로 붙여 넣고, "팔레트 이미지 저장"으로 사진 썸네일과 색 막대가 들어간 PNG 카드를 저장할 수 있어요.

대표 색을 뽑는 방식

큰 사진을 그대로 계산하면 느려서 이미지를 최대 220픽셀로 줄인 뒤 투명하지 않은 픽셀의 색을 모아요. 비슷한 색은 색 공간을 잘게 나눈 칸에 묶어서 가장 많이 나온 색에서 시작하고, 이미 고른 색들과 멀리 떨어진 색을 하나씩 더해 원하는 개수만큼 출발점을 정해요.

그다음 k-평균(k-means)이라는 방법으로 모든 색을 가장 가까운 대표 색에 배정하고 대표 색을 평균으로 옮기는 과정을 12번 반복해요. 무작위 요소가 없어서 같은 이미지는 언제나 같은 결과가 나오고, 각 대표 색이 사진에서 차지하는 비율도 함께 계산해요. 모든 계산은 브라우저 안에서만 이루어져요.

색 코드와 글자 대비 이해하기

HEX는 #RRGGBB처럼 빨강, 초록, 파랑 세 값을 16진수 두 자리씩 적은 표기로 웹 디자인에서 가장 흔해요. RGB는 같은 값을 0에서 255 사이 10진수로 적은 것이고, HSL은 색상(0에서 360도), 채도(%), 밝기(%)로 적어서 같은 색을 더 밝게 하거나 탁하게 바꿀 때 편해요. 이 도구는 세 가지를 모두 복사할 수 있게 보여 줘요.

글자와 배경의 대비는 두 색의 상대 휘도 비율로 계산하고 1:1(같은 색)에서 21:1(흰색과 검은색) 사이의 값이에요. 웹 접근성 지침(WCAG)은 일반 글자에 4.5:1 이상(AA), 큰 글자에 3:1 이상, 더 엄격한 AAA 등급은 일반 글자에 7:1 이상을 권해요. 사진에서 뽑은 색을 버튼이나 제목 배경으로 쓸 때 글자가 읽히는지 확인하는 데 쓸 수 있어요.

사진에서 뽑은 색으로 팔레트를 만들 때는 가장 넓은 색을 배경이나 바탕으로, 중간 비율의 색을 보조 색으로, 눈에 띄지만 적은 비율의 색을 강조 색으로 나누어 쓰면 자연스러워요. 색이 너무 비슷하게 나오면 색 개수를 늘려 보고, 너무 많다면 줄여 보세요.

활용 예로는 발표 자료나 블로그 대표 이미지를 사진과 어울리는 색으로 맞추기, 인테리어나 패션 코디 사진에서 색 조합 정리하기, 그림이나 풍경 사진의 색감을 기록해 두기, 웹사이트 버튼과 제목 색을 사진 한 장에서 고르기가 있어요. 뽑은 HEX 목록을 디자인 도구에 붙여 넣고 CSS 변수로 복사해 코드에도 바로 쓸 수 있어서, 사진 한 장으로 색 구성을 빠르게 시작할 수 있어요.

잘 쓰는 요령

• 배경이 단색인 사진은 배경 색이 대부분을 차지해요. 주인공의 색이 필요하면 색 개수를 늘리거나 사진 위를 눌러 직접 찍어 보세요.
• 압축이 심한 사진이나 어두운 사진은 색이 탁하게 나올 수 있어요. 가능하면 밝고 선명한 원본을 쓰세요.
• 로고나 브랜드 이미지의 색은 해당 브랜드의 가이드라인을 따라야 할 수 있으니 상업적으로 쓰기 전에 확인하세요.
• 색을 고른 뒤 글자와 배경 조합은 컬러 대비 검사기에서 한 번 더 확인하면 안전해요.
• 사진 속 사람의 얼굴이나 개인 정보가 있는 이미지는 이 도구가 서버로 보내지 않지만, 화면을 공유할 때는 주의하세요.

자주 묻는 질문

대표 색은 어떻게 고르나요?

이미지를 최대 220픽셀로 줄여 투명하지 않은 픽셀의 색을 모은 뒤, 비슷한 색끼리 묶어서 가장 많이 쓰인 색과 서로 멀리 떨어진 색을 출발점으로 삼고 k-평균(k-means) 방식으로 12번 다듬어요. 무작위 요소가 없어서 같은 이미지는 항상 같은 결과가 나와요.

"AA 통과"는 무슨 뜻인가요?

웹 접근성 지침(WCAG)은 일반 크기 글자의 글자색과 배경색 대비비가 4.5:1 이상이면 AA 등급을 통과한다고 봐요. 이 도구는 각 색을 배경으로 했을 때 흰 글자와 검은 글자의 대비비를 계산해서 어느 쪽이 읽기 편한지 알려 줘요. 큰 글자(18pt 이상 또는 굵은 14pt 이상)는 3:1 이상이면 돼요.

사진의 색과 뽑은 색이 조금 달라 보여요.

대표 색은 비슷한 색을 평균 낸 값이라 사진의 한 점과 정확히 같지 않을 수 있어요. 정확한 한 지점의 색이 필요하면 사진 위를 눌러 그 지점의 색을 찍어 보세요. 사진 압축, 조명, 그림자도 색에 영향을 줘요.

이미지가 서버에 올라가나요?

아니요. 이미지는 이 브라우저 안에서만 읽고 계산하며 서버로 전송되거나 저장되지 않아요. 25MB 이하의 JPG, PNG, WebP, GIF, SVG 등을 지원해요.

인쇄용 색(CMYK)도 알 수 있나요?

이 도구는 화면용 sRGB 값(HEX, RGB, HSL)만 보여 줘요. 인쇄 색은 종이와 잉크, 프린터에 따라 달라서 인쇄소의 색상 안내나 디자인 프로그램의 색상 변환을 확인하세요.

주의사항

이 도구는 화면용 sRGB 값을 참고용으로 보여 주며 사진 압축, 조명, 모니터 설정에 따라 실제 색과 다르게 보일 수 있어요. 인쇄용 색은 지원하지 않아요. 이미지는 서버로 전송되거나 저장되지 않아요. BTSPACE WAGLE은 비공식 정보 사이트입니다.