꼭 알아야 할 색상 조합 방법

우리의 삶은 색상으로 가득 차 있다. 색상은 의사 결정 과정뿐만 아니라 우리의 기분, 감정 및 인식에 영향을 줄 수 있다. 즉, 색상 조합에서 선택하는 것이 브랜드 및 웹 사이트 구축에 중요한 부분임을 의미한다.

최고의 색상 조합을 선택하는 것은 과학과 예술의 혼합적 가치이다. 우리는 모든 사람들이 색채와 그래픽 디자인의 타고난 능력으로 태어났다는 것을 이해하지 못한다. 운좋게도 최상의 색상 조합을 선택하여 인상을 남기고 원하는 효과를 얻을 수있는 방법이 있다.

기본적인 색상 조합

색상 조합을 선택하기 전에 색상, 용어, 작동 방식, 색상과의 정서적 연결, 사용자가 선택한 색상에 반응하는 방식에서 그들이하는 역할에 대한 기본적인 이해를하는 것이 좋다. 

색상 색조의 관계에 대한 시각적 표현 인 색상환을 다시 소개한다.

색상환(Color Wheel)

초등학교로 돌아가거나 Photoshop을 사용하려고 시도한 시점과 관계없이 대부분의 사람은 인생의 어느 시점에서 컬러 휠 버전을 발견한다. 이 도구의 역사는 1700년대 초반으로 거슬러 올라가며 예술가와 디자이너가 꼭 알아야 할 내용이 되었다.

작동 원리

간단한 색상환은 중앙 허브 주위에 12개의 색상으로 구성돼있다.

1차, 2차 및 3차 색상으로 구성된 컬러 휠

모든 색상은 기본 색상(primary colors)의 조합에서 나온다. 세 가지 기본 색상은 빨강, 파랑 및 노랑이다. 이 세 가지 색상은 기본적으로 다른 모든 색상의 기준이된다.

컬러 휠에서 강조 표시된 기본 색상

기본 색상 중 두 가지 색상의 동일한 부분을 혼합하면 2차 색상 또는 보조 색상(secondary colors)이 만들어진다.

  • 빨강(Red) + 파랑(Blue) = 자주색(Purple)
  • 파란색(Blue) + 노란색(Yellow) = 녹색(Green)
  • 빨강(Red) + 노랑(Yellow) = 주황색(Orange)
컬러 휠에서 강조 표시된 보조 색상

3차 색상(Tertiary colors)은 기본 색상(primary colors) 중 하나와 가장 가까운 2차 색상 중 하나를 혼합 한 색상이다. 3차 색상은 모든 기본 색상과 2차 색상 사이에 있다.

  • 빨강색(Red) + 주황색(Orange) = 빨강 주황색(Red-orange)
  • 노랑색(Yellow) + 주황색(Orange) = 노랑 주황색(Yellow-orange)
  • 노랑색(Yellow) + 녹색(Green) = 노랑 녹색(Yellow-green)
  • 파랑색(Blue) + 녹색(Green) = 파랑 녹색(Blue-green)
  • 파랑색(Blue) + 자주색(Purple) = 파랑 자주색(Blue-purple)
  • 빨강색(Red) + 자주색(Purple) = 빨강 자주색(Red-purple)
컬러 휠에서 강조된 3차 색상

Terminology

모든 연구 분야와 마찬가지로 예술, 디자인 및 색상의 세계는 기술적 인 언어로 잘 표현되어 있다. 컬러 용어에 대한 전반적인 이해는 비즈니스의 미래에 도움이 될 것이다. 디자인 분야에서 가장 많이 사용되는 기본 용어를 소개한다.

