컬러 휠
인터랙티브 컬러 휠 도구로 다양한 색상 조합을 탐색하세요. 디자이너, 아티스트, 색상 애호가 누구나 프로젝트에 완벽한 팔레트를 찾을 수 있습니다.
기본 색상
휠을 클릭하여 기본 색상을 선택하세요
#195DE6
80%
50%
색상 정보
#195DE6
색상220°
채도80%
명도50%
RGB25, 93, 230
생성된 팔레트
보색 — 선택한 모드에 따라 자동 생성된 조화로운 배색
#195DE6
#E6A219
기본
#195DE6
보색
#E6A219
CSS 변수
한 번 복사하여 스타일시트에 바로 적용하세요
:root {
--color-complementary-1: #195DE6;
--color-complementary-2: #E6A219;
}색채 이론 기초
컬러 휠 피커 사용 방법
컬러 휠로 배색 과정을 간단하고 효율적으로 만드세요. 기본 색상을 선택하면 AI가 나머지를 처리합니다.
1
단계 1: 기본 색상 선택
컬러 휠에서 직접 클릭하여 기본 색상을 선택하세요. 랜덤으로 새로운 아이디어를 탐색하거나 색상을 초기화할 수도 있습니다.
2
단계 2: 색상, 채도 및 명도 미세 조정
채도와 명도 슬라이더를 조정하여 톤을 정밀하게 조절하세요. 값을 수정하면 오른쪽 패널이 실시간으로 업데이트됩니다.
3
단계 3: 조화 모드 선택
보색, 삼색조, 사색조 등의 생성된 배색을 선택하세요. 선택한 색채 이론 모델에 따라 팔레트가 자동 업데이트됩니다.
4
단계 4: CSS 변수 즉시 복사
아래로 스크롤하여 프로덕션 준비된 CSS 변수를 복사하세요. 한 번 복사하여 스타일시트에 바로 붙여넣으세요.
실용적인 색상 디자인을 위한 강력한 기능
컬러 휠은 단순한 색상 선택을 넘어—실제 프로젝트에서 색채 이론을 효과적으로 적용할 수 있도록 돕습니다.
실시간 색상 정보
HEX, RGB, 색상, 채도, 명도 값을 즉시 확인하세요. 정밀도가 필요한 디자이너와 정확한 코드가 필요한 개발자에게 적합합니다.
다양한 조화 모드
보색, 분할 보색, 유사색, 단색, 삼색, 사색 등 확립된 색채 이론 원칙에 기반한 전문적인 배색을 생성합니다.
CSS 준비 출력
구조화된 CSS 변수를 즉시 내보내세요. 디자인 시스템이나 프론트엔드 프로젝트에서 시간을 절약하고 일관성을 유지하세요.
내장 색채 이론 참조
배색 조합이 효과적인 이유를 이해하세요. 각 조화 유형에 대한 명확한 설명이 포함되어 더 나은 시각적 의사 결정을 지원합니다.
자주 묻는 질문
컬러 휠은 색상 간의 관계를 시각화하고 색채 이론에 기반한 조화로운 색상 조합을 생성하는 데 도움을 줍니다.
HEX 값만 제공하는 단순 피커와 달리, 이 도구는 구조화된 조화 팔레트와 내보내기 가능한 CSS 변수를 생성합니다.
명도와 채도를 조정하여 대비를 최적화하고, 더 접근성 높은 인터페이스를 설계할 수 있습니다.
네. 모든 HEX, RGB 및 CSS 변수는 웹 및 제품 디자인 워크플로에 즉시 사용할 수 있는 형식입니다.