컬러 팔레트 생성

1. 페이지를 열면 5가지 색상 팔레트가 자동으로 생성됩니다. 마음에 들지 않으면 "새 팔레트 생성" 버튼을 클릭하거나 스페이스바를 눌러 새로운 조합을 만들어냅니다.
2. 마음에 드는 색상 칸을 클릭하면 HEX 코드(예: #df4324)가 클립보드에 자동으로 복사됩니다.
3. 복사된 HEX 코드를 CSS, Figma, Sketch, Adobe XD 등의 디자인 툴에 바로 붙여넣어 활용합니다.
4. 색상 조합이 마음에 들 때까지 계속 새로운 팔레트를 생성할 수 있습니다.

잘 어울리는 색 조합은 무작정 고른 게 아니라 색상환(HSL의 색조)에서 일정한 관계를 따릅니다. 이 팔레트는 그 원리로 자동 생성됩니다.

• 유사색: 색조가 가까운 색끼리 모으면 차분하고 통일감 있는 배색이 됩니다.
• 보색: 색상환 반대편 색을 강조색으로 쓰면 시선을 끕니다.
• 60-30-10: 주색 60%·보조색 30%·강조색 10% 비율이 안정적입니다.

브랜드 주색이 있다면 비슷한 색조를 골라 역할을 나누면 됩니다. 배색 규칙은 배색 기초 가이드에 정리했습니다.

이 도구는 다섯 색의 명도를 82% · 69% · 56% · 43% · 30%로 고정하고, 색조와 채도만 무작위로 뽑습니다. 같은 생성 방식으로 팔레트 10만 개를 만들어 각 색 위에 흰 글자와 검은 글자를 올렸을 때의 대비비(WCAG 기준)를 집계했습니다.

앞의 두 색은 어떤 팔레트가 나오든 검은 글자가 안전하고 흰 글자는 한 번도 기준을 넘지 못했습니다. 문제는 가운데입니다. 4번째 색은 흰 글자와 검은 글자가 통과할 확률이 반반이라, 명도 숫자만 보고 글자색을 정할 수 없습니다. 같은 명도 43%라도 노랑·연두 계열은 눈에 밝게, 파랑·보라 계열은 어둡게 보이기 때문입니다. 가장 어두운 5번째 색도 여덟 번에 한 번꼴로 흰 글자가 기준에 못 미칩니다.

팔레트의 양 끝 색을 배경과 글자로 짝지었을 때의 대비비는 1.80 ~ 12.28 범위였고, 4.5:1을 넘긴 경우는 52.8%, 7:1을 넘긴 경우는 26.5%였습니다. 마음에 드는 팔레트가 나오면 쓰려는 조합을 색상 대비 검사 도구에 넣어 확인하는 편이 빠릅니다.

색조를 고정하면 이런 단계가 됩니다 — 색조 11°, 채도 70%에 다섯 명도를 넣은 결과

실제 팔레트는 여기에 색조가 한 칸마다 18~40°씩 더 돌아가므로, 다섯 번째 색은 첫 색에서 색상환으로 72~160° 떨어진 색이 됩니다.

• 브랜드 색 시스템 구성: 브랜드 주색이 이미 정해져 있다면, 팔레트에서 비슷한 색조를 골라 배경색·보조색·강조색으로 역할을 분배하면 일관성 있는 색 시스템을 빠르게 구성할 수 있습니다.
• 명도 활용: 팔레트는 밝은 순서(명도 높음→낮음)로 배열됩니다. 가장 밝은 색은 배경, 중간 색은 UI 요소, 가장 어두운 색은 텍스트나 강조 버튼에 적용하면 자연스럽습니다.
• 웹 접근성 확인: WCAG 기준으로 배경과 텍스트의 명도 대비가 4.5:1 이상이어야 가독성이 보장됩니다. 팔레트를 선택한 뒤 별도 대비 체크 도구로 확인하는 것을 권장합니다.