이게 뭔가요?
기준 색 하나에서 색상환 규칙에 따른 배색을 만들고, 디자인 시스템에 쓸 **명도 단계(50~900)**를 생성합니다. 각 색의 대비비를 함께 표시해 접근성도 확인할 수 있습니다.
배색 규칙
| 규칙 | 각도 | 느낌 |
|---|---|---|
| 보색 | 180° | 강한 대비, 시선 집중 |
| 유사색 | ±30° | 편안한 조화 |
| 삼각 | 120°씩 | 활기찬 균형 |
| 사각 | 90°씩 | 풍부한 배색 |
| 분할 보색 | 150°, 210° | 부드러운 대비 |
| 단색조 | 명도만 | 통일감 |
대비비 읽는 법
각 색상 칸에 표시되는 대비비는 흰색·검은색 중 더 잘 읽히는 쪽과의 비율입니다.
- 4.5:1 이상 — 본문 텍스트 권장 (WCAG AA)
- 3:1 이상 — 큰 제목·굵은 글씨 권장
- 3:1 미만 — 텍스트 배경으로 부적합
주의할 점
- 모든 계산은 브라우저 안에서 이뤄집니다.
- 명도 단계는 색상·채도를 유지한 채 밝기만 조정한 값입니다. 실제 디자인 시스템에서는 색상별 미세 조정이 필요합니다. 특히 노랑 계열은 같은 밝기값이라도 훨씬 밝아 보입니다.
- 색상환 규칙은 출발점일 뿐입니다. 규칙대로 뽑은 색이 항상 예쁜 건 아닙니다.
실무에서 — 배색 규칙으로 뽑은 색을 그대로 쓰면 채도가 너무 높아 눈이 피로한 경우가 많다. 실무에서는 강조색만 채도를 살리고 나머지는 채도를 크게 낮춰 쓴다. 화면의 대부분은 회색에 가까운 색이고, 진짜 색은 버튼 하나에만 들어가는 식이다.