색상 조화는 색상환에서 함께 작동하는 색상을 선택하기 위한 일련의 규칙입니다. 디자이너는 브랜드, UI 액센트, 마케팅 사이트 및 일러스트레이션에 이러한 관계를 사용합니다. 모든 이론 책을 외울 필요는 없습니다. 6가지 실용적인 하모니 유형은 대부분의 실제 작업을 다룹니다: 보색, 유사, 3음, 4음, 분할-상보, 단색. 이 가이드에서는 각 유형을 일반 언어로 설명하고, 언제 사용하는지, 브라우저에서 준비된 HEX/RGB/HSL 팔레트를 생성하는 방법을 설명합니다.
빠른 답변
보색 = 반대 색상(고대비). 유사성 = 인접한 색상(부드러움, 응집력). 삼원색 = 120도 떨어진 세 가지 색상(균형 잡힌 에너지) Tetradic = 직사각형에 네 가지 색상이 있습니다. 분할 상보형 = 베이스와 그 반대편의 두 이웃(장력이 적은 대조). 단색 = 하나의 색조, 다양한 밝기/채도(안전한 UI 스케일). 무료 색상 팔레트 생성기를 사용하여 이러한 색상을 생성하세요.
조화가 무작위 견본을 능가하는 이유
임의의 색상은 무드보드에서는 트렌디하게 보일 수 있지만 제품 UI에서는 흩어질 수 있습니다. Harmony는 하나의 기본 브랜드 색상과 휠에서 명확한 관계를 공유하는 액센트 등 예측 가능한 구조를 제공합니다. 이러한 구조는 호버 상태, 차트 및 마케팅 섹션을 시끄럽지 않고 의도적인 느낌으로 만듭니다.
- 이미 소유하고 있는 브랜드 HEX에서 시작하세요
- 업무에 어울리는 조화를 고르세요(대비 vs 차분함)
- 디자인 도구용 HEX 및 엔지니어링용 CSS 변수 내보내기
- 배송 전 텍스트 대비를 별도로 확인하세요.
보색
보색은 휠에서 약 180도 간격으로 서로 반대편에 위치합니다. 클래식 쌍에는 파란색/주황색 및 빨간색/녹색이 포함됩니다. 강한 대비를 만들어 CTA 버튼, 하이라이트, 포스터에 유용합니다. 밀도가 높은 UI에서는 주의해서 사용하세요. 최대 강도의 보완물을 나란히 배치하면 진동하거나 크게 느껴질 수 있습니다.
다음에 가장 적합
CTA, 스포츠 및 에너지 브랜드, 차분한 기반에서 눈에 띄어야 하는 데이터 콜아웃.
유사한 색 구성표
파란색, 청록색, 녹색과 같이 유사한 색상이 나란히 배치되어 있습니다. 실제 세계(하늘, 물, 나뭇잎)에서 유사한 색상이 함께 나타나기 때문에 자연스럽고 응집력이 느껴집니다. 유사한 팔레트는 콘텐츠와 충돌하지 않아야 하는 부드러운 제품 UI, 웰니스 브랜드 및 배경에 탁월합니다.
팁: 주요 색상 하나, 지지 색상 하나, 액센트 하나를 선택하세요. 모든 유사한 견본의 소리가 동일하다면 인터페이스의 계층 구조가 손실됩니다.
삼원색 구성표
3극 조화는 120도 간격으로 균일한 세 가지 색상을 사용합니다. 결과는 다채롭지만 균형이 잡혀 있습니다. 이는 유쾌한 브랜드, 교육 제품 및 일러스트레이션 시스템에서 흔히 볼 수 있습니다. UI 작업에서는 한 트라이어드 구성원이 지배하도록 하고 배지, 차트 또는 보조 작업을 위해 나머지 두 구성원을 유지합니다.
4각형(직사각형) 구성표
4원 조화는 바퀴의 직사각형을 형성하는 4가지 색상을 사용합니다. 종종 2개의 보완적인 쌍이 사용됩니다. 그것은 풍부한 다양성과 더 많은 잘못될 수 있는 방법을 제공합니다. 기본, 보조, 악센트 및 중성 색조 동반자 등 역할을 명확하게 할당합니다. Tetradic 세트는 여러 개의 동일한 제품 라인이 포함된 다중 시리즈 차트 및 캠페인 시스템에서 빛을 발합니다.
분할 보색
분할보색은 직접보색 대신 기본색상과 반대쪽에 인접한 두 색상을 사용합니다. 여전히 대비를 얻을 수 있지만 순수한 보완 쌍보다 덜 거친 충돌이 발생합니다. 공격적으로 보이지 않고 에너지가 필요한 대시보드 및 마케팅 페이지에 가장 선호됩니다.
단색 팔레트
단색 팔레트는 동일한 색상을 유지하고 밝기와 채도가 다릅니다. 흰색에 가까운 슬레이트 스케일에서 검정색에 가까운 슬레이트 스케일 또는 색조와 음영이 있는 단일 브랜드 파란색을 생각해 보세요. 텍스트, 표면, 테두리 및 다크 모드 기초에 가장 안전한 선택입니다. 나중에 링크와 버튼에 두 번째 하모니 액센트를 추가하세요.
조화를 CSS 토큰으로 바꾸는 방법
견본이 있으면 CSS 사용자 정의 속성으로 내보내 디자인과 엔지니어링이 하나의 정보 소스를 공유할 수 있습니다.
- 생성된 견본에 대한 --color-1 ~ --color-n
- 가장 어둡거나 가장 밝은 단색 단계를 텍스트 및 배경 역할에 매핑
- 토큰을 직접 편집할 때 브랜드 HEX를 HEX-RGB 변환기와 동기화 상태로 유지하세요.
- 동일한 정지점을 사용하여 CSS Gradient Generator로 소프트 워시를 빌드합니다.
하모니 팔레트를 무료로 생성하세요
기본 색상 선택, 조화 선택, HEX 목록 또는 :root CSS 블록 복사 등 모든 작업이 브라우저에서 이루어집니다.
- 색상 팔레트 생성기 - HEX, RGB, HSL 및 CSS 변수를 사용하여 상보형, 유사형, 삼원형, 사원형, 분할 상보형, 단색 또는 무작위를 선택할 수 있습니다.
- CSS 그라디언트 생성기 - 팔레트 중지를 선형, 방사형 또는 원뿔형 CSS 그래디언트로 전환합니다.
- HEX-RGB 변환기 - 채널 수준 편집이 필요한 경우 브랜드 HEX를 RGB/HSL로 변환하세요.
자주 묻는 질문
UI 디자인에 가장 적합한 색상 조화는 무엇입니까?
단색 스케일과 하나의 악센트 조화(보통 보완 또는 분할 보완)가 대부분의 제품 UI를 포괄합니다. 유사한 방식은 차분한 마케팅 및 콘텐츠가 많은 앱에 적합합니다. 순수한 삼중 및 사중 세트에는 화면에 잡음이 발생하지 않도록 보다 엄격한 역할 할당이 필요합니다.
보완과 분할 보완의 차이점은 무엇입니까?
보색은 정반대의 색상을 사용합니다. 분할 보완은 반대편 옆에 있는 두 가지 색상을 사용합니다. 분할 보완은 일반적으로 대비를 제공하면서도 더 부드러운 느낌을 줍니다.
그래도 대비를 확인해야 합니까?
예. Harmony는 휠과 관련된 색상을 선택합니다. 배경 텍스트의 WCAG AA/AAA 대비를 보장하지 않습니다. 배송하기 전에 항상 읽을 수 있는 쌍을 확인하십시오.
팔레트에는 몇 가지 색상이 포함되어야 합니까?
제품 작업에서는 3~6개의 의도적인 역할이 12개의 견본 무지개를 능가합니다. 유사 및 단색 생성기는 종종 3~8단계를 사용합니다. 보완은 자연스럽게 더 많은 색조를 지정할 수 있는 두 개의 강한 극을 반환합니다.
지금 팔레트를 만들어 보세요
무료 색상 팔레트 생성기를 열고 기본 HEX와 조화를 선택한 다음 HEX 또는 CSS 변수를 복사하세요. 아무것도 업로드되지 않았습니다.