Toon Tone
한
ENEnglishESEspañol日日本語한한국어FRFrançaisDEDeutschRUРусскийPTPortuguês

브라우저에서 작동하는 인터랙티브 색상환

색상 조화 생성기와 인터랙티브 색상환

색상 조화 생성기로 하나의 기준색을 보색, 유사색, 삼각 조화, 분할 보색, 사각 조화 팔레트로 확장하세요. 색상환을 드래그하고 HSB를 조절하며 실제 화면 역할을 미리 본 다음, 아무 데이터도 업로드하지 않고 CSS를 복사하거나 라벨이 있는 PNG를 저장할 수 있습니다.

2026년 7월 29일 업데이트

생성기 열기Toon Tone 플레이

색상 조화 생성기

이 색상 조화 생성기는 무엇을 하나요?

이 색상 조화 생성기는 기준 색조를 360도 색상환에 놓고 명시적인 각도 차이로 관련 색조를 계산합니다. 보색은 180도, 유사색은 −40도와 +40도, 삼각 조화는 120도 간격, 분할 보색은 150도와 210도, 사각 조화는 90도 간격을 사용합니다. 첫 비교가 색조 구조만 보여 주도록 색상 조화 생성기는 채도와 밝기를 유지합니다. 이후 각 HEX를 복사하고 CSS 변수를 내보내며 PNG를 저장하거나 첫 전경색과 배경색을 대비 검사기로 보낼 수 있습니다.

색상 조화 생성기

관계를 설명할 수 있는 팔레트

색상 조화 생성기는 이름 없는 견본만 반환하지 않고 규칙, 각도, 값, 의도한 역할을 함께 보여 줍니다.

  • 색상 조화 생성기

    색상환 기하 확인

    색상 조화 생성기의 모든 결과는 같은 색상환에 핀으로 표시됩니다. 180도, 120도, 90도와 분할 보색 간격이 눈에 보여 어떤 이유로 색들이 한 조화를 이루는지 설명할 수 있습니다.

  • 색상 조화 생성기

    실제 역할 미리 보기

    색상 조화 생성기는 결과를 툰 스타일 카드의 표면, 중심색, 강조색, 행동색에 배치합니다. 이는 빠른 위계 점검이며 생성된 모든 색을 수정 없이 쓸 수 있다는 보장은 아닙니다.

  • 색상 조화 생성기

    제작에 전달할 수 있는 값

    한 색, 색상 조화 생성기 팔레트 전체, CSS 사용자 정의 속성을 복사하세요. 라벨이 있는 PNG에는 규칙과 값이 남아 디자인 검토, 무드보드, 구현 인계에 활용할 수 있습니다.

브라우저 안에서 작동하는 색상환과 팔레트

색상 조화 생성기 사용

색상환을 드래그하거나 HEX와 HSB를 편집하면 색상 조화 생성기가 핀, 견본, 미리 보기 역할과 내보내기를 즉시 다시 계산합니다.

업로드 없음 · 로컬 계산

기준색과 150도, 210도의 대향 이웃색

조화 규칙

생성된 조화 팔레트

기준#E8335D
RGB
232, 51, 93
HSB
346°, 78%, 91%
ΔH
+0°
보조#33E863
RGB
51, 232, 99
HSB
136°, 78%, 91%
ΔH
+150°
강조#33B8E8
RGB
51, 184, 232
HSB
196°, 78%, 91%
ΔH
+210°
새 에피소드
툰 팔레트 현장 테스트

실제 그림이나 구성 요소에 옮기기 전에 위계가 명확한지 확인하세요.

:root {
  --harmony-1: #E8335D; /* 기준 · 346° */
  --harmony-2: #33E863; /* 보조 · 136° */
  --harmony-3: #33B8E8; /* 강조 · 196° */
}
이 색 조합 검사

첫 견본은 전경색, 마지막 견본은 배경색으로 보냅니다.

이 색 조합 검사

색상 조화 생성기

쓸 수 있는 조화를 만드는 순서

색상 조화 생성기 결과는 각 색에 의도한 역할을 주고 대비를 측정하며 실제 맥락에서 조금 조정할 때 가장 유용합니다.

색상 조화 생성기

1. 실제 기준색에서 시작하기

압축된 스크린샷을 눈으로 추정하지 말고 승인된 브랜드, 캐릭터, 인터페이스 HEX를 입력하세요. 색상 조화 생성기는 그 색조를 첫 핀으로 유지하고 나머지 색을 같은 기준에서 계산합니다.

색상 조화 생성기

2. 분위기보다 관계를 먼저 고르기

강한 분리는 보색, 가까운 연속성은 유사색, 균형 잡힌 세 색군은 삼각 조화, 절제된 긴장은 분할 보색, 넓은 체계는 사각 조화를 사용하세요. 색상 조화 생성기는 비교하는 동안 정확한 규칙을 표시합니다.

색상 조화 생성기

3. 역할을 배정한 뒤 값을 조절하기

한 색을 주도색으로 두고 나머지를 보조, 강조, 대조 역할로 사용하세요. 색상 조화 생성기에서 구조를 정한 다음 모든 견본에 같은 무게를 주지 말고 채도와 밝기를 바꿔 시각적 위계를 만듭니다.

색상 조화 생성기

4. 구현된 색 조합 측정하기

색상 조화 생성기에서 문자와 배경 후보를 대비 검사기로 보내세요. 색상환 각도만으로 읽기 쉬움이나 접근 가능한 의미가 정해지지 않으므로 기본, 호버, 포커스, 선택, 비활성 상태를 모두 점검합니다.

