색상 팔레트 생성기
스페이스바를 눌러 무한한 컬러 조합을 생성하세요. 마음에 드는 색상을 고정하고 감각적인 배색을 탐색할 수 있습니다.
#2FF4EA
#FCD3CE
#00F7DA
#71508B
#6D4653
색상 팔레트 생성기란?
색채 이론에 기반한 5가지 색상의 조화로운 조합을 브라우저에서 즉시 산출하여 웹 및 UI/UX 디자인에 직관적인 영감을 제공합니다.
사용 방법
- 생성: 키보드
스페이스바(Space)를 누르거나 '팔레트 생성' 버튼을 클릭합니다. - 고정(잠금): 마음에 드는 색상 컬럼의 자물쇠 아이콘을 클릭하여 고정합니다.
- 복사: HEX 코드를 클릭하면 클립보드에 즉시 복사됩니다.
지식 베이스 & FAQ
자주 묻는 질문 (FAQ)
자주 묻는 질문과 기술적 문제, 웹 표준에 대한 명확한 답변과 솔루션입니다.
웹 및 UI 디자인에서 60-30-10 배색 법칙이란 무엇인가요?expand_more
60-30-10 법칙은 이상적인 시각적 균형을 만드는 황금 배색 비율입니다:
- 60% 주조색 (Dominant Color): 레이아웃의 기본 구조를 이루는 바탕색 (화이트, 슬레이트, 다크 배경 등).
- 30% 보조색 (Secondary Color): 카드, 사이드바, 헤더 영역에 깊이감을 더하는 색상.
- 10% 강조색 (Accent Color): CTA 구매 버튼, 핵심 링크, 활성 알림 배지에 집중적으로 사용하는 고대비 포인트 컬러.
생성한 컬러 팔레트가 웹 접근성 표준을 준수하는지 확인하려면?expand_more
디지털 접근성(WCAG 2.1 AA)을 준수하기 위해:
- 텍스트와 배경의 명도 대비가 최소 4.5:1 이상인지 확인해야 합니다.
- 순수 노란색(
#FFFF00)이나 라임색 배경 위에 흰색 글자를 배치하면 안 됩니다(대비율 약 1.2:1로 판독 불가). - 배포 전 당사의 WCAG 명도 대비 검사기를 통해 각 조합을 검증하세요.
팔레트를 Tailwind CSS나 CSS 변수로 바로 내보내려면 어떻게 하나요?expand_more
생성된 색상 HEX 코드를 전역 스타일시트의 CSS 변수로 등록할 수 있습니다:
:root {
--color-primary: #4F46E5;
--color-secondary: #06B6D4;
--color-accent: #F43F5E;
--color-neutral: #1E293B;
--color-surface: #F8FAFC;
}tailwind.config.js의 theme.extend.colors에 정의하여 bg-primary 등의 클래스로 사용할 수 있습니다.따뜻한 색(난색)과 차가운 색(한색) 팔레트의 심리적 차이는 무엇인가요?expand_more
난색 계열(빨강, 주황, 앰버)은 에너지, 즉각적인 행동, 식욕을 자극하여 배달 앱, 이커머스 할인에 적합합니다. 한색 계열(파랑, 청록, 네이비, 딥그린)은 신뢰, 안정감, 지적 전문성을 전달하여 핀테크, 클라우드, 엔터프라이즈 SaaS에 주로 채택됩니다.
체계적인 디자인 시스템에는 보통 몇 가지 색상이 필요한가요?expand_more
확장 가능한 디자인 시스템은 보통 다음 구성을 갖춥니다:
- 1개의 대표 브랜드 컬러 (50~950 톤 스케일).
- 1개의 보조 컬러.
- 1개의 시각적 강조 컬러.
- 1개의 뉴트럴 그레이 스케일 (본문 텍스트, 경계선, 표면용 8~10단계).
- 4개의 시맨틱 상태 컬러: 성공(초록), 경고(노랑), 오류(빨강), 정보(파랑).