색상 팔레트 생성기 - 랜덤 및 조화 팔레트
5색 팔레트 랜덤 생성. 색상 이론 기반 조합 5종, 잠금·섞기 기능, CSS·Tailwind 코드 바로 복사.
어울리는 색 조합 찾기
새 프로젝트 시작할 때 브랜드 컬러는 정해져 있는데, 보조 색이나 포인트 색을 뭘로 할지 막막한 경우 많죠. 색상환이랑 보색 같은 걸 공부해가며 하나하나 조합해보기도 애매하고요.
여기선 색상 이론 기반으로 5색 팔레트를 자동으로 만들어줘요. 유사색(인접한 색조), 보색(반대 색조), 삼각(3개 균등 배치), 분할 보색, 단색(밝기만 다르게) 이렇게 5가지 조화 모드가 있어서 디자인 톤에 맞춰서 고르면 됩니다. 마음에 드는 색은 잠금하고 나머지만 스페이스바로 계속 섞어볼 수도 있어요.
팔레트 생성하는 법
- 조화 모드 선택 - 유사색 / 보색 / 삼각 / 분할 보색 / 단색 중에.
- 생성 - 스페이스바를 누르거나 새로고침 버튼.
- 색상 잠금 - 마음에 드는 색 위의 자물쇠 아이콘 클릭.
- 복사 - 색상 칸이나 HEX 값 클릭하면 클립보드로.
- 내보내기 - 전체 팔레트를 CSS 변수나 Tailwind 설정으로 복사.
이 팔레트 생성기의 특징
- 조화 모드 5종 - 유사색, 보색, 삼각, 분할 보색, 단색.
- 잠그고 섞기 - 마음에 드는 색만 남기고 나머지만 재생성.
- 3가지 포맷 - HEX, RGB, HSL 동시에 표시.
- 코드 내보내기 - CSS 커스텀 속성 또는 Tailwind config로 바로 복사.
- 단축키 - 스페이스바로 팔레트 리롤(re-roll).
다른 팔레트 툴이랑 비교
| 기능 | FreeToolbox | Coolors | Adobe Color |
|---|---|---|---|
| 조화 모드 | 5가지 | 수동 + AI | 6가지 |
| 색상 잠금 | 예 | 예 | 아니요 |
| 코드 내보내기 | CSS + Tailwind | 다양 | 없음 |
| 가입 | 없음 | 무료 (제한) | Adobe 계정 |
| 광고 | 거의 없음 | 배너 있음 | 없음 |
자주 묻는 질문
새 팔레트를 어떻게 뽑아요?
스페이스바를 누르거나 상단의 조화 모드 버튼을 다시 클릭하면 팔레트가 새로 생성돼요. 이때 자물쇠로 잠가놓은 색은 그대로 유지되고 나머지만 바뀝니다.
색상 조화 모드가 뭐예요?
색상환에서 색을 뽑는 규칙이에요. 유사색은 색상환에서 바로 옆 색(차분한 느낌), 보색은 정반대 색(강한 대비), 삼각은 120도 간격으로 3색(균형), 분할 보색은 보색 양옆 2색을 같이 쓰기, 단색은 한 색상에서 밝기만 다르게 5단계. 브랜드 톤에 맞는 걸 고르시면 돼요.
마음에 드는 색을 고정할 수 있나요?
네, 색상 칸 위의 자물쇠 아이콘을 클릭하면 잠겨요. 그 상태로 스페이스바 누르면 잠긴 색은 그대로 있고 나머지 색만 새로 생성됩니다.
어떤 형식으로 복사돼요?
HEX(#ffffff), RGB(255, 255, 255), HSL(0°, 0%, 100%) 세 가지가 동시에 표시되고, 원하는 값을 클릭하면 그 형식 그대로 클립보드에 복사됩니다.
팔레트를 어떻게 내보내요?
팔레트 아래 내보내기 탭에서 CSS 커스텀 속성(:root { --color-1: ...; })이나 Tailwind CSS 설정 스니펫을 복사할 수 있어요. 복사 버튼 누르고 프로젝트에 붙여넣으면 끝.