UI·제품 디자인
화면 전반에 일관된 primary, secondary, surface 색을 구성하세요.
무료 · 가입 불필요색채 이론 조화CSS · Tailwind · JSON브라우저에서 실행
여기서 팔레트를 만드는 이유
여섯 가지 조화 엔진
보색, 유사색, 삼원색, 사원색, 단색, 분할 보색 — 고전 색채 이론 기반.
잠그고 다듬기
마음에 드는 색을 잠그고 나머지를 재생성하며 스키마가 맞을 때까지 반복하세요.
개발 준비 완료 내보내기
CSS 변수, Tailwind 토큰, SCSS 맵 또는 JSON을 복사해 디자인 시스템에 바로 붙이세요.
WCAG 대비 검사
팔레트의 텍스트-배경 쌍을 검사해 읽기 쉽고 접근 가능한 UI를 만드세요.
즉시 피드백
스와치, UI 목업, 코드가 실시간 반영. 업로드·대기·계정 없음.
무료·무제한
개인·상업 프로젝트용 무제한 팔레트. 워터마크 없음.
컬러 팔레트 만드는 방법
- 1
기본 색 선택
컬러 피커나 HEX를 입력하세요. 모든 조화 계산의 기준이 됩니다.
- 2
조화 규칙 선택
보색, 유사색, 삼원색 등을 바꿔 분위기를 탐색하세요.
- 3
잠그고, 랜덤하고, 다듬기
지킬 색을 잠그고 재생성하거나 Space로 새 기본색을 골라 브랜드에 맞출 때까지 조정하세요.
- 4
스택으로 내보내기
HEX/RGB/HSL을 복사하거나 CSS, Tailwind, SCSS, JSON을 내보내 디자인과 개발에 쓰세요.
한 HEX에서 디자인 시스템 씨앗까지
디자이너와 개발자가 실제로 출시하는 조화 규칙, 대비 검사, 내보내기 형식.
01
왜 조화가 랜덤 스와치를 이깁니다
랜덤 색은 관계가 거의 없습니다. 조화 규칙은 색상환에 의도적으로 배치합니다 — 에너지는 반대, 차분함은 이웃, 생동감은 균등 간격 — 인터페이스가 의도적으로 보이게 합니다.
02
제품 UI의 보색 vs 유사색
보색은 CTA를 배경에서 돋보이게 합니다. 유사색은 대시보드와 긴 글에 맞습니다. 같은 기본색으로 규칙을 바꿔 분위기를 즉시 비교하세요.
03
모던 스택을 위한 내보내기 경로
모든 프레임워크용 CSS 변수. 설정의 Tailwind 맵. Sass 디자인 시스템의 SCSS 맵. 도구와 문서용 JSON. 한 팔레트, 모든 핸드오프.
04
접근성을 1급 기능으로
본문이 AA를 실패하면 예쁜 것만으로는 부족합니다. 피커가 열린 상태에서 대비를 확인하면 접근성 리뷰 후 비싼 재디자인을 줄입니다.
컬러 팔레트 생성기를 쓰는 사람들
브랜드 키트부터 제품 UI까지 — 균형 잡힌 스킴은 탄탄한 색채 이론에서 시작됩니다.
브랜드 아이덴티티
브랜드 가이드를 확정하기 전에 보색·단색 시스템을 탐색하세요.
프론트엔드 개발
CSS 변수나 Tailwind 토큰을 내보내 코드가 디자인을 따르게 하세요.
마케팅·소셜
광고, 덱, 랜딩 전반에 브랜드에 맞는 캠페인 팔레트를 만드세요.
데이터 시각화
더 명확한 차트를 위해 순차 단색 또는 범주 삼원색 세트를 고르세요.
색채 이론 학습
조화 규칙이 한 기본색을 전문 multi-swatch 스킴으로 바꾸는 방식을 보세요.
실제로 도움이 되는 팔레트 팁
“예쁜 스와치”와 쓸 수 있는 디자인 시스템을 가르는 작은 습관.
- 1
브랜드·제품 제약에서 시작
이미 primary HEX가 있으면 잠그고 주변을 생성하세요. 다섯 번째 랜덤 액센트를 만들지 마세요.
- 2
대비를 일찍 확인
AA를 통과 못하는 예쁜 쌍은 버튼과 본문을 망칩니다. 출시 전에 표면 위 텍스트를 테스트하세요.
- 3
역할은 적고 명확하게
색을 hue만이 아니라 역할(primary, accent, muted, danger)로 이름 지으세요.
- 4
한 번 내보내고 어디서나 재사용
CSS 변수나 Tailwind 토큰을 단일 진실 공급원에 두어 마케팅과 제품이 어긋나지 않게 하세요.
FAQ
자주 묻는 질문
컬러 팔레트 생성기란?
시작 색이나 규칙에서 조율된 색 세트를 만드는 도구입니다. 이 생성기는 UI, 브랜딩, 디자인 시스템을 위한 색채 이론 조화를 적용합니다.
지원되는 조화 규칙은?
보색, 유사색, 삼원색, 사원색(직사각형), 단색, 분할 보색 — 디자이너가 가장 많이 쓰는 여섯 가지.
마음에 드는 색을 잠글 수 있나요?
네. 스와치를 잠그고 잠금 해제된 색을 재생성하거나 기본색을 랜덤화하세요. 잠긴 색은 유지됩니다.
코드를 위해 어떻게 내보내나요?
내보내기로 CSS 커스텀 속성, Tailwind 맵, SCSS 맵 또는 JSON을 복사하세요. 스와치마다 HEX, RGB, HSL도 복사할 수 있습니다.
WCAG 대비란 무엇이고 왜 확인하나요?
WCAG는 접근성을 위해 텍스트와 배경의 최소 대비를 정의합니다. 검사기는 팔레트 쌍을 측정해 UI 텍스트가 읽히도록 합니다.
상업 프로젝트에도 무료인가요?
네. 무제한 팔레트, 계정·워터마크 없음. 생성 색과 내보내기 코드는 상업 사용이 가능합니다.
데이터가 브라우저를 떠나나요?
아니요. 색 연산, 대비, 클립보드 내보내기는 클라이언트에서 실행됩니다. 서버 업로드 없음.
팔레트당 색 개수는?
각 조화는 조율된 다섯 스와치를 반환합니다 — primary, 액센트, 서피스를 시스템에 과부하 없이 구성하기에 충분합니다.
색채 이론 기반 전문 팔레트
BosConvertPro 컬러 팔레트 생성기는 검증된 조화 규칙으로 한 기본색을 균형 잡힌 multi-swatch 스킴으로 바꿉니다. 디자이너와 개발자는 즐겨찾기를 잠그고, 대비를 검증하고, UI를 미리 보고, 프로덕션 토큰을 내보냅니다 — 브라우저에서, 무료, 가입 없이.
- 여섯 가지 색 조화 모드
- 다른 색 재생성 시 색 잠금
- WCAG 대비율 검사기
- CSS, Tailwind, SCSS, JSON 내보내기
- HEX, RGB, HSL 복사 형식
- 브라우저에서 무료 무제한 사용