색상환의 확장 : 색상 구. 중심 또는 극에 가장 가까운 색상이 가장 무채색 이다. 밝기와 채도가 같지만 색조가 다른 색상을 뉘앙스 라고 한다. 색조와 채도가 같지만 밝기가 다른 색상을 색조와 음영 이라고 한다. 색조와 밝기는 같지만 채도가 다른 색상을  이라고 한다.
  • 색상(Hue, 色相) – “색상(Color)” 및 “색조(色調, Hue)”라는 용어는 종종 아티스트와 디자이너가 서로 바꿔서 사용할 수 있다. 모든 의도와 목적에 따라 이 방법을 사용할 수 있지만 “색상(Color)”과 “색조(Hue)”라는 단어는 실제로 다른 것을 의미한다. 일반적으로 “Color”는 검은색, 흰색 및 회색을 포함한 모든 색상을 나타내는 데 사용된다. “Hue”는 우리가 보는 색상의 원점을 나타낸다. 그것은 우리가 보는 색의 기본이며 항상 컬러 휠의 6가지 기본 및 보조 색상 중 하나이다. 다시말하면 색상환에서 볼 수 있는 순수하고 채도가 있는 색을 일컫는다.
  • 명색조(Tint) – “Tint”는 주어진 색상의 밝은 버전이다. 흰색만 추가 된 색상이다. 때로는 색조가 원래 색상보다 밝게 보일 수 있지만 단지 창백한 버전이 아니기 때문이다. 색조는 원색보다 약간 밝은 색상에서 많이 밝은 색상으로 거의 흰색에 이르기까지 다양하며, 종종 해당 색의 채도가 있는 색보다 훨씬 더 차분하다.
  • 암색조(Shade, 음영) – 이것은“Tint”의 반대 개념이다. “음영(shade)”은 검은색만 추가 된 색조이다. 물론 다양한 양의 검은 색을 포함 할 수 있으며, 결과 색상이 원래 색조보다 거의 어둡거나 거의 검은 색일 수 있다. 이것을 기억하는 쉬운 방법은 나무 그늘의 잔디가 태양의 잔디보다 어둡게 보이는 생각을 하게 되면 된다. 
  • 톤(Tone) –“Tint” 및 “Shade”과 매우 유사하다. 흰색 또는 검은색이 추가된 색조가 아니라 회색(Grey)만 추가된 색조이다. “톤”을 만들기 위해 추가된 회색은 다른 색이 아닌 흑백으로만 구성되어야 한다(회색으로 간주하는 많은 색상은 실제로 색상을 기본으로 가짐). 톤 색상은 순수한 색조보다 더 정교해 보인다.
  • 채도(saturation) – 색의 전체적인 강도나 색상의 선명한 정도를 의미한다. 순수한 색상은 그 색상의 명색조나 톤보다 더 진하다.
  • 명도(value) – 색의 일반적인 밝기나 어둡기를 나타낸다. 밝은 색상은 어두운 색상보다 더 명도가 더 높다.
  • 따뜻함(Warm)과 차가움(Cool) – “따뜻한” 색상은 열과 유사하거나 상징적인 색상이며 “차가운” 색상은 얼음과 차가운 온도로 인한 것이다. 예를 들어 빨강, 주황, 노랑 및 빨강-보라색은 따뜻한 색상이고 파랑, 자주색, 녹색 및 파랑-녹색은 시원한 색상이다.

색의 심리학

색상 이론을 소개했으므로 색상의 심리를 빠르게 살펴 봐야 한다. 선택한 색상과 색조는 고객이 웹 사이트, 명함 및 / 또는 사무실 공간에 대해 어떻게 느끼는지에 따라 색조를 설정하기 때문에 중요하다. 색상 조합을 선택하는 것은 원하는 색상을 선택하는 것이 아니라 청중이 찾는 감정을 불러일으키는 색상을 선택하는 것이다.

“색은 영혼에 직접 영향을 미치는 힘이다.”
“Color is a power which directly influences the soul.”

바실리 칸딘스키 (Wassily Kandinsky)

아래는 다양한 색조와 그들이 이끌어 낼 수있는 느낌에 대한 요약 내용이다.

  • Red: excitement, danger, energy, courage, strength, anger
    빨강 : 흥분, 위험, 에너지, 용기, 힘, 분노
  • Orange: creativity, enthusiasm, health, happiness, encouragement, balance
    주황색 : 창의성, 열정, 건강, 행복, 격려, 균형
  • Yellow: sunshine, hope, optimism, light, positivity, freshness
    노랑 : 햇빛, 희망, 낙관주의, 빛, 양성, 신선도
  • Green: health, nature, renewal, generosity, freshness, environment
    녹색 : 건강, 자연, 재생, 관대함, 신선도, 환경
  • Blue: freedom, trust, expansiveness, dependability, faith, inspiration
    파랑 : 자유, 신뢰, 광대 함, 신뢰성, 믿음, 영감
  • Purple: royalty, luxury, power, pride, creativity, mystery
    퍼플 : 로열티, 럭셔리, 파워, 자부심, 창의성, 미스터리

따뜻한 색은 에너지와 흥분과 열정을 불러일으키고 시원한 색은 차분하고 긴장을 풀 수 있게 한다.

