사용 방법
기준 색과 조합 방식을 고르면 색상환에서 색상을 돌리거나 명도를 바꿔 어울리는 팔레트를 만들어 줘요. 색 견본을 누르면 코드가 복사되고, 전체를 CSS 변수로 한 번에 복사해 스타일시트에 붙여 넣을 수도 있어요.
보색 = 색상 + 180° · 3색 조화 = 색상 + 120°와 + 240°
색 조합 방식
- 보색: 서로 반대되는 색이라 대비가 강해서 강조 버튼에 좋아요.
- 유사색: 색상환에서 이웃한 색이라 차분하고 자연스러운 디자인에 좋아요.
- 3색·4색 조화: 같은 간격으로 놓인 3개나 4개 색상으로 생기 있고 균형 잡힌 팔레트가 돼요.
- 분할 보색: 보색 양옆의 두 색이에요. 대비는 살리면서 덜 자극적이에요.
- 단색 조화, 밝은 톤·어두운 톤: 한 색상을 여러 명도 단계로 나눠서 UI 상태 표시에 딱 좋아요.
활용 팁
- 한 색은 메인 색, 한 색은 포인트 색으로 쓰고 나머지는 조금만 쓰세요.
- 게시하기 전에 글자·배경 조합을 명도 대비 검사기로 확인하세요.
- 모든 계산은 브라우저 안에서 하고 아무것도 저장하지 않아요.
계산 기준과 출처
- 색 조합은 CSS Color Module Level 4에 정의된 HSL 색상환으로 계산
최종 검토 2026년 10월 7일
자주 묻는 질문
색 하나로 팔레트를 만들려면?
기준 색을 입력하고 조합 방식을 고르세요. 색상환에서 색상을 돌리거나 명도를 바꿔 어울리는 색을 만들어 줘요.
웹사이트에는 어떤 조합이 좋은가요?
유사색이나 단색 조화는 차분하고 통일감이 있어요. 버튼과 링크에는 보색 하나를 포인트로 더하세요.
밝은 톤과 어두운 톤은 뭔가요?
밝은 톤은 색을 더 밝게, 어두운 톤은 더 어둡게 만든 거예요. 마우스 오버 상태, 테두리, 배경에 쓰기 좋아요.
팔레트를 내보낼 수 있나요?
네. CSS 변수 묶음을 복사하거나, 색 견본을 눌러 HEX 코드 하나만 복사할 수 있어요.
랜덤 색 조합도 추천해 주나요?
"랜덤 기준 색"을 누르면 새로운 색에서 시작하고, 조합 방식을 바꿔 가며 둘러볼 수 있어요.