색상 팔레트 생성기이란?
색상 팔레트 생성기는 색채 이론에 기반하여 조화로운 색상 조합을 만듭니다. 기본 색상과 조화 규칙을 선택하면 즉시 팔레트가 생성됩니다.
시작하는 방법은 세 가지입니다. 색상 선택기로 기준색을 고르거나 16진수 코드를 붙여넣고, 사진을 끌어다 놓아 주요 색을 추출하거나, ocean·sunset 같은 무드를 입력하세요. 그런 다음 조화 규칙을 고르면 색상환의 색채 이론 비율에 따라 나머지 색을 만들어 줍니다. 유지할 색은 잠그고 나머지는 섞고, 마음에 드는 색을 클릭하면 그 색을 중심으로 팔레트 전체가 다시 생성되며, 색맹 필터로 결과를 미리 볼 수 있습니다. 다섯 색을 CSS 커스텀 속성 블록, Tailwind 설정, 디자인 시스템용 JSON 파일로 내보내거나, 스와치를 PNG 또는 SVG 이미지로 저장해 브리프나 소셜에 공유하세요.
사용 방법
- 기준색으로 시작하거나, 사진을 끌어다 놓아 색을 추출하거나, ocean·sunset 같은 무드를 입력하세요
- 조화 규칙을 선택하세요: 보색, 유사색, 삼색, 분할보색, 테트라딕 또는 단색
- 각 스와치를 HEX·RGB·HSL 중 원하는 형식으로 복사하고, 대비 격자에서 가독성 좋은 짝을 확인한 뒤 팔레트를 CSS, Tailwind 설정, JSON 또는 PNG·SVG 스와치 이미지로 내보내세요
사용 시기
- 클라이언트가 이미 승인한 메인 컬러를 기준으로 브랜드 팔레트 전체를 만들 때.
- 차트나 대시보드에 사용할 가독성 좋은 보조 색을 고를 때.
- 프레젠테이션이나 SNS용 비주얼을 만들기 전, 여러 배색을 빠르게 시도해 볼 때.
결과
기본 색상 #3498DB의 삼색 조화: #3498DB, #976CD6, #DB3498.
자주 묻는 질문
- 보색, 유사색, 삼색조의 차이는 무엇인가요?
- 보색은 베이스와 색상환에서 180° 반대편 색을 짝지어 가장 강한 대비를 만듭니다. 유사색은 30° 이내로 묶어 안정적인 느낌을 줍니다. 삼색조는 120°씩 떨어진 세 색을 써서 강하면서도 균형 잡힌 대비를 만듭니다.
- 마음에 드는 색만 남기고 나머지를 다시 생성할 수 있나요?
- 가능합니다. 유지하고 싶은 색 칸에서 잠금 버튼을 누른 뒤 조화 방식이나 베이스 색을 바꾸거나 셔플을 누르세요. 잠긴 색은 그대로 두고, 나머지 색이 주변에서 다시 계산됩니다.
- 내보내기 형식은 어떤 것을 골라야 하나요?
- CSS는 --color-1 같은 커스텀 프로퍼티를 주고, Tailwind 옵션은 설정에 바로 넣을 수 있는 theme.extend.colors 블록을 만들며, JSON은 디자인 토큰 도구나 스크립트용 구조화 객체입니다. 팔레트를 이미지로 공유하려면 — 브리프, 슬라이드, 소셜 게시물 등 — 비트맵은 PNG, 선명한 벡터 스와치는 SVG를 고르세요.
- 이 팔레트는 WCAG 명암 기준을 통과하나요?
- 내장된 대비 격자가 모든 짝을 WCAG 2.x 기준(AAA 7:1, AA 4.5:1, AA Large 3:1)으로 채점하고 실패한 조합은 로즈색으로 표시합니다. 본문이나 버튼에 적용하기 전에 격자에서 짝을 골라 쓰세요. 조화 규칙은 시각적 균형이 목적이지 명암비를 보장하지 않습니다.
- 제 색상 데이터는 어디로 가나요?
- 어디로도 가지 않습니다. 모든 색 계산은 페이지 안에서 이뤄지고, 끌어다 놓은 사진은 색을 추출하기 위해 기기에서 읽힐 뿐 어디로도 전송되지 않습니다. 기준색, 배색, 내보낸 파일 모두 기기에 남으므로 공개 전 브랜드 배색도 내 클립보드만큼 비공개로 유지됩니다.