색상 조화 생성기

다섯 가지 색상환 조화 규칙 비교

색상 조화 생성기는 고정되고 재현 가능한 각도 차이를 사용합니다. 아래 표는 예술적 조정 전의 기하, 초기 색 수, 사용 시작점과 주의점을 보여 줍니다.

색상 조화 생성기 규칙, 색조 각도, 역할과 주의점
규칙색조 각도유용한 시작점주의점
보색0°, 180°중심 대상과 행동 또는 경고 강조의 분리채도가 같으면 거칠 수 있어 한쪽을 주도색으로 둠
유사색−40°, 0°, +40°차분한 장면, 겹친 표면, 관련 세부가까운 색조에는 더 큰 밝기 차이가 필요함
삼각 조화0°, 120°, 240°넓은 색조 범위를 가진 세 역할한두 색을 낮춰 명확한 중심을 만듦
분할 보색0°, 150°, 210°기준색과 직접적이지 않은 두 대향 강조색두 강조색이 넓은 면적을 차지하면 경쟁함
사각 조화0°, 90°, 180°, 270°큰 시스템, 팀, 차트, 여러 상태의 UI네 색을 강하게 쓰려면 명도 그룹이 필요함

색상 조화 생성기

내보내기 전 여섯 가지 점검

이 색상 조화 생성기 체크리스트로 보기 좋은 색상환 결과를 문서화되고 검사 가능한 팔레트로 바꾸세요.

  1. 기준 HEX가 오래된 스크린샷이 아니라 현재의 공식 자료에서 왔는지 확인합니다.
  2. 채도나 밝기를 바꾸기 전에 하나의 규칙을 고르고 색조 각도 차이를 기록합니다.
  3. 같은 면적으로 쓰지 말고 주도, 보조, 강조, 대조 역할을 배정합니다.
  4. 실제 문자와 배경, 중요한 구성 요소 경계를 대비 검사기로 측정합니다.
  5. 색만으로 중요한 의미를 전달하는 곳에 라벨, 모양, 패턴, 위치 단서를 더합니다.
  6. 색상 조화 생성기 CSS나 PNG를 내보내 실제 구성 요소나 그림에서 시험합니다.

색상 조화 생성기

계산 방법, 측정값과 한계

이 색상 조화 생성기는 재현 가능한 색상환 기하와 접근성 판단을 분리합니다. 명시적 각도를 사용하고 디지털 색조와 대비는 W3C 표준을 참조합니다.

  • 보색은 기준에서 정확히 180도, 삼각 조화는 120도, 사각 조화는 90도씩 이동합니다. 이는 2026년 7월 29일에 검토한 색상 조화 생성기 알고리즘의 직접 측정값입니다.
  • W3C CSS Color Module Level 4는 HSL 색조를 각도로 정의하고 색상환 정규화를 설명합니다. 색상 조화 생성기도 HSB 계산에서 0도부터 360도까지 같은 관례를 사용합니다.
  • WCAG 2.2 성공 기준 1.4.3은 일반 문자에 4.5:1, 큰 문자에 3:1을 요구합니다. 색조 간격만으로 적합성을 알 수 없으므로 색상 조화 생성기는 두 색 대비 검사기로 연결합니다.

W3C는 일반 문자 기준을 다음과 같이 명시합니다. The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

1차 표준 자료

색상 조화 생성기

다음 팔레트 작업으로 이동

색상 대비 검사기컬러 셰이드 생성기HSB 색상 선택기만화 팔레트 생성기이미지 색상 추출기색각 시뮬레이터HSB, HSL, HSV 차이블로그Toon Tone 플레이

색상 조화 생성기

색상 조화 생성기 질문

초보자에게 어떤 조화가 가장 좋은가요?

차분한 팔레트는 유사색, 분명한 강조는 보색부터 시작하세요. 색상 조화 생성기는 기준색을 고정하므로 둘을 전환하면 차이가 보입니다. 어느 쪽이든 한 색을 주도색으로 정하고 마지막 전경색과 배경색을 측정해야 합니다.

이 색상 조화 생성기는 HSL과 HSB 중 무엇을 쓰나요?

Toon Tone이 색조, 채도, 밝기를 사용하므로 색상 조화 생성기는 HSB를 계산하고 표시합니다. 색조는 여전히 360도 각도로 작동합니다. 브라우저와 디자인 도구로 전달할 수 있도록 각 HSB 결과를 HEX로도 변환합니다.

생성 팔레트가 접근 가능한 대비를 보장하나요?

아닙니다. 색상 조화 생성기는 색조 관계를 설명하지만 WCAG 대비는 특정 전경색과 배경색의 상대 휘도로 결정됩니다. 실제 글꼴과 상태를 측정하고 의미가 색에 의존하는 곳에는 비색상 단서를 추가하세요.

단색 모드가 없는 이유는 무엇인가요?

단색 작업은 다른 색조를 색상환에 놓지 않고 한 색조 주변의 채도와 밝기를 바꿉니다. 이 색상 조화 생성기는 단계 수, 툰 음영, 대비, CSS, PNG를 제공하는 전용 음영 도구로 안내합니다.

입력한 색이 업로드되거나 저장되나요?

아닙니다. 색상 조화 생성기는 현재 브라우저 탭에서 각도와 색 변환을 수행하며 복사와 PNG도 로컬로 처리합니다. 공유 URL에는 기준 HEX와 조화 이름이 들어가므로 공개해도 되는 값만 공유하세요.