기준 색상, 배색 방식
complementary palette
- 팔레트
- base: #2563EB +180deg: #EBAD25 +210deg: #C6EB25 +30deg: #4A25EB
- 기준 색상
- #2563EB
- 조화 방식
- complementary
- 권장 텍스트
- #FFFFFF
계산 방법과 기준
HSL 색상환에서 hue 각도를 이동하면 보색, 유사색, 삼각 배색 같은 기본 팔레트 규칙을 만들 수 있습니다. 생성된 색상은 디자인 시안의 출발점으로 활용하세요.
계산식과 처리 기준
- HEX -> HSL
- 보색 = hue + 180deg
- 유사색 = hue ± 30deg
- 삼각 배색 = hue + 120deg, hue + 240deg
계산 예시
#2563EB의 보색 팔레트는?
- 기준 색상
- “#2563EB”
- 배색 방식
- Complementary
결과complementary palette
HSL 색상환 기준으로 조화 팔레트를 생성했습니다.
#10B981로 삼각 배색을 만들면?
- 기준 색상
- “#10B981”
- 배색 방식
- Triadic
결과triadic palette
HSL 색상환 기준으로 조화 팔레트를 생성했습니다.
팔레트 조화 규칙
| 방식 | 색상환 기준 | 사용처 |
|---|---|---|
| Complementary | 0deg + 180deg | 강한 CTA, 대비 배색 |
| Analogous | 기준 hue 주변 ±30deg | 편안한 브랜드 톤 |
| Triadic | 120deg 간격 | 다채로운 섹션 구분 |
| Monochrome | 같은 hue, 다른 lightness | 디자인 토큰/상태 색상 |
주의사항
- 색상환 규칙은 출발점일 뿐입니다. 본문 글자와 배경은 명도 대비 4.5:1 이상이 되도록 조정하세요.
조화로운 색 조합을 어떻게 찾나요?
기준 색을 중심으로 보색·유사색 등 규칙에 맞는 팔레트를 추천합니다.
- 보색은 강한 대비, 유사색은 안정적인 분위기에 적합합니다.
- 삼각 배색은 색상 수가 많아 강조색과 배경색 역할을 나누는 것이 좋습니다.
- 단색 팔레트는 같은 hue에서 lightness만 바꿔 UI 토큰화에 적합합니다.
계산 결과는 입력값과 공개된 기준을 바탕으로 한 참고용 추정치이며, 세무·법률·의료 판단을 대신하지 않습니다. 기준은 2026.09.27 검토 시점입니다. 면책 고지
계산 뒤에 있는 원리