팔레트 생성기
색 하나를 고르면 보색·유사색·삼각 배색처럼 색상환 규칙에 따라 어울리는 색을 뽑아줍니다. 감으로 고르는 대신 규칙으로 고르면 조합이 크게 어긋나지 않습니다.
🎨 계산은 전부 브라우저 안에서 끝납니다. 저장도 전송도 없습니다.
유사색
색상환에서 이웃한 색입니다. 자연스럽고 편안해 배경과 본문처럼 넓은 면적에 어울립니다.
배색 비율 60:30:10
색을 고른 다음이 더 중요합니다. 넓은 배경에 60%, 보조 색에 30%, 강조에 10%로 쓰면 같은 색 조합이라도 훨씬 정돈돼 보입니다. 강조색을 30% 넘게 쓰면 강조가 아니게 됩니다.
이 도구로 할 수 있는 것
- 보색·유사색·삼각·사각 배색
- 단색 명도 변화
- 색마다 HEX 복사
- 팔레트 전체 CSS로 복사
자주 묻는 질문
Q. 보색과 유사색은 언제 쓰나요?
보색은 대비가 강해 버튼이나 강조 표시처럼 눈에 띄어야 하는 곳에, 유사색은 편안해서 배경이나 넓은 면적에 어울립니다. 보색을 넓은 면적에 반반 쓰면 눈이 쉽게 피로해집니다.
Q. 색을 고른 다음에는 무엇을 하나요?
비율을 정하세요. 넓은 배경 60%, 보조 30%, 강조 10% 정도로 쓰면 같은 조합도 훨씬 정돈돼 보입니다. 강조색이 30%를 넘으면 더 이상 강조가 아닙니다.
Q. 만든 팔레트를 코드로 가져갈 수 있나요?
네. CSS 변수 형태로 한 번에 복사할 수 있고, 색마다 눌러서 HEX만 따로 복사할 수도 있습니다.
다른 색상 도구
화면마다 색 표현이 조금씩 달라, 같은 값도 기기에 따라 다르게 보일 수 있습니다.