스플릿 보색(Split-Complementary) 색상 이해하기: 초보자를 위한 최고의 색 구성

10년 이상 웹사이트를 만들어 온 입장에서, 아마추어 디자인과 전문가 디자인을 구분하는 한 가지가 있다면 그것은 색상입니다. 사용하는 색의 개수가 아니라, 어떤 색을 함께 사용하는지, 그리고 그 이유가 중요합니다. 제 경험상 대부분의 개발자들(초반의 저도 포함)은 안전한 그레이와 하나의 악센트 색만 고집하거나, 그 순간에는 좋아 보이지만 프로덕션에서는 탁해 보이는 색을 선택합니다.

해결 방법은 400페이지짜리 색채 이론 교과서를 공부하는 것이 아닙니다. 신뢰할 수 있는 하나의 색 구성을 배우고, 그것이 두 번째 천성이 될 때까지 사용하는 것입니다. 그 구성이 바로 스플릿 보색(split-complementary)입니다. 그리고 이것에 익숙해지면, 삼각색(triadic colors)이 자연스러운 다음 단계가 됩니다. 두 가지를 모두 설명해드리겠습니다.

목차

• 스플릿 보색이란 무엇인가?
• 색상환에서 스플릿 보색을 찾는 방법
• 초보자를 위해 스플릿 보색이 완벽한 이유
• CSS의 스플릿 보색
• 스플릿 보색을 사용하는 실제 웹 디자인 예제
• 삼각색이란 무엇인가?
• 스플릿 보색 vs 삼각색: 각각 언제 사용할까?
• 색 조화 적용을 위한 실무 팁
• FAQ

스플릿 보색이란 무엇인가?

먼저 기본적인 보색(complementary color)부터 시작하겠습니다. 표준 색상환에서 보색은 서로 정확히 마주보고 있습니다. 파란색과 주황색, 빨간색과 초록색, 보라색과 노란색을 생각해보세요. 이들은 최대한의 대비를 만듭니다. 문제점은 무엇일까요? 최대 대비는 공격적으로 느껴질 수 있습니다. 파란색과 주황색의 웹사이트는 당신을 향해 소리칩니다. 이것은 디자인적으로 말싸움과 같습니다.

스플릿 보색은 그 개념을 완화합니다. 기본 색의 정반대 색을 사용하는 대신, 보색에 인접한 두 색을 사용합니다. 따라서 기본 색이 파란색이라면, 보색은 주황색일 것입니다. 하지만 주황색 대신, 황-주황색과 적-주황색을 선택합니다.

그게 다입니다. 그게 전부입니다.

그 결과는 강한 시각적 대비를 가지면서도(여전히 바퀴의 반대쪽에서 끌어오고 있기 때문에) 더 미묘하고 덜 대립적으로 느껴지는 세 가지 색 팔레트입니다. 긴장은 있지만 충돌은 없습니다.

그 뒤에 있는 기하학

360도 색상환에서:

1. 기본 색조 선택 (예: 220°의 풍부한 파란색)
2. 보색 찾기: 기본 + 180° (따라서 주황색인 40°)
3. 40° 대신, 양쪽으로 30° 이동: 10° (적-주황색)과 70° (황-주황색)

표준 분할은 보색에서 ±30°이지만, 일부 디자이너는 약간 다른 느낌을 원할 때 ±25° 또는 ±35°를 사용합니다. 정해진 규칙이 없습니다. 당신의 눈이 최종 판단자입니다.

색상환에서 스플릿 보색을 찾는 방법

HSL 값으로 이를 수동으로 수행할 수 있으며, 개발자들이 CSS에 직접 매핑되기 때문에 이를 권장합니다. 다음은 정신 모델입니다:

기본:         H
보색:         H + 180°
분할 1:       H + 150°
분할 2:       H + 210°