이제 우리는 예술과 디자인에 적용되는 색상에 대한 이해를 하게 될것이다.

Color Combinations – 색상 조합

함께 어울리는 색상을 쉽게 선택할 수 있다. 컬러 휠을 사용하여 단색, 보색, 유사, 분할, 트라이어드 또는 4차 색상 조합을 선택할 수 있다. 이 다양한 색 구성표는 원하는 효과에 따라 대비되는 색상과 조화로운 색상 중에서 선택할 수 있는 옵션을 제공한다.

 Monochrome Combinations – 흑백 조합

단색 색상 조합은 단일 색조의 다른 변형 방법이다. 이 조합은 선택한 색상의 색조, 음영 및 색조로 구성된다. (예를 들어 : 진한 파란색, 약간 밝은 파란색 및 밝은 파란색) 이러한 조합은 바쁜 디자인을 단순화하고 조화롭고 시각적으로 매력적인 모양을 만들거나 브랜드를 특정 색상으로 식별하려는 경우에 좋다. 계층화된 가격표와 같은 디자인의 진행 상황을 보여 주거나 더 밝은 색상을 사용하여 더욱 세련된 디자인을 만드는 것도 좋은 방법이다.

Complementary Combinations – 보완 조합

보색은 컬러 휠에서 서로 마주 보는 반대편에 존재한다. 이 색상은 서로 대비가 높으며 잘못 사용하면 시각적으로 매우 왜곡될 수 있다. 잘 사용하면 디자인을 대담하게 만들 수 있다.

일반적으로 보색을 사용할 때 디자인에서 동일하게 사용하고 싶지 않을 수 있다. 색조 중 하나를 기본 색상으로 선택한 다음 보완 색상을 사용하여 특정 중요한 항목을 강조 표시 할 수 있다. 

이러한 대조적인 색 구성표는 자연에서도 발견될 수 있으며 생생하면서도 자연스럽고 디자인 적용에 적합하다. 예를 들어, 바다의 푸른색에 돋보이는 주황색 산호, 또는 잎의 부드러운 초록색에 라벤더가 있다.

보색(complementary color) 조합의 예 :

  • 빨강과 녹색(Red and green)
  • 파랑과 주황색(Blue and orange)
  • 노란색과 보라색(Yellow and purple)
  • 황록색과 적자(Yellow-green and red-purple)
  • 빨강 주황색과 청록색(Red-orange and blue-green)
보색의 관계

위의 보완 조합의 예는 파란색과 주황색이다. 컬러 휠에서 서로 직접 교차하는 방법을 확인해보자.

Analogous Combinations – 유사한 조합

이러한 색상 조합은 색상환에 나란히 직접 배치된다. 이 조화는 평온과 평화를 느끼게 한다. 어떤 사람들은 이것이 자연계에 자주 존재하는 유사한 조합 때문이라고 말하기도 한다. 기본 색상을 선택한 다음 강조 표시할 색상 (보통 2차 및 3차 색상)을 두 개 더 선택하는 것이 좋다. 기본 색상이 우세하고 다른 두 색상이 압도적으로 강조 표시되도록 하자. 또한 혼합되어 디자인을 씻어 낼 수 있음으로 밀접한 색상을 선택해야 할 때도 있다.

유사한(analogous) 조합의 예 :

  • 보라색, 파란색 및 청록색(Violet, blue, and teal)
  • 빨강, 자홍색 및 자주색(Red, fuschia, and purple)
  • 빨강, 주황 및 노랑(Red, orange, and yellow)
  • 녹색, 파란색 및 자주색(Green, blue, and purple)
유사색상의 관계

Split Complementary Combinations – 분할 보완 조합

이것은 보완적인 색 구성표의 변형이다. 그러나 두 색상이 서로 직접 가로지르는 대신 보색의 양쪽에 하나의 색상이 포함된다. 이 구성표는 너무 굵게 표시되지 않고 세 가지 색상을 포함하여 보색 구성표보다 다양한 색상을 추가한다. 이 방법을 사용하면 보색 구성표보다 균형이 잘 잡힌 따뜻한 색조와 차가운 색조가 모두 포함된 조합으로 마무리된다.

분할 보완 색상 구성표(split complementary color schemes)의 예 :

  • 빨강, 청록색 및 황록색(Red, blue-green, and yellow-green)
  • 파랑, 빨강 주황 및 노랑 주황(Blue, red-orange, and yellow-orange)
  • 노랑, 파랑-보라색, 빨강-보라색(Yellow, blue-purple, and red-purple)
  • 퍼플, 옐로우-오렌지, 옐로우-그린(Purple, yellow-orange, and yellow-green)
