베이스 색을 N개 회전 색으로 자동 생성. 보색/삼색조보다 세밀한 컬러 변형.
🎡 회전 결과 클릭 = HEX 복사
CSS 변수
컬러 사이클러 사용법
- 베이스 컬러를 선택합니다.
- 회전 단계 수(2~24)와 각도(10°~180°)를 조정합니다.
- 프리셋(보색·삼색조·12색 컬러휠 등)으로 빠르게 시작.
- 각 색을 클릭해 HEX 복사 또는 CSS 변수로 일괄 복사.
주요 기능
- HSL 색조(Hue) 회전 기반 (밝기·채도 유지)
- 2~24단계 자유 조정
- 6가지 프리셋 (보색·삼색조·사색·육색·12색 휠·5색 별)
- CSS 변수 + JSON 배열 export
- 클릭 한 번 복사
활용 예시
- 디자인 시스템 컬러 — 메인 색에서 강조·보조 컬러 도출
- 차트 색상 — 12색 컬러휠로 데이터 시각화
- 로고 변형 — 시즌별 컬러 변형
- 패션·인테리어 무드 — 색조 일관성 유지하면서 변화
- 그래픽 일러스트 — 캐릭터·아이콘 다양화
color-harmony와 어떻게 다른가요?
color-harmony는 표준 화성(보색·삼색조·테트라드 등)을 정해진 규칙으로 생성합니다. color-cycler는 회전 각도와 단계 수를 자유롭게 조정할 수 있어 5색·7색·12색 등 비표준 조합도 가능합니다. 컬러 휠 디자이너용 도구입니다.
자주 묻는 질문
왜 HSL을 쓰나요?
HSL의 색조(Hue) 회전이 직관적입니다. OKLCH도 가능하지만 본 도구는 단순성을 위해 HSL을 사용합니다.
14단계처럼 비표준도 되나요?
네, 2~24 자유 조정. 14단계로도 가능합니다.
각도를 180° 이상으로 못 늘리는 이유?
180° 이상은 보색 반대 방향으로 가서 같은 결과가 반복됩니다.
무료?
네, 완전 무료입니다.