배색 생성기 — HEX에서 보색·유사색·트라이어드 조화 팔레트 자동 생성 (무료·CSS/Tailwind)
선택 색상 미세 조정
팔레트 내보내기
:root {
--color-1: #7C3BED;
--color-2: #3BACED;
--color-3: #3B53ED;
--color-4: #D53BED;
--color-5: #ED3BAC;
}관련 외부 도구
일부 링크는 제휴 링크입니다.
관련 도구
색채 이론을 기반으로 기준 색에서 조화로운 배색(컬러 팔레트)을 자동 생성하는 무료 도구입니다. HEX 코드를 입력하거나, 색상 선택기로 고르거나, 랜덤 버튼을 누른 뒤 — 보색·유사색·트라이어드·테트라드·단색 등 스킴을 선택하면 균형 잡힌 팔레트가 즉시 완성됩니다. 마음에 드는 색은 잠그고 나머지만 재생성하거나, 명도·채도 슬라이더로 미세 조정하거나, HEX를 원클릭 복사하거나, 전체 팔레트를 CSS 변수·Tailwind config·JSON으로 내보낼 수 있습니다. 각 색상에는 흰색·검정 문자 중 어느 쪽이 더 읽기 쉬운지와 WCAG AA 대비 결과가 표시됩니다. 모든 처리는 브라우저에서 이루어지며 색상 데이터는 서버에 전송되지 않습니다.
사용 방법
- 기준 색상 입력란에 HEX 코드(예: #7C3AED)나 CSS 색상 이름(예: rebeccapurple)을 입력하거나, 색상 선택기를 사용하거나, 랜덤 버튼을 눌러 임의의 기준 색에서 시작하세요.
- 배색 스킴(보색·유사색·트라이어드·테트라드·분리보색·단색)을 선택하면 팔레트가 즉시 업데이트됩니다.
- 슬라이더로 색상 수(3–8)를 조정하세요.
- 잠금 아이콘을 클릭하면 해당 색이 고정됩니다. 재생성 버튼(또는 입력 필드 외에서 스페이스 바)을 누르면 잠금되지 않은 색만 새로 생성됩니다.
- 색 견본을 클릭해 선택한 뒤, 명도·채도 슬라이더로 미세 조정하세요. '전체 색상' 범위로 전환하면 팔레트 전체를 상대적으로 조정할 수 있습니다.
- 복사 아이콘으로 HEX를 복사하거나 '전체 HEX 복사'를 사용하세요. 내보내기 탭에서 형식을 선택해 복사하거나 다운로드하세요.
- '팔레트 URL 복사'로 현재 팔레트를 공유할 수 있습니다.
배색 스킴이란
배색 스킴(색채 조화)은 색상환에서의 위치 관계를 기반으로 어울리는 색의 조합 규칙입니다. 색상(Hue)의 각도 관계가 핵심이며, 명도·채도 변화로 풍부함을 더합니다.
보색
색상환에서 정반대(+180°)에 있는 두 색. 고대비·눈에 띔. 강조색으로 효과적.
분리 보색
기준색과 그 보색 양옆(+150°/+210°)의 세 색. 보색보다 부드럽고 균형 잡기 쉬움.
유사색
인접한 색상(±30°)으로 구성. 통일감 있고 차분한 느낌. 배경·자연스러운 톤에 적합.
트라이어드
색상환을 3등분(+120°/+240°)한 세 색. 균형 잡히고 생동감 있는 배색.
테트라드
90° 간격의 네 색(사각형). 풍부하고 다채롭지만 한난 균형에 주의 필요.
단색
단일 색상의 명도·채도 변화로 구성. 가장 안전한 스킴 — 항상 통일감 있고 실패가 적음.
팁: 고민된다면 유사색이나 단색부터 시작하세요 — 실패하기 가장 어렵습니다.
기능 소개
기준 색에서 생성·랜덤 생성
HEX·CSS 색상 이름·색상 선택기로 기준 색을 지정하면 스킴이 나머지를 생성합니다. 랜덤 버튼으로 완전히 새로운 출발점에서 시작할 수도 있습니다.
색상 잠금 후 나머지만 재생성
마음에 드는 색을 잠금 아이콘으로 고정하세요. 재생성(또는 스페이스 바)을 누르면 잠금되지 않은 슬롯만 섞여 — 좋은 색을 유지하면서 변형을 빠르게 탐색할 수 있습니다.
명도·채도 미세 조정
색 견본을 선택하고 명도·채도 슬라이더를 드래그하면 색조 조화를 유지한 채 정밀 조정이 가능합니다. '전체 색상' 모드로 팔레트 전체를 밝게/어둡게 이동할 수 있습니다.
HEX 원클릭 복사
색 견본의 복사 아이콘을 클릭하면 HEX가 클립보드에 즉시 복사됩니다. '전체 HEX 복사'로 팔레트 전체를 한 번에 가져오세요.
CSS 변수·Tailwind·JSON으로 내보내기
내보내기 탭에서 형식을 선택하세요. CSS 변수는 :root 블록(--color-1, --color-2…)을 생성합니다. Tailwind는 바로 붙여넣을 수 있는 theme.extend.colors 블록을 제공합니다. JSON은 단순 배열을 제공합니다. 색상 값은 항상 대문자 HEX이며 로케일 형식이 적용되지 않습니다.
대비 및 가독성 힌트
각 색 견본은 흰색·검정 문자 중 어느 쪽이 더 읽기 쉬운지, WCAG 대비율, AA 통과/불통 뱃지를 색상과 텍스트 두 가지 방식으로 표시합니다.
활용 예시
로고 HEX에서 브랜드 색상 정의
브랜드 주색 HEX를 붙여넣고 유사색 또는 보색 스킴을 선택하면 로고와 조화를 이루는 강조색·배경색·텍스트 색상 후보가 즉시 제시됩니다.
CSS / Tailwind에 바로 붙여넣기
CSS 변수(:root { --color-1: ... })나 Tailwind theme.extend.colors 블록을 내보내어 코드에 직접 붙여넣으세요 — 수동 변환 불필요.
색상 접근성 확인
각 색 견본의 가독성 힌트로 WCAG AA(4.5:1 대비)를 충족하는지 확인하세요. 빌드 전에 문제 색상을 발견하세요.
주의사항 및 팁
- 스킴은 조화로운 출발점을 제공하는 것이지 보장된 결과가 아닙니다. 최적의 팔레트는 항상 맥락·비율·구체적인 색조에 달려 있습니다.
- 대비는 안내 값입니다. WCAG 계산식은 정확하지만 실제 가독성은 글꼴 크기·굵기·주변 색에도 영향을 받습니다.
- 단색 팔레트는 극단적인 명도 값에서 채도가 잘 보이지 않을 수 있습니다. 기준 색의 채도를 적당히 높게 유지하면 좋습니다.
- 색상 데이터는 서버에 전송되지 않습니다. URL 공유는 사용자가 의도적으로 공유 URL을 복사한 경우에만 이루어집니다.
자주 묻는 질문
- HEX 코드(기준 색)에서 배색 팔레트를 만들 수 있나요?
- 네. 기준 색상 입력란에 HEX 코드(# 포함/미포함·대소문자 무관)나 CSS 색상 이름(예: rebeccapurple)을 입력하면 선택한 스킴으로 조화로운 팔레트가 즉시 생성됩니다.
- 보색·유사색·트라이어드 등 배색 스킴을 선택할 수 있나요?
- 네. 보색(+180°)·분리보색(+150°/+210°)·유사색(±30°)·트라이어드(+120°/+240°)·테트라드(+90° 간격)·단색(단일 색상 명도 변화) 6가지 중 선택할 수 있습니다.
- 마음에 드는 색을 남기고 나머지만 다시 생성할 수 있나요?
- 네. 색 견본의 잠금 아이콘을 클릭해 고정한 뒤 재생성 버튼(또는 스페이스 바)을 누르면 잠금되지 않은 색만 새로 생성됩니다.
- CSS 변수·Tailwind·JSON으로 내보낼 수 있나요?
- 네. 내보내기 탭에서 형식을 선택하면 CSS 변수(:root { --color-1: #...; })·Tailwind config(theme.extend.colors → palette: { 1: '#...', ... })·JSON({ "palette": ["#...", ...] }) 텍스트가 생성되어 복사하거나 다운로드할 수 있습니다.
- 색상을 몇 개까지 만들 수 있나요?
- 3~8개. 슬라이더로 선택하세요. 스킴의 기준 색상 수보다 많이 요청하면 명도 변화(tints/shades)로 추가 슬롯을 채웁니다.
- 각 색상에서 문자가 읽기 쉬운지 확인할 수 있나요?
- 네. 각 색 견본에 권장 문자 색상(흰색/검정)·WCAG 대비율·AA 통과/불통 레이블을 색상과 텍스트 두 가지 방식으로 표시합니다.
- 색상 데이터가 서버로 전송되나요?
- 아니요. 배색 생성·조정·대비 계산·내보내기 모두 브라우저 안에서 이루어집니다. 색상 데이터는 전송되거나 저장되지 않습니다. URL 공유는 사용자가 의도적으로 복사한 경우에만 이루어집니다.