어떤 이미지에서든 색상 팔레트를 추출하고 대비까지 검사하세요

색상을 선택하는 방법

이 도구는 이미지를 긴 변 기준으로 최대 160픽셀인 작은 복사본으로 줄인 뒤, 투명하지 않은 모든 픽셀을 셉니다. 그런 다음 k-평균 군집화로 비슷한 픽셀을 묶고 각 그룹의 평균 색상을 큰 그룹부터 순서대로 보여줍니다. 각 색상 견본에 표시된 백분율은 해당 그룹이 이미지에서 차지하는 비율입니다.

시작점은 무작위가 아니라 고정되어 있습니다. 가장 흔한 색에서 시작해, 이미 뽑은 색들과 가장 멀리 떨어진 색을 계속 추가합니다. 그래서 같은 이미지는 매번 같은 팔레트를 만들며, 흰 상자 위의 빨간 로고처럼 작고 선명한 포인트 색도 배경에 섞여 평균화되지 않고 자기만의 견본을 얻습니다.

5~8개 색상을 요청하세요. 단색 배경의 제품 사진은 보통 5~6개면 충분합니다. 요소가 많은 라이프스타일 사진은 8개가 더 잘 어울립니다. 요청한 수보다 뚜렷한 색이 적으면 도구가 이를 알려주고 찾아낸 색만 보여줍니다.

대비 행렬 읽는 법

모든 색상은 서로 다른 모든 색상과, 그리고 순수한 흰색 및 검정색과 짝을 이루며, 각 칸은 행 색상의 텍스트를 열 색상 배경에 올렸을 때의 대비율을 보여줍니다. 대비율은 WCAG 정의를 따릅니다: (L1 + 0.05) / (L2 + 0.05)이며, 여기서 L1과 L2는 각각 밝은 색과 어두운 색의 상대 휘도입니다. 값은 1:1(같은 색을 두 번)부터 21:1(흰 배경 위 검정)까지입니다.

라벨은 WCAG가 정한 기준값입니다:

• AA: 일반 텍스트는 최소 4.5:1, 큰 텍스트는 3:1 (성공 기준 1.4.3).
• AAA: 일반 텍스트는 최소 7:1, 큰 텍스트는 4.5:1 (성공 기준 1.4.6).
• 큰 텍스트란 최소 18포인트, 또는 14포인트 굵게를 뜻합니다 (WCAG의 큰 크기 정의).

AA 큰 텍스트로 표시된 칸은 큰 제목에는 적합하지만 캡션에는 너무 흐립니다. W3C의 1.4.3 설명은 비율을 반올림하면 안 된다고도 명시하므로, 4.499:1은 4.5:1을 충족하지 못합니다. 이 도구는 정확한 수치를 기준으로 판정하고 소수점 둘째 자리에서 올리지 않고 잘라서 표시합니다.

실제 계산 예시

사진에서 네이비 #1a3c6e와 크림색 #fdf6e3이 추출됐다고 해봅시다. 네이비의 상대 휘도는 약 0.046, 크림색은 약 0.923입니다. 비율은 (0.923 + 0.05) / (0.046 + 0.05)로, 반올림한 값으로는 약 10.1:1, 정확한 값으로는 10.16:1입니다. 이는 모든 텍스트에 대해 AAA를 통과하므로, 크림색 엔드 카드 위의 네이비 텍스트는 어떤 크기든 안전합니다. 같은 크림색 위에 #e07a2e 같은 중간 톤 오렌지를 올리면 비율이 2.78:1로 떨어져 큰 텍스트에도 실패합니다. 오렌지는 검정 텍스트를 올린 버튼(6.99:1로 AA는 되지만 AAA에는 살짝 못 미침)이나, 글자 없는 도형에 쓰세요.

내보내기 활용하기

CSS 내보내기는 사용자 지정 속성으로 이루어진 :root 블록으로, 이미지에서 가장 많은 영역을 차지하는 색이 --color-1이며 그 아래로 순서대로 이어집니다. JSON에는 각 색상의 hex, RGB, HSL과 이미지에서의 비율이 담겨 있어 디자인 토큰 파일에 붙여넣거나 스크립트에 넘기기 좋습니다. 어떤 색이 배경이고 텍스트이며 포인트인지 파악한 뒤 변수 이름을 바꾸세요.

이 도구가 하지 않는 것

이 도구는 어떤 색이 당신의 브랜드 색인지 알지 못합니다. 나무 테이블 위에 놓인 제품 사진에는 테이블 색도 포함됩니다. 제품의 색만 원한다면 먼저 제품이나 패키지로 잘라내세요. 또한 정확한 인쇄 색상은 알려주지 못합니다. 숫자는 카메라 촬영과 편집을 거친 파일 안의 픽셀값이므로, 게시하기 전에 브랜드 가이드와 대조해 확인하세요. 그리고 텍스트 대비만 판정합니다. WCAG에는 아이콘과 인터페이스 요소에 대한 별도 규칙이 있는데, 이 행렬은 그것을 평가하지 않습니다.

직접 하고 싶지 않다면

Hermoso는 자동으로 돌아가는 마케팅입니다. 당신의 시장에서 이미 성과를 내는 광고를 조사하고, 브랜드에 맞는 이미지·영상 광고를 만들며, 게시물을 예약하고 당신의 광고 계정에서 유료 캠페인을 운영합니다. 웹사이트에서 브랜드를 추가하면 제품, 로고, 팔레트를 학습하며, hex 코드로 캡션과 엔드 카드 색상을 설정할 수 있습니다. 웹 앱에서 사용하거나 MCP 서버를 통해 Claude, ChatGPT, Cursor 안에서 사용할 수 있습니다.

무료 도구: 소셜 미디어 사이즈 가이드 · Instagram 그리드 메이커 · Open Graph 생성기

자주 묻는 질문

사진에서 색상 팔레트를 어떻게 얻나요?

사진을 도구에 올리고 원하는 색상 수를 5~8개 중에서 고르세요. 비슷한 픽셀을 묶어서 각 그룹의 평균 색상을 HEX, RGB, HSL로 큰 비중 순서대로 보여주며, 각각에 복사 버튼이 있습니다.

텍스트에 필요한 대비 비율은 얼마인가요?

WCAG 2.2 AA 등급은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1을 요구합니다. AAA 등급은 7:1과 4.5:1을 요구합니다. 큰 텍스트는 최소 18포인트, 또는 14포인트 굵게입니다.

4.49:1이면 AA를 통과할 만큼 충분히 가깝나요?

아닙니다. W3C는 임계값과 비교할 때 계산된 비율을 반올림하지 않아야 한다고 명시하므로, 4.499:1은 4.5:1을 충족하지 않습니다. 이 도구는 정확한 수치로 판단합니다.

왜 매번 같은 팔레트가 나오나요?

클러스터링은 가장 흔한 색상이라는 고정된 지점에서 시작한 다음, 이미 선택된 색상들로부터 가장 먼 색상을 추가합니다. 무작위 시작점이 없으므로 한 이미지는 항상 하나의 결과를 냅니다.

제 이미지가 업로드되나요?

아닙니다. 브라우저 자체의 파일 리더로 읽고 귀하의 기기 내 캔버스에서 계산합니다. 어디에도 전송되거나 저장되지 않습니다.