🖌️ 색조합 생성기

색조합 생성기란?

기준이 되는 색 하나를 고르면 그 색과 잘 어울리는 색들을 색상환 이론에 따라 자동으로 뽑아주는 도구입니다. 보색, 유사색, 삼각 배색 같은 조합을 한 번에 확인할 수 있어 디자인 시안이나 발표 자료, 인테리어 색을 고를 때 출발점으로 쓰기 좋습니다.

사용 방법

1. 기준 색을 선택하거나 HEX 코드를 직접 입력합니다.
2. 배색 방식(보색·유사색·삼각형 등)을 고릅니다.
3. 생성된 색들의 코드를 복사해 사용합니다.

배색 방식별 성격

• 보색 배색 — 색상환에서 정반대에 있는 두 색입니다. 대비가 가장 강해 시선을 끌지만, 넓은 면적에 반반씩 쓰면 눈이 피로해집니다. 한쪽을 주조색으로 넓게 깔고 반대색은 버튼이나 강조 문구에만 좁게 쓰는 것이 요령입니다.
• 유사색 배색 — 색상환에서 서로 이웃한 색들을 씁니다. 파랑–청록–초록처럼 자연에서 흔히 보이는 조합이라 안정적이고 편안합니다. 다만 대비가 약해 밋밋해지기 쉬우므로 명도 차이를 크게 두어 구분을 만들어야 합니다.
• 삼각 배색 — 색상환을 삼등분한 세 색입니다. 활기차고 균형이 잡히지만 셋을 같은 비중으로 쓰면 산만합니다. 하나를 주인공으로 정하고 나머지 둘은 보조로 쓰세요.

실제로 배색을 적용하는 비율

어떤 조합을 골랐든 결과를 가르는 것은 면적 배분입니다. 인테리어와 그래픽 디자인에서 널리 쓰이는 60-30-10 규칙이 좋은 기준입니다.

• 60% — 주조색. 배경처럼 넓게 깔리는 색으로, 대개 채도가 낮습니다.
• 30% — 보조색. 카드나 영역을 구분하는 색입니다.
• 10% — 강조색. 버튼, 링크, 알림처럼 눈이 가야 할 곳에만 씁니다.

초보자가 흔히 저지르는 실수는 마음에 드는 색 다섯 개를 비슷한 넓이로 쓰는 것입니다. 색이 많아서가 아니라 위계가 없어서 어수선해 보이는 것입니다.

자주 묻는 질문

Q. 생성된 색을 그대로 쓰면 되나요?
시작점으로 쓰시고 명도와 채도는 용도에 맞게 조정하세요. 이론상 조합이 화면에서 항상 예쁘지는 않습니다.

Q. 글자색은 어떻게 정하나요?
배경과 충분한 명도 차이를 두는 것이 우선입니다. 웹 접근성 기준은 본문에 4.5:1 이상의 대비를 권고합니다. 색이 예뻐도 읽기 어려우면 실패한 배색입니다.

Q. 색맹 사용자를 고려하려면?
빨강–초록 조합만으로 정보를 구분하지 마세요. 가장 흔한 적록색약에서 두 색이 비슷하게 보입니다. 색과 함께 아이콘이나 글자로도 구분되게 하는 것이 안전합니다.

What is the Palette Generator?

Pick one base color and this tool derives colors that work with it, following colour-wheel theory. Complementary, analogous and triadic schemes appear at once, giving you a starting point for design mockups, slide decks or interiors.

How to Use

1. Select a base color or type in a HEX code.
2. Choose a scheme — complementary, analogous, triadic and so on.
3. Copy the generated codes and use them.

What Each Scheme Does

• Complementary — two colors opposite each other on the wheel. Maximum contrast and attention, but splitting a layout evenly between them tires the eye. Use one broadly and reserve the other for buttons and highlights.
• Analogous — neighbours on the wheel, like blue, teal and green. Common in nature, so it reads as calm and cohesive. The risk is flatness; separate elements with lightness rather than hue.
• Triadic — three colors evenly spaced around the wheel. Lively and balanced, but chaotic if all three carry equal weight. Choose one lead and let the others support.

Proportions Matter More Than the Scheme

Whatever you pick, how much of each you use decides the result. The 60-30-10 rule, borrowed from interior design, is a reliable guide.

• 60% — dominant color, usually low saturation, covering backgrounds.
• 30% — secondary color, separating cards and sections.
• 10% — accent, used only where attention belongs: buttons, links, alerts.

The classic beginner mistake is using five favourite colors at roughly equal size. The problem isn't the number of colors — it's the absence of hierarchy.

FAQ

Q. Can I use the generated colors as-is?
Treat them as a starting point and adjust lightness and saturation for context. Theoretically correct combinations don't always look right on screen.

Q. How do I choose text color?
Prioritise lightness difference against the background. Accessibility guidance asks for at least 4.5:1 contrast on body text. A beautiful palette that's hard to read has failed.

Q. How do I account for color blindness?
Never convey information by red versus green alone — the most common deficiency renders them similar. Pair color with an icon or label.