색상 팔레트 추출

색상 팔레트 추출기는 업로드한 이미지에서 주요 색상들을 자동으로 분석하여 HEX 및 RGB 코드로 보여주는 도구입니다. 사진이나 일러스트에서 마음에 드는 색 조합을 발견했을 때, 일일이 스포이드로 찍지 않아도 핵심 색상 3~10개를 한 번에 추출할 수 있습니다. 웹 디자인의 컬러 스킴 설정, 브랜드 가이드라인 작성, 인테리어 색상 참고 등 색상 조합이 필요한 다양한 작업에 활용됩니다. Median Cut 알고리즘을 사용하여 이미지의 가장 대표적인 색상들을 정확하게 뽑아냅니다.

Median Cut이 색을 고르는 방식

사진 한 장에는 보통 수만 가지 색이 들어 있습니다. 여기서 대표색 몇 개를 고르는 문제를 푸는 것이 Median Cut입니다. 먼저 이미지의 모든 픽셀을 빨강·초록·파랑 세 축을 가진 상자 하나에 담고, 그 상자에서 값이 가장 넓게 퍼진 축을 찾아 중앙값을 기준으로 둘로 자릅니다. 나뉜 상자를 같은 방식으로 계속 쪼개 원하는 개수가 되면 멈추고, 각 상자에 든 픽셀들의 평균색을 대표로 내놓습니다.

중앙값으로 자르기 때문에 각 상자에는 비슷한 수의 픽셀이 담깁니다. 여기서 이 방식의 성격이 나옵니다. 넓은 면적을 차지하는 색이 잘 잡히는 대신, 화면의 아주 작은 부분에만 있는 강렬한 색은 누락되기 쉽습니다. 하늘이 대부분인 풍경 사진에서 파랑 계열이 여러 개 나오고 정작 눈에 띄던 빨간 지붕은 빠지는 경우가 그래서 생깁니다.

원하는 색이 안 나올 때

추출 결과가 기대와 다르다면 대개 이미지 쪽을 손보는 것이 빠릅니다. 필요한 색이 있는 부분만 잘라서 올리면 그 영역의 색이 전체 비중을 차지하게 되어 확실히 잡힙니다. 반대로 배경이 단색으로 넓게 깔린 이미지는 그 색만 여러 번 나오므로 배경을 덜어내고 올리는 편이 낫습니다.

색 개수를 늘리면 비슷한 색조가 잘게 쪼개져 나오고, 줄이면 대비가 큰 색 위주로 남습니다. 웹 디자인용 기본 팔레트를 잡을 때는 다섯 개 안팎이 다루기 좋고, 이미지 전체의 색 분포를 살펴보려는 목적이라면 열 개까지 올려보세요.

뽑은 색을 바로 쓰기 전에

추출된 색은 어디까지나 이미지에 있던 색이지 디자인에 바로 쓸 수 있는 조합은 아닙니다. 특히 글자 색으로 쓸 값은 반드시 대비를 확인해야 합니다. 사진에서 뽑은 중간 밝기의 색을 흰 배경 위 본문 글자에 쓰면 접근성 기준(일반 텍스트 4.5:1)을 못 넘기는 경우가 많습니다. 색상 대비 검사기에 배경색과 함께 넣어 비율을 확인하고, 모자라면 명도만 조정해 쓰세요.

다크 모드까지 고려한다면 뽑은 색을 그대로 양쪽에 쓰지 말고, 밝은 배경용과 어두운 배경용으로 명도를 나눠 두 벌을 만드는 편이 안전합니다.

자주 묻는 질문

투명한 PNG를 올리면 어떻게 되나요?

투명 영역이 흰색이나 검은색으로 채워진 것처럼 계산되어 실제로 없는 색이 결과에 섞일 수 있습니다. 로고처럼 투명 배경이 넓은 이미지는 원하는 배경색을 깔아 평탄화한 뒤 올리는 편이 정확합니다.

같은 이미지인데 결과가 조금씩 다릅니다

속도를 위해 모든 픽셀이 아니라 일정 간격으로 표본을 뽑아 계산하기 때문입니다. 큰 이미지일수록 표본 위치에 따른 미세한 차이가 생길 수 있으나 대표색의 큰 흐름은 유지됩니다.

HEX와 RGB 중 무엇을 쓰나요?

같은 색의 다른 표기일 뿐입니다. CSS나 디자인 도구에 붙여넣을 때는 HEX가 짧아 편하고, 투명도를 함께 다루거나 코드에서 값을 계산할 일이 있으면 RGB가 편합니다.

올린 사진이 서버에 저장되나요?

저장되지 않습니다. 이미지는 브라우저 안에서만 읽히고 분석되며 업로드가 일어나지 않습니다. 미공개 시안이나 개인 사진도 그대로 올려서 색을 뽑을 수 있습니다.