이미지 색상 팔레트 추출 — 사진·로고에서 대표 색 HEX 코드 뽑기
브랜드 로고와 어울리는 배경색을 찾을 때, 사진 분위기에 맞춰 블로그 제목 색을 정할 때, 발표 자료의 색을 참고 이미지에서 가져올 때 — 색을 눈대중으로 고르면 화면마다 달라 보이기 쉽습니다. 이 도구는 이미지 안에서 실제로 많이 쓰인 색을 골라 HEX·RGB·HSL 코드와 픽셀 비율로 보여 주고, 각 색 위에 흰 글자와 검은 글자 중 어느 쪽이 잘 읽히는지 대비 비율까지 계산합니다.
어떻게 색을 고르나 — 미디언 컷
모든 픽셀의 색을 R·G·B 세 축을 가진 상자 하나에 넣고, 색 범위가 가장 넓은 축을 기준으로 픽셀 수가 반씩 되도록 상자를 나눕니다. 이 과정을 원하는 개수만큼 반복한 뒤, 상자마다 들어 있는 픽셀의 평균색을 대표색으로 삼습니다. 이 방식(미디언 컷)은 GIF 인코더가 256색을 고를 때 쓰는 고전적인 알고리즘으로, 많이 쓰인 색일수록 더 세밀하게 나뉘고 드문 색은 하나로 뭉치는 성질이 있습니다. 결과 옆의 비율(%)은 각 대표색 상자에 속한 픽셀의 몫입니다.
계산은 이미지를 긴 변 240px로 줄인 사본으로 합니다. 색 분포를 보는 데는 충분하고, 4,000px 사진도 1초 안에 끝납니다. 원본을 줄이는 것은 계산용 사본뿐이며 원본 파일은 바뀌지 않습니다.
글자 대비(WCAG) 표시 읽는 법
각 색 아래 "흰 글자 5.2:1 · AA"처럼 표시되는 값은 웹 접근성 지침(WCAG 2.1)의 명도 대비 비율입니다. 본문 글자는 4.5:1 이상(AA), 큰 글자(약 24px 이상 또는 굵은 19px 이상)는 3:1 이상, 더 엄격한 기준은 7:1(AAA)입니다. 뽑은 색을 버튼이나 배지 배경으로 쓸 계획이라면, 이 값이 4.5 미만인 색 위에는 글자를 올리지 않는 편이 안전합니다.
흰 배경 제외 옵션
제품 사진이나 로고처럼 흰 바탕이 넓은 이미지는 흰색이 팔레트의 절반을 차지해 버립니다. '흰 배경은 빼고 계산'을 켜면 R·G·B가 모두 245를 넘는 거의 흰색 픽셀을 계산에서 제외해 실제 피사체의 색만 남습니다. 투명 PNG의 투명 영역은 항상 제외됩니다.
내보내기
- CSS 변수 복사:
:root { --color-1: #1a2b3c; … }형태로 복사됩니다. 비율이 높은 색부터 번호가 붙습니다. - JSON 복사: hex·rgb·hsl·ratio 필드를 가진 배열입니다. 디자인 토큰이나 스크립트에 넣기 좋습니다.
- 팔레트 PNG 저장: 색 칸과 HEX 코드가 적힌 띠 이미지입니다. 문서나 메신저에 붙여 공유할 때 씁니다.
활용 예
- 블로그·썸네일 색 맞추기: 대표 사진을 올려 2~3색을 뽑고, 제목 배경은 비율 1위 색, 강조는 가장 채도 높은 색으로 정하면 사진과 겉돌지 않습니다. 썸네일 규격은 플랫폼별 이미지 규격을 참고하세요.
- 로고 색 코드 확인: 회사 로고 PNG를 올리고 흰 배경 제외를 켜면 브랜드 색 HEX가 바로 나옵니다. 배경이 투명하지 않은 로고는 배경 지우기로 먼저 정리해도 됩니다.
- 파비콘 색 정하기: 뽑은 색으로 단순한 아이콘을 만들고 파비콘 만들기로 ICO를 생성하면 작은 크기에서도 브랜드 색이 유지됩니다.
한계
- 미디언 컷은 "많이 쓰인 색"을 고르므로, 면적은 작지만 눈에 띄는 포인트 색(작은 빨간 버튼 등)은 개수를 늘려야 잡힙니다.
- 그라데이션이 많은 사진은 대표색이 중간 톤의 탁한 색으로 평균될 수 있습니다. 이럴 때는 개수를 12~16으로 올려 보세요.
- 색 코드는 sRGB 기준입니다. Display P3 같은 넓은 색 영역의 사진은 브라우저가 sRGB로 변환한 값이 나옵니다.
💡 자주 묻는 질문
Q. 뽑힌 색이 화면에서 보이는 색과 조금 다른데요?
A. 각 색은 비슷한 픽셀들의 평균이라 사진 속 특정 지점의 색과 정확히 같지는 않습니다. 특정 지점의 색이 필요하면 개수를 늘리거나, 그 부분만 잘라낸 이미지를 올리면 더 가까운 값이 나옵니다.
Q. 몇 가지 색을 뽑는 게 좋나요?
A. 웹 디자인용 기본 팔레트는 4~6색이 다루기 쉽습니다. 사진 분위기를 폭넓게 보려면 8~12색, 작은 포인트 색까지 잡으려면 16색으로 올려 보세요.
Q. 대비 비율 AA·AAA는 무슨 뜻인가요?
A. WCAG 접근성 기준의 등급입니다. 본문 글자는 배경과 4.5:1 이상(AA), 더 엄격하게는 7:1 이상(AAA)이어야 대부분의 사람이 읽기 편합니다. 3:1은 큰 글자에만 허용되는 수준입니다.
Q. 이미지가 서버로 올라가나요?
A. 아니요. 색 계산은 브라우저의 Canvas에서 하고, 결과 복사와 PNG 저장도 기기 안에서 이뤄집니다.