분할 보완 색상 관계

Triadic Combinations – 삼원 조합

이 간단한 색상 콤보는 분할 보완 색상 구성표의 변형이다. 이 컴포지션의 색상은 색상환에서 동일한 간격으로 나타난다. 정삼각형을 컬러 휠에 배치하는 것과 같다. 각 지점의 색상은 3색 조합을 만들기 위해 함께 제공된다.

이러한 색상 조합은 톤을 내리거나 색조를 주거나 음영을 입었을 때도 매우 생동감 있는 경향이 있다. 색상은 장난기나 청소년기처럼 보일 수 있다. 이 때문에 이러한 색상의 균형에 주의해야 한다. 하나를 기본 색상으로 선택하고 다른 두 가지를 악센트로 사용하는 것은 시작하기에 적절한 방법이다.

삼원(triadic) 조합의 예 :

  • 빨강, 노랑, 파랑(Red, yellow, and blue)
  • 자주색, 녹색 및 주황색(Purple, green, and orange)
  • 청 자주색, 적황색, 황록색(Blue-purple, red-orange, and yellow-green)
3원 조합의 예

Tetradic Combinations – 4차 조합

3색 조합과 마찬가지로 4색 조합은 색상이 콤보 3개 대신 4개의 색상을 사용한다는 점을 제외하고 동일한 거리에 있는 색상을 포함한다. 색상환에 사각형을 배치하고 각 모서리에서 색상을 선택하여 4색 조합을 얻거나 2개의 보완 색상 세트를 선택할 수 있다.

이 색상 조합은 항상 시끄럽고 재미있으며 생동감 있는 디자인으로 두드러지게 된다. 그러나 이러한 조합이 압도적일 수 있음으로 이러한 조합과 균형을 찾는데 주의를 기울여야 한다.

4차 색 구성표(tetradic color schemes)의 예 :

  • 빨강, 초록, 파랑-보라색, 노랑-오렌지(Red, green, blue-purple, and yellow-orange)
  • 노랑, 자주색, 청록색 및 빨강 주황색(Yellow, purple, blue-green, and red-orange)
4차 색 구성표

색상으로부터 자유로워지려면 – 실험이 핵심이다.

예술과 디자인에 대한 친근감이나 배경이 없다면 최상의 색상 조합을 선택하는 것이 때로는 압도적일 수 있다. 선택한 색상 조합을 실제로 적용할 때까지 디자인에서 어떤 색상 조합이 표시되는지 알 수 없다. 그렇기 때문에 다양한 Hues, Tones, Tints 및 Shade 스캔을 실험하면 목적과 의도에 가장 적합한 색상 조합을 찾는 데 도움이 된다. 그리고 당신이 원하는 메시지와 느낌을 전달하도록 도와준다.

의사 결정 과정에 도움이 되는 많은 앱과 웹 사이트가 있다. Canva의 컬러 팔레트 생성기는 좋아하는 사진을 끌어다 놓아 컬러 팔레트를 검색 할 수 있다. 

여러분의 웹 사이트, 명함 또는 사무실에 맞는 색 구성표를 찾고 있더라도 여러분의 요구에 가장 적합한 색상 조합을 개발할 수 있음을 확신한다. 

Our Favorite Combos – 우리가 가장 좋아하는 콤보

Monochrome – 단색
Art by Kimberly Rachelle. Color palettes from Canva.
Complementary – 보완
Art by Kimberly Rachelle. Color palettes from Canva.
Analogous – 유사
Color palettes from Canva.
Split – 분할
Art by Kimberly Rachelle. Color palettes from Canva.
Triadic – 삼극
Art by Kimberly Rachelle. Color palettes from Canva.
Tetradic – 4차
Color palettes from Canva.

위의 예제를 Shutterstock 컬렉션 이미지에서 101가지 색상 조합 자료를 통해 찾아볼 수 있다.
다음은 Tint와 Shade 자동으로 만들어주는 Tint & Shade Generator이다.

색상 게임 시작하기~!

효과적인 색상 연습을 위하여 개발된 게임이다. 좋은 점수는 곧 색상을 효과적으로 사용할 수 있는 능력이며, 조화로운 색상을 디자인에 적용할 수 있다.

(*본 게임은 Desktop에서 시도하는 것이 효과적이다.)


you're currently offline