[Design] 색을 어떻게 적용해야 하는가? 색을 조화롭게 배색하는 공식!

‘어떤 색을 사용할 것인가? 주제(Concept)에 맞는 컬러를 찾는 방법!‘에서 기획의 콘셉트에 맞는 주제색을 색의 의미를 통해 찾아보는 방법을 알아보았습니다.

색의 배색(Color Combination) = 색의 조화(Color Harmony)
Pepper Powered 로고 출처: Design by Wiell

디자인에서 주인공 역할을 맡을 주제색을 정했다면, 이제 필요한 것은 주인공을 지원하고 조화롭게 어울릴 수 있는 조연 역할을 할 컬러를 고르는 것입니다. 두 가지 이상의 색이 조화롭게 어울리는 방법, 즉 조화로운 색의 배색 방법에 대해서 알아보도록 하겠습니다.

차례

색상환(Color Wheel)
색의 배색(Color Combination)
1) 보색(Complementary)
2) 분할보색(Split Complementary)
3) 삼색(Triadic)
4) 유사색(Analogous)
5) 단색(Monochromatic)
색의 배색을 쉽게 알아볼 수 있는 툴, Adobe Color

1. 색상환(Color Wheel)

색상환(Color Wheel)은 색의 스펙트럼 순서로 컬러를 배열한 것으로 여러분이 알고 있는 무지개색으로 구성되어 있습니다. 색상환을 활용하면 색의 배색(Color Combination, Color Harmony)을 쉽게 알아볼 수 있습니다.

최초의 색상환은 1666년 뉴턴(Sir Issac Newton)에 의해 개발되었으며, 국내에서는 먼셀(Albert Henry Munsell)의 색상환이 산업과 교육에서 주로 사용되고 있습니다.

여기서 제시한 색상환은 요하네스 이텐(Johannes Itten)의 ’12색상환’입니다. 원색(Primary Color)인 빨강(Red), 노랑(Yellow), 파랑(Blue)을 중심으로 색상을 원형으로 정렬하여 만든 것입니다. ‘RYB Color Wheel’로도 명칭 하는데 ‘RYB’는 Red, Yellow, Blue의 약자입니다. 12색상환은 디자인 분야에서 많이 활용되고 있는 색상환 중 하나입니다.

본 색상환에서 색의 한글 이름, 빨강, 주황, 노랑, 초록, 파랑, 보라는 국가기술표준원에서 제공하는 색채표준정보의 ‘유채색의 기본색 이름’을 따랐습니다.

색의 영어 이름은 미국과 영국에서 주로 사용되는 명칭을 사용했습니다. 보라의 경우, Purple 또는 Violet이 혼용되어 사용되기도 합니다. 참고로 주황의 경우, 색채표준정보의 대응 영어에는 Yellow Red로 표기되어 있습니다.

2. 색의 배색(Color Combination)

색의 배색(Color Combination)은 색상의 조화, 컬러 하모니(Color Harmony)라고도 합니다. 색상환을 통해 2개 이상의 색을 어떻게 조화롭게 배색하고 적용할 수 있는지 알아보도록 하겠습니다.

1) 보색(Complementary)

보색(Complementary)은 색상환에서 서로 마주 보고 있는 색의 배색을 말합니다.

출처: Food photo created by timolina – www.freepik.com

우리가 일상생활에서 쉽게 만나는 보색은 음식을 만들 때 많이 사용됩니다. 빨강 토마토가 얹어진 초록 샐러드처럼 녹색에 빨간색 채소가 들어가는 경우, 김치찌개에 녹색 파를 송송 썰어 넣으면 빨간 국물에 초록색이 악센트가 되어 입맛을 돋우는 보색의 효과를 내게 됩니다.

보색 크리스마스 카드 Christmas Card — 출처: freepik.com

출처: mountaindew.com

출처: Design by Wiell

보색은 두 색의 배색을 통해 뚜렷한 대비(Contrast) 효과를 나타낼 수 있습니다. 튀고 강조하고 역동적인 느낌을 줍니다. 대표적인 보색의 예로 크리스마스 장식에 사용되는 빨간색과 녹색을 들 수 있습니다.

