이미지에서 색상 추출 — 사진의 대표 색과 비율을 뽑아 팔레트 만들기
사진을 올리면 대표 색 3~12개를 뽑아 HEX·RGB 코드와 이미지에서 차지하는 비율을 보여 줍니다. 사진 위를 눌러 원하는 지점의 색을 직접 집을 수도 있고, 팔레트를 CSS 변수나 Tailwind 색상, PNG로 가져갈 수 있습니다.
사진에서 색을 뽑는 일은 비슷한 픽셀을 묶어 대표 색을 정하는 작업입니다. 어떤 기준으로 '비슷하다'고 볼지가 결과를 가릅니다. 예전 버전은 빨강·초록·파랑 숫자의 거리로 비교했는데, 사람 눈이 느끼는 차이와는 다릅니다. 어두운 색들은 숫자상 서로 가까워 한 덩어리로 뭉치고, 비슷해 보이는 초록들은 멀리 떨어진 것으로 계산됩니다.
지금은 사람의 눈에 맞춘 OKLab 공간에서 색을 묶습니다. 같은 사진을 두 방식으로 계산해 '원본 픽셀이 대표 색과 얼마나 다른가'를 재 보면, 풍경 사진에서 10~15%, 인물 사진에서 4~8% 오차가 줄었습니다. 반대로 흰 배경에 제품만 있는 단순한 사진은 두 방식의 차이가 거의 없었습니다.
시작 색을 고르는 방법도 바꿨습니다. 예전에는 '가장 멀리 떨어진 픽셀'을 차례로 골랐는데, 그런 픽셀은 대개 빛 반사나 노이즈입니다. 지금은 거리에 비례한 확률로 고르되 난수 씨앗을 고정해, 같은 사진이면 언제나 같은 팔레트가 나옵니다.
결과를 쓰는 방법
- •색 개수는 3~12개에서 고릅니다. 로고나 브랜드 색을 찾을 때는 4~6개, 사진 분위기를 옮길 때는 8~12개가 편합니다.
- •각 색 아래의 비율은 사진에서 그 색이 차지하는 넓이입니다. 가장 넓은 색을 배경으로, 비율이 작고 선명한 색을 강조색으로 쓰면 원본 사진과 비슷한 인상이 됩니다.
- •'CSS 변수 복사'는 --color-1 형태로, 'Tailwind 색상 복사'는 설정 파일에 붙여 넣을 수 있는 형태로 복사합니다.
- •사진 위를 누르면 그 지점의 정확한 색을 집습니다. 팔레트에는 없지만 꼭 필요한 색(로고의 특정 부분 등)을 가져올 때 씁니다. 돋보기로 픽셀 단위까지 확인할 수 있습니다.
- •PNG로 내려받으면 색 견본과 코드가 들어간 이미지가 저장됩니다. 문서나 발표 자료에 붙이기 좋습니다.
좋은 팔레트를 얻는 사진
색이 분명하게 나뉜 사진일수록 결과가 깔끔합니다. 역광으로 전체가 어둡거나, 화이트밸런스가 크게 틀어진 사진은 뽑힌 색도 그 영향을 그대로 받습니다. 원하는 색이 사진의 아주 작은 부분에만 있다면 개수를 늘리거나, 그 부분을 잘라낸 뒤 올리면 잘 잡힙니다.
계산은 사진을 최대 400px로 줄인 뒤 최대 2만 개 픽셀을 표본으로 씁니다. 큰 사진도 빠르게 처리되고, 표본이 충분해 비율도 안정적으로 나옵니다. 투명한 부분은 빼고 계산하므로 배경이 투명한 PNG 로고도 그대로 올리면 됩니다.
뽑은 색을 배색에 쓰는 요령
- •가장 넓은 색은 배경, 두 번째로 넓은 색은 카드나 구역 나누기, 비율이 5% 아래인 선명한 색은 버튼이나 링크처럼 눈길이 가야 하는 곳에 쓰면 균형이 맞습니다.
- •본문 글자색으로는 사진에서 뽑은 색보다 거의 검정에 가까운 색을 쓰는 편이 읽기 쉽습니다. 뽑은 색은 제목이나 아이콘에 쓰세요.
- •밝은 색 위에 흰 글자를 올리면 잘 안 보입니다. 배색을 정한 뒤 명도 대비 검사기로 4.5 대 1 이상인지 확인하세요.
- •같은 사진이라도 색 개수를 바꾸면 비율이 큰 색이 여러 단계로 나뉩니다. 4개로 시작해 부족하면 늘려 보는 순서가 편합니다.
자주 묻는 질문
같은 사진인데 다른 팔레트가 나오기도 하나요?
아니요. 난수 씨앗을 고정했기 때문에 같은 사진과 같은 색 개수에서는 항상 같은 결과가 나옵니다.
글자 색은 어떻게 정하나요?
각 색 위에 올리는 글자는 흰색과 검은색 중 대비가 더 큰 쪽을 WCAG 명도 대비 기준으로 자동 선택합니다.
사진이 서버로 전송되나요?
아니요. 색 추출과 색 집기 모두 브라우저 안에서만 이루어집니다.