브랜드 색 하나로 시작하세요
색을 여러 개 고르는 것보다 기준 색 하나를 정하고 명도 단계를 만드는 편이 일관성 있는 결과를 냅니다. 50(가장 밝음)부터 900(가장 어두움)까지의 스케일이 디자인 시스템의 표준 방식입니다.
- 50~100 — 배경, 옅은 강조 영역
- 500~600 — 버튼, 링크 등 주 색상
- 700~900 — 진한 텍스트, 눌린 상태
명암비를 반드시 확인하세요
예쁜 색이 읽히는 색은 아닙니다. WCAG 기준은,
- AA (본문) — 4.5:1 이상
- AA (큰 글씨 18pt+) — 3:1 이상
- AAA — 7:1 이상
브랜드 색을 그대로 본문 글씨에 쓰면 미달인 경우가 많습니다. 그럴 때는 명도 단계에서 더 어두운 단계(700~800)를 글씨용으로 쓰세요.
배색 규칙
- 보색 — 색상환 반대편. 대비가 강해 강조에 좋지만 넓게 쓰면 피로합니다.
- 유사색 — 양옆 30°. 차분하고 안정적입니다.
- 삼색조 — 120°씩. 활기차지만 균형 잡기가 어렵습니다.
- 분할 보색 — 보색의 양옆. 보색보다 부드럽습니다.
실무에서는 기준 색 + 중성 회색 + 의미색(성공·경고·오류) 조합이 가장 안전합니다. 배색 규칙은 강조 하나를 고를 때 참고하세요.
색만으로 뜻을 전하지 마세요
색맹·색약인 사람도 알 수 있어야 합니다. 상승·하락을 빨강·파랑으로만 표시하지 말고 +/− 부호를 함께 쓰고, 필수 입력란은 빨간 테두리만이 아니라 글자로도 표시하세요.
이미지에서 색을 뽑으려면
로고나 사진에서 대표 색을 뽑고 싶다면 이미지 색상 추출을 쓰세요. 거기서 뽑은 HEX를 여기에 넣으면 명도 단계와 배색이 나옵니다.