보색 블레이드 러너 2049 포스터 Blade Runner 2049 Poster

보색은 대조적인 따뜻한 색(Warm Color)과 차가운 색(Cool Color)이 대비되는 효과로 디자인 시 강렬하고 극명한 인상을 줄 수 있습니다.

하지만 보색을 잘못 적용하면 매우 촌스러운 배색이 되어버립니다! 그래서 비전공자와 초보자에게 보색은 추천하지 않는 배색입니다.

2) 분할보색(Split Complementary)

분할 보색(Split Complementary)은 색상환에서 선택한 컬러의 맞은편 해당 보색의 양옆에 위치한 두 색을 선택하여 총 세 개의 컬러로 구성하는 배색 방식입니다.

보색의 장점인 강조성을 살리고, 보색을 잘못 사용하면 촌스러울 수 있는 대비 효과의 위험성을 줄일 수 있는 배색 방법입니다.

Before (2017-2019)

After (2019)
출처: mozila.org

2019년도에 새롭게 선보인 파이어폭스(Firefox)의 새로운 로고는 형태를 더욱 심플하게 리뉴얼 하였습니다. 기존 로고의 배색이었던 분할보색을 그대로 적용한 예입니다.

3) 삼색(Triadic)

삼색(Triadic)은 색상환에서 정삼각형의 위치에 배열된 세 가지 색으로 배색하는 방법입니다. 즉 같은 120도 간격으로 위치한 세 개의 색을 조합하는 것입니다.

출처: wikipedia

3색 슈퍼맨 Superman — 출처: Eduardo RS, Pixabay

삼색 역시 보색과 같이 강조와 역동성을 줄 수 있는 배색입니다. 버거킹의 예전 로고가 삼색이 적용된 성공적인 로고 디자인으로 유명합니다. 슈퍼맨의 의상을 보면 빨강, 노랑, 파랑이 사용된 전형적인 삼색이며 아동용 콘텐츠 디자인 시 활용되는 배색입니다.

하지만 보색과 같이 강렬한 색상 배색으로 인하여 적용할 때 유의해야 합니다. 그래서 이 삼색 역시 비전공자와 초보자에게는 권장하지 않는 배색 방법입니다.

4) 유사색(Analogous)

유사색(Analogous)은 색상환에서 서로 인접한 3개의 색으로 구성된 배색입니다.

출처: mastercard.com

대비(Contrast)는 약하지만 차분한(Calm) 느낌을 줍니다. 조화로우면서 안정적이며 친근한 느낌의 효과를 디자인할 수 있습니다. 이 배색은 우리가 자연(Nature)에서 자주 접하는 배색이기도 합니다.

유사색은 안정적으로 컬러를 배색할 수 있어, 단색과 함께 비전공자와 초보자가 실패할 확률이 적은 배색 방법입니다. 중요한 것은 3개 이하의 색을 사용해야 안전하게 적용할 수 있다는 것입니다. 더욱 안전한 방법은 따뜻한 색(Warm Color)과 차가운 색(Cool Color)의 각 계열에 해당하는 색으로만 구성해주는 것입니다.

유사색을 응용하면 안전하고 조화로운 배색으로 그라데이션(Gradient)을 효과적으로 적용할 수 있습니다. 색상을 2개보다는 3개를 이용하면 더욱 깊고 부드러운 그라데이션을 디자인 할 수 있습니다.

Before (1999-2021)
출처: wikipedia

After (2021)
출처: bk.com

버거킹(Burger King)의 로고 디자인이 2021년도에 새롭게 리뉴얼 되었습니다. 기존의 배색 방식이었던 삼색에서 유사색으로 변화하였습니다. 정확하게는 삼색 로고 이전, 1999년 이전의 로고를 리디자인한 것이지만 현재 로고 디자인의 트렌드 중 하나가 유사색 또는 단색을 적용하는 것입니다.

5) 단색(Monochromatic)