색상 팔레트 생성기
아름다운 5색 조화 팔레트를 생성하고, 색상을 잠그고, CSS 변수를 내보내세요.
랜덤 컬러 팔레트 생성기: 아름다운 5색 스킴을 즉시 만들기
모던한 웹 애플리케이션 개발, 스타트업 브랜딩, SNS 그래픽 제작, 게임 UI 리소스 디자인 등 어떤 작업이든 균형 잡히고 조화로운 컬러 팔레트는 필수입니다. 우리의 랜덤 컬러 팔레트 생성기는 보색, 트라이어드, 아날로그, 모노크로매틱, 사이버펑크 네온 등 수학적 색채 이론 모델을 기반으로 미려한 5색 스킴을 만들어 냅니다.
Spacebar 같은 간단한 키보드 단축키로 매분 수백 가지 새로운 색 조합을 탐색하고, 마음에 드는 스와치를 잠그고, 명도와 채도를 세밀하게 조정한 뒤 깔끔한 CSS 변수, HEX, RGB, Tailwind 토큰으로 바로 내보낼 수 있습니다.
스페이스바 재생성 & 잠금
스페이스바를 눌러 새 팔레트를 생성하세요. 스와치의 자물쇠 아이콘을 클릭하면 고정된 채 주변에 어울리는 보색들을 굴릴 수 있습니다.
수학적 하모니
360° HSL 색상환 위에서 보정된 아날로그, 트라이어드, 보색, 분할 보색, 파스텔, 네온 팔레트를 전환해 사용하세요.
원클릭 CSS & Tailwind
전체 팔레트를 루트 CSS 커스텀 프로퍼티, Tailwind 테마 확장, HEX 배열 또는 JSON 정의로 한 번의 클릭으로 복사하세요.
명도 대비 & 접근성
시각적 명도 밸런스로 고대비 전경 텍스트와 버튼·웹 헤더에 적합한 WCAG AA 준수 색상 조합을 보장합니다.
🌈웹 & 그래픽 디자인을 위한 색상 하모니 모드 이해하기
| 하모니 규칙 | 색상환 공식 | 시각적 무드 | 추천 용도 |
|---|---|---|---|
| 아날로그 | 인접 색상 (±30°) | 차분하고 통일감 있는 평온함 | 자연 브랜드, 웰니스 앱, 그라디언트 |
| 보색 | 반대편 색상 (180°) | 고대비, 생동감, 강렬함 | 행동 유도 버튼, 스포츠 브랜딩, 배지 |
| 트라이어드 | 정삼각형 (120°) | 역동적, 장난기, 균형 | 게임 웹사이트, SaaS 랜딩 페이지, 인포그래픽 |
| 모노크로매틱 | 단일 색상, 명도/채도 변화 | 미니멀, 세련됨, 프로페셔널 | 개발자 도구, 금융 포털, 깔끔한 UI 테마 |
| 사이버펑크 / 네온 | 고채도 + 어두운 앵커 | 미래적, 일렉트릭, 강렬한 개성 | e스포츠, 크립토 프로젝트, 다크 모드 대시보드 |
🚀4단계로 만드는 프로 디자인 팔레트
높은 대비가 필요한지 절제된 미니멀리즘이 필요한지에 따라 원하는 색상 프리셋(트라이어드, 아날로그, 랜덤 등)을 선택하세요.
즉시 새로운 조합을 생성하세요. 롤 때마다 5개 팔레트 슬롯 전체의 조화로운 명도·채도 비율이 다시 계산됩니다.
마음에 드는 메인 브랜드 컬러의 자물쇠 아이콘을 클릭하세요. 스페이스바를 계속 누르면 그에 어울리는 액센트·배경 색상이 주변에 생성됩니다.
스와치를 클릭하면 HEX 코드가 복사되고, CSS 내보내기를 사용하면 스타일시트 변수 전체를 Figma나 코드 에디터로 바로 가져올 수 있습니다.
❓자주 묻는 질문
컬러 하모니 생성기는 보색을 어떻게 계산하나요?▾
생성기는 표준 RGB 값을 원통형 HSL(색조, 채도, 명도) 색 공간으로 변환합니다. 고전적인 색채 이론 공식에 따라 360° 색상환 위에 각도를 균등하게 배치하고(예: 보색 180°, 트라이어드 120°), 탁하고 판독하기 어려운 조합을 피하기 위해 명도 비율을 동적으로 조절합니다.
새 색상을 생성하는 동안 특정 색상을 잠글 수 있나요?▾
네! 색상 카드의 자물쇠 아이콘을 클릭하세요. 잠긴 색상은 그 자리에 고정되고, 스페이스바나 생성 버튼을 누르면 잠기지 않은 나머지 슬롯만 무작위로 변경되어 최적의 보색 음영을 찾습니다.
컬러 팔레트를 CSS나 Tailwind로 내보내려면 어떻게 하나요?▾
"CSS 내보내기" 버튼을 클릭하면 깔끔한 CSS 변수(:root { --color-1: #hex; ... })가 클립보드에 복사됩니다. 프로젝트 스타일시트나 전역 CSS에 바로 붙여넣거나 tailwind.config.js의 테마 컬러 확장 안에 매핑할 수 있습니다.
이 팔레트들은 웹 접근성(WCAG) 가이드라인에 부합하나요?▾
하모니 생성기는 각 스와치의 상대 휘도에 따라 대비 텍스트 라벨(검정 또는 흰색)을 자동으로 조정합니다. 웹 인터페이스에 색상을 적용할 때는 WCAG AA 요건을 충족하도록 본문 텍스트가 배경 요소와 최소 4.5:1의 명도 대비를 확보하도록 항상 확인하세요.
생성된 컬러 팔레트를 상업적 브랜딩과 웹사이트에 사용할 수 있나요?▾
네, 100% 가능합니다. 생성된 모든 컬러 팔레트, HEX 코드, CSS 정의는 퍼블릭 도메인으로, 개인·상업·클라이언트 프로젝트 어디에든 저작권 제한이나 출처 표기 없이 완전 무료로 사용할 수 있습니다.
HEX, RGB, HSL 색상 형식의 차이는 무엇인가요?▾
HEX(#RRGGBB)는 HTML/CSS 웹 디자인에서 가장 널리 쓰이는 16진수 표현입니다. RGB는 빨강·초록·파랑 빛 채널 값을 0~255로 지정합니다. HSL은 색을 색조(색상환 기준 0~360°), 채도(0~100% 순도), 명도(0~100% 밝기)로 표현해 조화로운 변형을 만들기 직관적입니다.