색 팔레트 생성
기준 HEX로 유사·보색·삼원·단색 톤 5색 팔레트를 만듭니다.
조화 색 팔레트
값을 입력한 뒤 계산하기를 눌러주세요.
사용 방법
- 기준 HEX에 #으로 시작하는 여섯 자리 색을 넣습니다. 기본값은 #3b82f6입니다.
- 조화 방식에서 유사색, 보색, 삼원색, 단색 톤 중 고릅니다.
- 생성을 누르면 5색 스와치가 격자로 표시됩니다.
- HEX 목록 복사로 코드를 가져가 디자인 툴에 붙여 넣습니다.
- 텍스트 대비는 이 화면이 보장하지 않으니 WCAG 대비 검사로 따로 확인하세요. 초기화는 기본 색으로 되돌립니다.
핵심 개념
색 팔레트 생성은 브랜드 컬러, UI 포인트 색, 슬라이드 테마를 잡을 때 기준 HEX 하나로 5색을 뽑습니다. HSL 색상환에서 유사색은 인접 각도, 보색은 반대, 삼원색은 120도 간격, 단색 톤은 같은 색상(Hue)의 밝기만 바꿉니다. CMYK·알파(투명도)는 다루지 않습니다. 브랜드 메인 컬러 HEX 하나로 유사색·보색·삼원색·단색 톤 5색을 뽑아 UI·슬라이드 팔레트를 실험하는 도구입니다. UI 포인트 색을 고른 뒤 유사·보색·삼원·단색 5색을 뽑아 시안을 실험하는 팔레트 생성기입니다.
접근성(명도 대비)까지 맞춰 주지는 않습니다. 배경·본문 조합은 WCAG 색 대비 도구로 AA/AAA를 보세요. 결과는 디자인 참고용이며 서버로 색 값이 전송되지 않습니다. HSL 색상환 각도만 돌리므로 접근성 대비율은 계산하지 않습니다. 본문 색은 WCAG 대비 검사와 함께 보세요. 명도 대비는 계산하지 않으므로 본문·버튼에 쓰기 전에 WCAG 대비 검사로 AA를 확인하는 흐름이 안전합니다.
예시
기준 #3b82f6, 조화 방식 유사색으로 생성하면 파란 계열 다섯 칸이 나란히 나오고 HEX 목록을 복사할 수 있습니다. 보색으로 바꾸면 주황 쪽 대비 색이 섞입니다. 단색 톤은 같은 블루의 밝은·어두운 단계 5색입니다. 항상 5개입니다.#ef4444 보색은 청록 계열이 섞인 5색, 단색 톤은 같은 빨강의 밝기 단계입니다. HEX 목록 복사로 디자인 툴에 붙여 넣습니다.#22c55e 삼원색은 색상환을 120도로 나눈 세 방향이 5칸에 배치됩니다. HEX 목록 복사로 디자인 툴에 붙입니다.
자주 묻는 질문
색 팔레트가 WCAG 접근성 대비를 보장하나요?
아니요. 대비는 WCAG 대비 도구로 따로 확인하세요. 버튼·본문 조합은 대비 미달이 흔하니 팔레트만 믿고 쓰지 마세요. 연한 배경 위 연한 글자는 미달이 흔합니다.
CMYK 인쇄용 팔레트도 나오나요?
HEX/RGB 기반입니다. 인쇄 변환은 별도입니다. 인쇄 CMYK 변환은 별도 프로세스입니다. 인쇄용 CMYK는 별도 변환이 필요합니다.
투명도(알파) HEX도 쓰나요?
지원하지 않습니다. #RRGGBB만 사용합니다. 8자리 HEX 알파는 잘라 내거나 오류가 날 수 있습니다. 알파가 있는 HEX는 쓰지 마세요.
팔레트는 몇 개 색이 나오나요?
항상 5색입니다. 항상 다섯 칸입니다. 개수를 늘리는 옵션은 없습니다. 색 개수는 항상 다섯입니다.
기준 색이 서버로 전송되나요?
아니요. 브라우저에서만 계산합니다. 기준 색은 서버에 저장되지 않습니다. 기준 HEX는 저장되지 않습니다.
유사색·보색·삼원색 차이는 뭔가요?
유사색은 옆 색, 보색은 반대, 삼원색은 색상환을 셋으로 나눈 각도입니다. 단색은 명도만 바꿉니다. 유사색은 인접 Hue, 삼원색은 120도 간격입니다. 단색 톤은 Hue를 고정하고 밝기만 바꿉니다. 관련: WCAG 대비 · 색 변환
최종 검토일: 2026년 9월 4일