60·30·10 배색 법칙을 브랜드에 적용하는 방법
세 색의 역할과 면적을 나누되 상황에 맞게 비율을 조정하는 법
Palette Compass
좋아하는 색 하나에서
쓸 수 있는 조합을 찾으세요.
색을 잘 몰라도 괜찮습니다. 기준색을 고르면 여섯 가지 배색 공식으로 브랜드·웹·앱에 적용할 조합을 보여드립니다.
실험실에서 조합 만들기빠른 시작
어떤 색을 좋아하세요?
가까운 계열을 골라 시작한 뒤 정확한 HEX로 조정할 수 있습니다.
Reviewed starts
검수된 추천 조합
공식별로 한 가지씩, 실제 화면에서 역할과 대비를 확인한 시작점입니다.
- 선명한 블루 단계밝은 앱 표면에서 본문과 파란 행동색의 위계가 분명하고 세 역할이 구별됩니다.
- 따뜻한 오렌지 흐름따뜻한 인상을 유지하면서 밝은 소개 면과 짙은 행동색이 명확히 나뉩니다.
- 생기 있는 그린 대비중간 명도의 초록 브랜드 면과 밝고 어두운 보색 역할이 서로 식별됩니다.
- 또렷한 레드 분할 대비어두운 청록 주조면에서도 정확한 레드 기준색이 행동색으로 선명하고 본문 대비가 유지됩니다.
- 균형 잡힌 퍼플 삼각짙은 주조면과 보라 기준색, 민트 강조색이 분리되어 브랜드 위계가 흐트러지지 않습니다.
- 차분한 핑크 포인트밝은 중립 표면에서 정확한 핑크 기준색이 제한된 행동색으로 선명합니다.
Color harmony
여섯 가지 배색 공식
Practical guides
적용 전에 읽을 가이드
처음 브랜드 색상을 고를 때 확인할 7가지
취향에서 출발해 목적, 사용 환경, 대비까지 좁혀 가는 선택 절차
신뢰감을 주는 브랜드 색상은 왜 파란색이 많을까
파란색의 장점과 한계, 청록·네이비·중성색으로 차별화하는 법
고급스러운 브랜드 컬러가 검정과 금색만은 아닌 이유
명도와 채도를 절제해 고급감을 만드는 여러 배색 방식
강조색이 촌스러워지는 6가지 실수
강조색의 면적, 반복, 상태색 충돌을 실제 사용 관점에서 점검하는 법
예쁜 색 조합을 읽기 쉬운 색 조합으로 만드는 법
WCAG 대비율과 텍스트 색상 선택을 비전문가도 이해하도록 설명