왜 보색 ±30° 대신 150°와 210°인가요? 같은 것이고, 계산 방식이 다를 뿐입니다. (H + 180) - 30 = H + 150이고 (H + 180) + 30 = H + 210입니다. 색상환에서 같은 위치입니다.

브랜드 색이 hsl(175, 65%, 45%)인 청록색이라고 하겠습니다:

• 기본: 175°
• 분할 1: 175 + 150 = 325° (장미/자홍색)
• 분할 2: 175 + 210 = 385° → 25° (따뜻한 산호/주황색)

당신의 세 가지 색 팔레트: 청록색, 장미색, 산호색. 이것은 아름다운 조합이며, 어떤 디자인 직관도 필요 없습니다. 단지 산술이 필요할 뿐입니다.

인터랙티브 색상환으로 직접 시도해보세요. 기본 색을 선택하면 두 분할을 즉시 계산합니다.

초보자를 위해 스플릿 보색이 완벽한 이유

색상에 대해 물어오는 모든 개발자에게 스플릿 보색을 권장합니다. 그 이유는 다음과 같습니다:

실패하기가 거의 불가능합니다

보색 구성은 촌스러워 보일 수 있습니다. 유사색 구성(색상환에서 서로 옆의 색)은 옅어 보이고 대비가 부족할 수 있습니다. 삼각색 구성은 신중한 균형이 필요합니다. 하지만 스플릿 보색은? 그냥... 잘 작동합니다. 세 가지 색 사이의 기하학적 관계는 순수 보색의 거칠음 없이 시각적 계층 구조를 위한 충분한 대비를 보장합니다.

명확한 주요 색을 제공합니다

삼각색의 경우, 세 가지 색조가 모두 동등하게 배치되어 어느 것이 주도할지 결정하기 어려울 수 있습니다. 스플릿 보색 구성에서는 하나의 색이 명확한 기본 색이고 다른 두 색이 보조 역할을 합니다. 이는 다음이 필요한 웹 디자인에 완벽하게 매핑됩니다:

• 웹사이트에 필요한 주요 브랜드 색 (기본)
• CTA와 인터랙티브 요소를 위한 악센트 색 (한 가지 분할)
• 강조 표시, 배지 또는 호버 상태를 위한 보조 악센트 (다른 분할)

우아하게 축소됩니다

일부 페이지에서는 세 가지 색 중 두 가지만 사용할 수 있습니다. 각 분할이 기본과 자체적으로 좋은 대비를 가지고 있기 때문에 그것도 여전히 작동합니다. 어디든지 세 가지를 모두 사용해야 한다고 잠기지 않습니다.

CSS의 스플릿 보색

일반적으로 HSL을 사용하여 CSS 사용자 정의 속성으로 스플릿 보색 팔레트를 설정합니다. HSL이 핵심인 이유는 색 이론 계산을 매우 간단하게 만들기 때문입니다. 색조는 단지 바퀴의 도(degree)입니다.

:root {
  /* 기본 색조 */
  --hue-base: 220; /* 풍부한 파란색 */
  --hue-split-1: calc(var(--hue-base) + 150); /* ~10° 따뜻한 적-주황색 */
  --hue-split-2: calc(var(--hue-base) + 210); /* ~70° 황금 노란색 */

  /* 주요 팔레트 */
  --color-primary: hsl(var(--hue-base), 65%, 50%);
  --color-accent-warm: hsl(var(--hue-split-1), 70%, 55%);
  --color-accent-cool: hsl(var(--hue-split-2), 60%, 50%);

  /* 확장 팔레트 — 더 밝은/어두운 변형 */
  --color-primary-light: hsl(var(--hue-base), 65%, 90%);
  --color-primary-dark: hsl(var(--hue-base), 65%, 25%);
  --color-accent-warm-light: hsl(var(--hue-split-1), 70%, 92%);
  --color-accent-cool-light: hsl(var(--hue-split-2), 60%, 90%);

  /* 기본 색조에서 파생된 중립색 */
  --color-bg: hsl(var(--hue-base), 10%, 98%);
  --color-surface: hsl(var(--hue-base), 8%, 100%);
  --color-text: hsl(var(--hue-base), 15%, 15%);
  --color-text-muted: hsl(var(--hue-base), 10%, 45%);
}

