어떤 조화 유형이 생성되나요?

보색(+180°), 유사색(±30°), 삼원색(±120°), 분할 보색(±150°)입니다. 채도·명도는 기준색과 같습니다.

CSS 변수로 내보낼 수 있나요?

예. `:root` 커스텀 속성 블록을 복사하거나 스와치를 눌러 HEX를 복사할 수 있습니다.

브랜드 가이드를 대체하나요?

아니요. 색상환 탐구용 시작점일 뿐입니다. 역할명·대비·다크/라이트 변형은 별도로 검증하세요.

회색 기준색이면 스와치가 모두 같아 보이는데?

채도가 거의 0이면 색상환을 돌려도 색이 바뀌지 않습니다. 무채색은 모든 조화가 같은 HEX가 됩니다.

Utill.net

색상 팔레트 생성

조화 & 테마

기본 색상에서 보색, 유사색, 삼합색 등 조화로운 팔레트를 생성합니다. 디자인과 개발에 바로 활용하세요.

이 변환은 브라우저에서만 실행됩니다. 서버로 업로드하지 않습니다.

색상

16진

기준색#3b82f6
보색#f6af3b

불투명 색만 지원합니다(HEX / RGB / HSL). 알파는 없습니다. #rgb 단축형 또는 #rrggbb를 입력하세요.

기준색

#3b82f6

보색

#f6af3b

유사색

#3bdff6

#523bf6

삼원색

#f63b82

#82f63b

분할 보색

#f6523b

#dff63b

CSS 변수

:root {
  --color-base: #3b82f6;
  --color-complementary: #f6af3b;
  --color-analogous-1: #3bdff6;
  --color-analogous-2: #523bf6;
  --color-triadic-1: #f63b82;
  --color-triadic-2: #82f63b;
  --color-split-1: #f6523b;
  --color-split-2: #dff63b;
}

이 도구는 무엇인가요?

기준 HEX(#rgb 또는 #rrggbb)에서 HSL 색상환 회전으로 보색·유사색·삼원색·분할 보색 팔레트를 만듭니다. 스와치와 CSS 변수 블록을 바로 복사할 수 있습니다.

브랜드 가이드나 대비 검사기를 대체하지 않습니다. 실제 텍스트·배경 대비와 역할 의미는 배포 전에 따로 확인하세요.

자주 쓰는 경우

제품 프라이머리 HEX로 목업용 액센트 초안 잡기
프로토타입용 --color-* CSS 변수 내보내기
보색 vs 분할 보색을 리뷰 전에 빠르게 비교하기

사용 방법

색상 입력 또는 HEX로 기준색을 정합니다.
기준·보색·유사색·삼원색·분할 보색 그룹을 확인합니다.
스와치를 눌러 HEX를 복사하거나 CSS 변수 블록을 복사합니다.
프로덕션 전에 대비와 브랜드 적합성을 별도로 검증합니다.

예시

입력 / 설정	출력	메모
`#3b82f6`	보색 `#f6af3b`; 유사색 `#3bdff6`, `#523bf6`	샘플 기본 파랑
`#ff0000`	보색 `#00ffff`; 삼원색 `#00ff00`, `#0000ff`	순수 빨강 → 시안 보색
`#808080`	모든 조화 `#808080`	채도 0 — 색상환 회전 무효과

실무에서 흔한 실수

생성된 조화는 브랜드 스타일 가이드가 아닙니다. 역할명·사용 규칙은 사람이 정해야 합니다.
HSL 각도 간격은 지각적으로 균일하지 않습니다(OKLCH와 다름).
무채색 기준색은 모든 그룹이 같은 HEX로 붕괴합니다.

참고자료

최종 검토: 2026-07-27

자주 묻는 질문

어떤 조화 유형이 생성되나요?: 보색(+180°), 유사색(±30°), 삼원색(±120°), 분할 보색(±150°)입니다. 채도·명도는 기준색과 같습니다.
CSS 변수로 내보낼 수 있나요?: 예. `:root` 커스텀 속성 블록을 복사하거나 스와치를 눌러 HEX를 복사할 수 있습니다.
브랜드 가이드를 대체하나요?: 아니요. 색상환 탐구용 시작점일 뿐입니다. 역할명·대비·다크/라이트 변형은 별도로 검증하세요.
회색 기준색이면 스와치가 모두 같아 보이는데?: 채도가 거의 0이면 색상환을 돌려도 색이 바뀌지 않습니다. 무채색은 모든 조화가 같은 HEX가 됩니다.