컬러 하모니 생성기

색상 조화 생성기가 작동하는 방식

도구가 하는 일

색상 조화 생성기는 하나의 기본 색상(hue)에서 수학적으로 연관된 색상 세트를 계산합니다: 보색, 유사색, 삼색 조화, 사색 조화, 정사각 조화, 분할 보색, 단색, 그리고 명암. 각 팔레트는 HEX, RGB, HSL 값과 함께 렌더링되며, 클릭 한 번으로 복사해 CSS나 디자인 토큰에 바로 사용할 수 있습니다.

개발자들이 흔히 사용하는 사례

디자이너는 브랜드 색상이 서로 다른 조화 규칙에서 어떻게 변화하는지 탐색하며 브랜드 팔레트를 프로토타이핑합니다. 프론트엔드 개발자는 기본 브랜드 색상에서 버튼, 알림, 배지용 포인트 색상을 설정합니다. 데이터 시각화 엔지니어는 의도적으로 보이면서도 서로 구분되는 범주형 색상 세트를 고릅니다. 프로덕트 매니저는 별도의 디자인 도구 없이도 디자인 제안을 검토할 때 팔레트 옵션을 비교합니다.

데이터 형식, 타입 또는 변형

8가지 스킴을 사용할 수 있습니다: 보색(기본 + 180°), 유사색(기본 ± 30°), 삼색 조화(120° 간격의 3색), 사색 조화(직사각형 4색), 정사각 조화(90° 간격의 4색), 분할 보색(기본 + ±150°), 단색(같은 색상에서 명도 10–90%로 변화), 명암(같은 색상, 어두움에서 밝음). 각 색상에는 역할 라벨과 함께 HEX, RGB, HSL 표현이 포함됩니다.

흔한 함정과 엣지 케이스

채도가 극도로 낮거나 회색에 가까운 기본 색상에서 파생된 조화는 스킴 간에 구분이 거의 되지 않습니다 — 채도가 있는 기본 색상에서 시작하세요. 채도가 매우 높은 기본 색상을 삼색 조화나 사색 조화와 결합하면 과하게 튀고 균형 잡기 어려운 팔레트가 될 수 있으니, UI 용도라면 채도를 낮추는 것을 고려하세요. 조화에서 파생된 일부 조합은 WCAG 대비를 충족하지 못할 수 있으므로, 배포 전에 Color Contrast 도구에서 텍스트/배경 조합을 항상 확인하세요.

코드 대신 이 도구를 사용해야 하는 경우

아이디어 구상, 빠른 탐색, 디자인 리뷰에는 브라우저 도구를 사용하세요. 코드에서는 chroma.js, colord, 또는 culori 같은 라이브러리로 조화를 프로그래밍 방식으로 계산하고, 디자인 토큰 빌드 파이프라인에 통합하며, Oklch 같은 지각적으로 균일한 색 공간과 조화 수학을 결합해 더 고르게 보이는 팔레트를 만들 수 있습니다.