사용법
- 페이지를 열면 5가지 색상 팔레트가 자동으로 생성됩니다. 마음에 들지 않으면 "새 팔레트 생성" 버튼을 클릭하거나 스페이스바를 눌러 새로운 조합을 만들어냅니다.
- 마음에 드는 색상 칸을 클릭하면 HEX 코드(예: #df4324)가 클립보드에 자동으로 복사됩니다.
- 복사된 HEX 코드를 CSS, Figma, Sketch, Adobe XD 등의 디자인 툴에 바로 붙여넣어 활용합니다.
- 색상 조합이 마음에 들 때까지 계속 새로운 팔레트를 생성할 수 있습니다.
조화로운 배색은 색조 관계에서
잘 어울리는 색 조합은 무작정 고른 게 아니라 색상환(HSL의 색조)에서 일정한 관계를 따릅니다. 이 팔레트는 그 원리로 자동 생성됩니다.
- 유사색: 색조가 가까운 색끼리 모으면 차분하고 통일감 있는 배색이 됩니다.
- 보색: 색상환 반대편 색을 강조색으로 쓰면 시선을 끕니다.
- 60-30-10: 주색 60%·보조색 30%·강조색 10% 비율이 안정적입니다.
브랜드 주색이 있다면 비슷한 색조를 골라 역할을 나누면 됩니다. 배색 규칙은 배색 기초 가이드에 정리했습니다.
활용 팁
- 브랜드 색 시스템 구성: 브랜드 주색이 이미 정해져 있다면, 팔레트에서 비슷한 색조를 골라 배경색·보조색·강조색으로 역할을 분배하면 일관성 있는 색 시스템을 빠르게 구성할 수 있습니다.
- 명도 활용: 팔레트는 밝은 순서(명도 높음→낮음)로 배열됩니다. 가장 밝은 색은 배경, 중간 색은 UI 요소, 가장 어두운 색은 텍스트나 강조 버튼에 적용하면 자연스럽습니다.
- 웹 접근성 확인: WCAG 기준으로 배경과 텍스트의 명도 대비가 4.5:1 이상이어야 가독성이 보장됩니다. 팔레트를 선택한 뒤 별도 대비 체크 도구로 확인하는 것을 권장합니다.
자주 묻는 질문
Q. 팔레트 생성 알고리즘은 어떻게 되나요?
HSL(색조·채도·명도) 모델 기반으로 무작위 색조를 시작점으로 삼아 약 18~40도씩 회전하며 5가지 색을 만듭니다. 유사색 배열 방식이라 서로 조화로운 조합이 나올 확률이 높습니다.
Q. HEX 코드를 복사하면 '#' 기호가 포함되나요?
네, #df4324처럼 샵(#) 기호를 포함해 복사됩니다. CSS에 바로 붙여넣을 수 있습니다.
Q. 생성된 팔레트를 저장하려면 어떻게 하나요?
현재 별도 저장 기능은 없습니다. 마음에 드는 HEX 코드를 복사해 메모장이나 디자인 툴에 직접 보관하세요. 필요한 색상 코드를 모두 복사해두면 나중에 재현이 가능합니다.
Q. 사진 속 색으로 팔레트를 만들 수 있나요?
이 도구는 무작위로 조화로운 팔레트를 생성합니다. 특정 사진의 분위기에 맞춘 색이 필요하면 이미지에서 색 추출 도구로 사진의 주요 색을 뽑은 뒤, 그 HEX를 기준 삼아 배색을 구성하면 됩니다.
Q. 만든 색이 접근성 기준에 맞나요?
팔레트 자체는 미적 조화 위주로 생성되므로 글자·배경 대비는 별도로 확인해야 합니다. WCAG 기준 본문은 4.5:1 이상 대비가 필요하니, 색을 고른 뒤 색상 대비 검사 도구로 점검하세요.
함께 쓰면 좋은 도구