하단의 중립색에 주목하세요. 기본 색조의 포화도 양을 흰색과 회색에 약간 섞고 있습니다. 이것은 큰 차이를 만드는 작은 세부 사항입니다. 배경이 색 팔레트와 연결되지 않은 것처럼 느껴지지 않을 것입니다. 당신은 의식적으로 알아채지 못하지만 당신의 눈은 할 것입니다.

60-30-10 규칙 적용하기

클래식 실내 디자인 비율이 여기에 완벽하게 작동합니다:

/* 60% — 주요/중립색 (배경, 큰 표면) */
.page-wrapper {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* 30% — 기본 색 (헤더, 네비게이션, 카드) */
.site-header {
  background-color: var(--color-primary);
  color: white;
}

.card {
  border-left: 4px solid var(--color-primary);
  background: var(--color-surface);
}

/* 10% — 악센트 분할 (CTA, 강조 표시, 배지) */
.btn-cta {
  background-color: var(--color-accent-warm);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
}

.badge-new {
  background-color: var(--color-accent-cool-light);
  color: var(--color-accent-cool);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.link-highlight {
  color: var(--color-accent-warm);
  text-decoration: underline;
}

따뜻한 악센트(적-주황색)는 황금 노란색보다 눈을 더 끕니다. 따라서 주요 CTA에 사용합니다. 더 차가운 악센트는 보조 요소에 잘 작동합니다. 이것은 정해진 규칙이 아닙니다. 둘 다 테스트해보고 특정 색조가 어떻게 보이는지 확인하세요.

스플릿 보색을 사용하는 실제 웹 디자인 예제

실제 사이트들이 이 구성을 사용하는 방식을 살펴보겠습니다. 비록 그들이 그것을 그렇게 부르지는 않을 수 있지만요.

예제 1: SaaS 대시보드 (파란색 기본)

• 기본: 파란색 (#3B82F6) — 네비게이션, 헤더, 주요 버튼
• 분할 1: 따뜻한 앰버 (#F59E0B) — 경고 상태, 업그레이드 CTA, 활성 표시기
• 분할 2: 장미색 (#F43F5E) — 오류 상태, 알림 배지, 삭제 작업

이것은 본질적으로 Tailwind CSS의 기본 팔레트가 가능하게 하는 것입니다. 주요 색상으로 파란색, 악센트로 앰버색과 장미색입니다. Tailwind 팀이 의도했는지 여부에 관계없이 스플릿 보색입니다.

예제 2: 전자상거래 (녹색 기본)

• 기본: 숲 초록색 (#16A34A) — 브랜드 정체성, "장바구니에 추가" 버튼
• 분할 1: 따뜻한 빨간색 (#DC2626) — 판매 태그, 긴급 표시기
• 분할 2: 보라색 (#7C3AED) — 로열티 프로그램 배지, 프리미엄 제품 강조

예제 3: 포트폴리오 사이트 (보라색 기본)

• 기본: 보라색 (#8B5CF6) — 제목, 히어로 섹션
• 분할 1: 청록색 (#14B8A6) — 링크, 인터랙티브 요소
• 분할 2: 라임색 (#84CC16) — 성공 상태, 추천 프로젝트 배지

패턴이 보이나요? 기본 색이 브랜드 정체성의 무거운 일을 수행하고, 두 가지 분할은 기본에서 눈에 띄어야 하는 보조 역할을 처리합니다.

삼각색이란 무엇인가?

삼각색은 색상환에서 120° 간격으로 동등하게 배치된 세 개의 색조입니다. 스플릿 보색이 바퀴에 있는 이등변 삼각형이라면, 삼각색은 정삼각형입니다.

기본:      H
삼각색 1:  H + 120°
삼각색 2:  H + 240°

클래식 삼각색 조합:

• 빨간색, 노란색, 파란색 (1차 색상 — 이것이 가장 유명한 삼각색 세트입니다)
• 주황색, 초록색, 보라색 (2차 색상)
• 청록색, 자홍색, 금색

삼각색 도구에서 삼각색 조화를 탐색할 수 있습니다.

CSS에서 삼각색

:root {
  --hue-base: 0; /* 빨간색 */
  --hue-triadic-1: calc(var(--hue-base) + 120); /* 120° 초록색 */
  --hue-triadic-2: calc(var(--hue-base) + 240); /* 240° 파란색 */

  --color-primary: hsl(var(--hue-base), 70%, 50%);
  --color-secondary: hsl(var(--hue-triadic-1), 60%, 42%);
  --color-tertiary: hsl(var(--hue-triadic-2), 65%, 50%);
}

삼각색 구성은 대담합니다. 에너지가 넘칩니다. 또한 제어하기가 더 어렵습니다. 세 가지 색이 기본적으로 동등한 시각적 무게를 가지기 때문에, 각각을 얼마나 많이 사용할지에 대해 더 신중해야 합니다. Google의 브랜드 색상(빨간색, 노란색, 파란색, 초록색)은 본질적으로 이중 삼각색 구성이며, 제품 전체에 걸쳐 작동하게 하려면 수백 명의 디자인 팀이 필요합니다.

스플릿 보색 vs 삼각색: 각각 언제 사용할까?

각 구성이 적합한 시점에 대한 제 솔직한 의견은 다음과 같습니다:

요소	스플릿 보색	삼각색
난이도	초보자 친화적	중급
대비 수준	높지만 통제됨	매우 높음, 동등한 긴장
지배적인 색	내장됨 (기본)	자연스러운 지배색 없음 — 당신이 선택
최적 용도	비즈니스 사이트, SaaS, 블로그, 포트폴리오	크리에이티브 에이전시, 아동 브랜드, 게임, 엔터테인먼트
촌스러워 보일 위험	낮음	관리되지 않으면 중간에서 높음
색 균형	60-30-10이 자연스럽게 매핑됨	신중한 비율 결정이 필요함
다재다능함	어떤 포화도에서 작동	전문적으로 느끼려면 채도 저하나 색칠이 필요
감정적 톤	정교함, 친근함	장난스러움, 역동적, 대담함

스플릿 보색을 선택해야 할 때

• 전문적 또는 기업 사이트를 만들 중입니다
• 한 색이 브랜드 정체성을 지배하기를 원합니다
• 팔레트가 많은 텍스트 콘텐츠와 작동해야 합니다 (블로그, 문서)
• 클라이언트가 브랜드 가이드라인을 제공하지 않았고 안전한 시작점이 필요합니다
• UI 색상과 잘 어울려야 하는 이미지를 추가할 수 있는 헤드리스 CMS 프로젝트에서 작업 중입니다

삼각색을 선택해야 할 때

• 브랜드가 본질적으로 장난스럽거나 젊습니다
• 엔터테인먼트, 게임, 또는 아동 제품을 위해 디자인 중입니다
• 디자인이 일러스트레이션이나 애니메이션에 크게 의존합니다
• 강한 디자인 기술이 있고 창의적 경계를 밀고 싶습니다
• 크리에이티브 포트폴리오 또는 에이전시 사이트를 만들고 있습니다

Social Animal에서 만드는 Next.js 프로젝트와 Astro 사이트 대부분의 경우, 스플릿 보색이 기본 권장사항입니다. 가독성이 시각적 세련됨보다 더 중요한 콘텐츠 중심 레이아웃과 잘 어울립니다.

색 조화 적용을 위한 실무 팁

팁 1: 관대하게 채도 낮추기

색상환에서 나온 순수 색조는 대부분의 웹 인터페이스에 너무 강렬합니다. 주요 색상의 채도를 50-70%로 낮추고 배경의 경우 더 낮춥니다. 높은 채도는 작은 악센트(버튼, 배지, 아이콘)에 작동합니다. 1200px 너비의 헤더에는 작동하지 않습니다.

팁 2: 지각적 균일성을 위해 HSL 대신 OKLCH 사용하기

HSL에는 더러운 비밀이 있습니다: 라이트니스 값이 인간이 실제로 밝기를 인지하는 방식과 일치하지 않습니다. hsl(60, 100%, 50%)의 노란색은 hsl(240, 100%, 50%)의 파란색보다 훨씬 더 밝게 보이며, 둘 다 "50% 라이트니스"입니다. OKLCH가 이를 수정합니다.

:root {
  /* OKLCH는 지각적으로 균일한 라이트니스를 제공합니다 */
  --color-primary: oklch(55% 0.15 220);
  --color-accent-warm: oklch(55% 0.18 10);
  --color-accent-cool: oklch(55% 0.14 70);
  /* 세 가지 모두 실제로 똑같이 밝게 보입니다 */
}

2025년 현재, OKLCH는 훌륭한 브라우저 지원(전역 96% 이상)이 있습니다. 가능하면 사용하세요.

팁 3: 대비 비율 확인하기

색 조화는 접근성을 무시하지 않습니다. 모든 텍스트 배경 조합은 WCAG 2.2 대비 비율을 충족해야 합니다 — 일반 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1. WebAIM 대비 확인자 또는 기본 제공 Chrome DevTools 대비 검사기와 같은 도구는 필수 불가결합니다.

팁 4: 실제 콘텐츠로 테스트하기

아름다운 팔레트가 실제 사진, 사용자 아바타, 제품 이미지를 추가할 때 얼마나 많이 무너지는지 말씀드릴 수 없습니다. 항상 실제 콘텐츠로 색 구성을 테스트하세요. 청록색, 장미색, 산호색이 포함된 스플릿 보색 팔레트는 주로 살몬색인 히어로 이미지와 끔찍하게 충돌할 수 있습니다. 초기에 프로덕션 콘텐츠로 목업을 작성하세요.

팁 5: 다크 모드 변형 만들기

라이트니스와 채도를 조정하면 두 구성 모두 다크 모드로 잘 번역됩니다:

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: hsl(var(--hue-base), 55%, 65%);
    --color-accent-warm: hsl(var(--hue-split-1), 60%, 65%);
    --color-bg: hsl(var(--hue-base), 15%, 10%);
    --color-surface: hsl(var(--hue-base), 12%, 15%);
    --color-text: hsl(var(--hue-base), 10%, 90%);
  }
}

다크 모드에서는 일반적으로 포그라운드 색상의 라이트니스를 높이고 채도를 약간 줄이고 싶습니다. 어두운 배경에서 밝고 채도 높은 색상은 눈의 피로를 유발합니다.

FAQ

스플릿 보색 구성이란 무엇입니까? 스플릿 보색 구성은 세 가지 색을 사용합니다: 하나의 기본 색과 색상환에서 그 보색에 인접한 두 색입니다. 기본의 정반대 색(표준 보색)을 선택하는 대신, 그 보색의 두 이웃을 각각 30° 떨어진 곳에서 선택합니다. 이것은 순수 보색 쌍의 시각적 긴장보다 적으면서도 강한 대비를 제공합니다.

색상환에서 스플릿 보색을 찾으려면 어떻게 합니까? 기본 색의 색조 값도(degree)(0-360)로 시작합니다. 150°를 더해 첫 번째 분할을 얻고, 210°을 더해 두 번째 분할을 얻습니다. 결과가 360°를 초과하면 360°을 뺍니다. 예를 들어, 220°(파란색)의 기본은 10°(적-주황색)와 70°(황-주황색)의 분할을 제공합니다. HSL 값으로 CSS에서 수동으로 수행하거나 무료 색상환 도구를 사용하여 시각적으로 계산할 수 있습니다.

스플릿 보색과 삼각색의 차이점은 무엇입니까? 스플릿 보색은 하나의 기본 색과 보색 근처의 두 색을 사용합니다(기본에서 150°와 210°). 삼각색은 120° 간격으로 동등하게 배치된 세 가지 색을 사용합니다. 핵심 차이점은 균형입니다: 스플릿 보색은 명확한 지배적 색을 가지고, 삼각색은 세 가지 색을 동등하게 취급합니다. 스플릿 보색은 더 정제된 느낌이고, 삼각색은 더 역동적인 느낌입니다.

웹 디자인에서 순수 보색보다 스플릿 보색이 더 낫습니까? 순수 보색 구성(색상환에서 서로 정반대인 두 색)은 최대 대비를 만들며, 이것은 대량으로 보기에 공격적이거나 보기 어려울 수 있습니다. 스플릿 보색은 대비의 대부분을 유지하면서 세 번째 색을 추가하여 다양성을 제공하고 전체 효과를 부드럽게 합니다. 두 가지 색 대신 세 가지 색으로 더 많은 디자인 유연성을 제공하며, 시각적 계층 구조를 만들기가 훨씬 더 쉽습니다.

Tailwind CSS에서 스플릿 보색을 사용할 수 있습니까? 절대적으로. tailwind.config.js의 theme.extend.colors 아래에 세 가지 색조를 정의한 다음 마크업 전체에서 사용합니다. Tailwind의 기본 팔레트는 실수로 여러 스플릿 보색 그룹을 포함합니다 — 파란색/앰버/장미색이 개발자가 가장 자주 도달하는 것입니다. v4에서 Tailwind의 oklch() 지원을 사용하여 지각적으로 균일한 색 계산을 할 수도 있습니다.

웹사이트는 실제로 얼마나 많은 색을 사용해야 합니까? 대부분의 전문 웹사이트는 중립색 변형(회색은 기본 색으로 색칠됨)을 더한 최대 3-5가지 색조를 사용합니다. 스플릿 보색 구성은 정확히 3가지 색조를 제공하며, 이것이 최적의 지점입니다. 이 3가지에서 배경, 테두리, 호버 상태를 위한 더 밝고 어두운 변형을 생성합니다. 60-30-10 규칙은 좋은 시작 프레임워크입니다: 60% 중립/기본, 30% 주요, 10% 악센트.

삼각색은 전문 기업 웹사이트에서 작동합니까? 가능할 수 있지만, 더 많은 기술이 필요합니다. 핵심은 무거운 채도 저하와 신중한 비율 관리입니다. 모든 세 가지 삼각색을 전체 포화도와 동등한 양으로 사용하면, 아이 장난감처럼 보이는 디자인을 얻을 것입니다. 두 가지 색의 채도를 현저히 낮추고 드물게 사용합니다. 대부분의 기업 또는 SaaS 프로젝트의 경우, 스플릿 보색이 더 안전하고 종종 더 나은 선택입니다.

스플릿 보색과 삼각색 팔레트를 선택하는 데 도움이 될 도구가 있습니까? 인터랙티브 색상환을 사용하면 두 조화를 즉시 시각화할 수 있습니다. Coolors(coolors.co), Adobe Color, Realtime Colors by Juxtopposed와 같은 다른 견고한 도구도 있으며, 실시간 웹사이트 목업에서 팔레트를 미리 볼 수 있습니다. 개발자의 경우, VS Code 확장 프로그램 "Color Highlight"도 권장합니다. 코딩 중에 팔레트 값을 인라인으로 볼 수 있습니다.