색상 조합 추천기

색상 조합 추천기는 기준이 되는 색을 하나 고르면, 색채 이론에 따라 그 색과 잘 어울리는 색들을 자동으로 추천해주는 도구입니다.

단순히 색 목록만 보여주는 것이 아니라, 조합을 클릭하면 그 조합의 색들을 실제 웹사이트 디자인 예시의 버튼·배지·아이콘 등 역할별로 배치해서 보여줍니다. 조합 전체가 실제 화면에서 어떤 느낌으로 어우러지는지 눈으로 확인하면서 고를 수 있습니다.

보색, 분할 보색, 유사색, 삼각색, 사각색, 단색조까지 여섯 가지 배색 방식의 추천을 한 번에 제공하며, 마음에 드는 추천 색을 다시 기준 색으로 삼아 연쇄적으로 탐색할 수도 있습니다. 모든 기능이 브라우저에서 바로 동작합니다.

색상환(Color Wheel) 위에서 색들의 위치 관계에 따라 조합의 느낌이 달라집니다.

보색 (Complementary) 색상환에서 정반대(180°)에 있는 색입니다. 대비가 가장 강해 시선을 끌어야 하는 포인트 요소(버튼, 배지 등)에 효과적입니다. 예: 파랑-주황, 빨강-초록.

분할 보색 (Split Complementary) 보색의 양옆(150°, 210°)에 있는 두 색입니다. 보색만큼 강한 대비를 주면서도 시각적 부담이 적어, 배색 초보자에게 가장 추천되는 방식입니다.

유사색 (Analogous) 색상환에서 이웃한(±30°) 색입니다. 자연에서 흔히 보이는 조합으로 편안하고 통일감 있는 분위기를 만듭니다. 브랜드의 전체 톤을 잡을 때 유용합니다.

삼각색 (Triadic) 색상환을 3등분(120° 간격)한 색입니다. 생동감이 있으면서도 균형이 잡혀 있어 일러스트, 포스터 등 다채로운 디자인에 적합합니다.

사각색 (Tetradic) 색상환을 4등분(90° 간격)한 색입니다. 가장 다채로운 조합으로, 한 색을 주인공으로 정하고 나머지는 포인트로 아껴 쓰는 것이 요령입니다.

단색조 (Monochromatic) 같은 색상에서 밝기와 채도만 바꾼 조합입니다. 실패 확률이 가장 낮고 차분하며 세련된 느낌을 줍니다. UI 디자인의 기본 배색으로 널리 쓰입니다.

디자인에서 가장 널리 쓰이는 배색 비율 법칙입니다.

60% — 주조색 (Dominant Color) 배경처럼 화면의 가장 넓은 영역을 차지하는 색입니다. 보통 채도가 낮은 밝은 색이나 무채색을 사용합니다.

30% — 보조색 (Secondary Color) 주조색을 보완하며 영역을 구분해주는 색입니다. 이 도구의 예시에서는 히어로 배경을 채우는 기준 색과 특징 카드의 연한 배경이 이 역할에 해당합니다.

10% — 강조색 (Accent Color) 버튼, 링크, 알림처럼 시선을 끌어야 하는 요소에 아껴 쓰는 색입니다. 이 도구의 예시에서 버튼과 하단 배너에 배치되는 조합 색들이 이 역할입니다.

이 비율을 지키면 색이 많아도 화면이 어수선해지지 않습니다. 이 도구의 디자인 예시도 이 법칙을 따라 만들어져 있어, 실제 적용 감각을 익히기 좋습니다.