60:30:10 색상 비율 분석기

60:30:10 색상 비율 분석기란?

60:30:10 색상 비율 분석기는 업로드한 이미지의 색을 비슷한 계열끼리 묶은 뒤, 어떤 색감이 화면의 기반을 이루는지, 어떤 색이 중간 연결 역할을 하는지, 어떤 색이 포인트를 만드는지 정리해 주는 도구입니다. 단순히 상위 3색만 뽑는 방식이 아니라 가까운 색감을 한 가족으로 모아 실제 화면 인상을 더 가깝게 읽도록 설계했습니다.

분석 결과에서는 주색 60%, 보조색 30%, 강조색 10%에 대한 근접도 점수와 함께, 어떤 계열이 60에 가까운지, 강조색이 부족한지 과한지, 화면 한곳에 모이는지 넓게 퍼지는지까지 확인할 수 있습니다. 프레젠테이션, 썸네일, 일러스트, 웹 UI, 장면 레퍼런스 분석에 모두 활용할 수 있습니다.

이런 상황에서 사용하세요

• 애니메이션 장면 분석 — 특정 장면이 왜 안정적으로 보이는지, 포인트 색이 어디에서 힘을 쓰는지 읽고 싶을 때
• 브랜드/썸네일 레퍼런스 정리 — 참고 이미지의 색 구조를 숫자와 계열 단위로 빠르게 분해하고 싶을 때
• UI 시안 점검 — 버튼 강조색이 너무 넓게 퍼졌는지, 주색과 보조색의 분리가 약한지 확인할 때
• 포스터·배너 디자인 — 배경, 보조 영역, 강조 포인트가 적절히 나뉘는지 빠르게 진단할 때
• 컬러 스크립트 학습 — 좋아하는 이미지의 색 배합과 배치 패턴을 재현 가능한 언어로 기록하고 싶을 때

주요 기능

• 비슷한 색감 자동 묶기 — 연한 변주까지 묶어 하나의 색 계열로 보여 주므로 눈으로 느끼는 인상과 더 가깝게 해석할 수 있습니다.
• 60:30:10 근접도 점수 — 실제 이미지 비율이 이상적인 분배에 얼마나 가까운지 점수와 문장으로 알려 줍니다.
• 주색·보조색·강조색 역할 카드 — 각 역할의 대표 색, 비율, 특징, 개선 힌트를 한 카드에 모아 보여 줍니다.
• 강조색 배치 히트맵 — 강조색이 한곳에 응집되는지, 화면 전체에 흩어지는지 한눈에 확인할 수 있습니다.
• 배경색 약화 모드 — 흰 배경 또는 큰 무채색 면적 때문에 주색 판단이 흔들릴 때 보정 분석을 할 수 있습니다.
• HEX/RGB/HSL 코드 확인 — 대표 색상 코드를 원하는 형식으로 바꿔 확인하고 복사할 수 있습니다.

사용 방법

1. 이미지 업로드 — 분석할 장면, 썸네일, 포스터, UI 캡처 이미지를 업로드합니다.
2. 분석 모드 선택 — 큰 흰 배경이나 검은 배경이 있다면 기본값인 배경색 약화 모드를 그대로 두는 것이 좋습니다.
3. 점수와 역할 확인 — 상단의 적합도 점수와 주색·보조색·강조색 비율을 먼저 읽습니다.
4. 히트맵과 인사이트 확인 — 강조색이 어디에 몰렸는지, 더 줄여야 하는지 늘려야 하는지 문장 가이드를 확인합니다.
5. 코드 참고 — 역할 카드나 계열 묶음에 표시된 HEX/RGB/HSL 값을 디자인 작업에 참고합니다.

분석이 어떻게 이뤄지나요?

이 도구는 이미지를 축소 샘플링한 뒤 투명 픽셀을 제외하고, 색상 군집을 먼저 만들고 다시 가까운 색끼리 병합합니다. 이렇게 얻은 대표 색 그룹을 기준으로 주색, 보조색, 강조색의 역할을 나누고, 각 그룹이 차지하는 면적을 계산합니다.

강조색은 단순히 세 번째로 큰 색을 고르는 방식이 아니라, 화면에서 작은 면적이면서도 채도와 대비가 높아 시선을 끌 가능성이 큰 그룹을 우선 후보로 찾습니다. 이후 이미지 전체를 격자로 나눠 강조색이 어느 위치에 얼마나 분포하는지 계산해, 포인트가 모여 있는지 흩어져 있는지도 함께 설명합니다.

결과는 참고용 해석 도구입니다. 장면의 서사, 조명, 원근, 브랜드 의도까지 자동으로 판단하는 것은 아니므로, 최종 디자인 판단은 맥락과 함께 보시는 것이 좋습니다.

자주 묻는 질문