배색 방법과 톤에 따른 배색, 배색 참고 사이트

이전 글에서 색의 3 속성에 의한 배색 종류를 알아보았다. 이번 글에서는 배색의 방법과 톤에 따른 배색의 기법에 대해 알아보자. 먼저, 배색의 방법이다. 

---

색의 배열 형태에 따른 배색 방법

그라데이션 Gradation 배색

3가지 이상의 색이 점진적으로 변화하는 배색 방법이다. 하나의 색에서 다른 색상으로 서서히 변하는 색의 조합을 배열하는 것을 말한다. 색의 속성에 따라 명도 그라데이션, 채도 그라데이션, 색조 그라데이션 등이 있다. 

명도 그라데이션 배색

채도 그라데이션 배색

색조 그라데이션 배색

---

세퍼레이션 Separation 배색

배열하고자 하는 색들의 대비가 지나치거나 색들을 배열했을 때 경계가 착시현상을 일으키는 간섭 현상이 있는 색들 사이에 무채색을 두어 색들을 분리시키는 배열을 말한다. 다양한 색들을 함께 사용할 때 유용한 배색 방법이다. 

근접 보색으로 인해 색 중앙에 간섭현상이 생기는 것을 검은색이 분리해준다.

근접보색 배색에 하얀색을 넣어 색을 분리시킨다.

---

도미넌트 Dominant 배색

색상을 통일하고 톤의 변화를 주거나, 톤을 동일하게 하고 색상에 변화는 주는 등 색을 통제하여 통일감을 주는 배색을 의미한다. 

색상을 통일하고 톤의 변화는 준 배색

톤을 동일하게 하고 다양한 색상으로 배색

---

악센트 Accent 배색

단조로운 배색에 보색 등 대비가 강한 색을 함께 배열하여 생동감을 주는 배색 방법이다. 대비가 되는 색을 사용하여 시선을 끌게 만들고 시각적 재미를 주는 배색 방법이다. 

유사한 배색에 보색 대비를 활용한 강한 색을 배색

채도 대비를 활용한 강조색의 배치

---

레피티션 Repetition 배색

둘 이상의 색의 배열을 반복하여 통일감을 주면서 리듬감을 느껴지게 만드는 배색으로 주로 타일의 배색이나 체크무늬, 바둑판 무늬에 사용한다. 

색 배열을 반복하여 배색한 타일 배색

체크무늬에서 보이는 레피티션 배색

---

배색 기법

색의 속성을 이용하여 색을 배열하는 기법은 여러 가지가 있다. 그 중 대표적인 배색 기법에 대해 알아보자. 

 

톤 온 톤 Tone On Tone 배색

색상은 같게, 명도는 차이를 크게 하는 배색이다. 조화로우면서도 극적인 효과를 줄 수 있는 배색 방법이다. 

같은 색상에서 톤의 차이로 배색

---

톤 인 톤 Tone In Tone 배색 

유사색상의 배색과 같고 톤은 동일하게 하는 배색이다. 동일한 톤을 사용하므로 다양한 색상을 사용하여도 온화하고 부드러운 효과를 준다. 

톤은 같고 색상은 근접색으로 배색

---

토널 Tonal 배색

톤 인 톤 배색과 비슷하며 중명도, 중채도인 Dull 톤의 다양한 색상을 배열하는 배색을 말한다. 차분하고 안정된 느낌을 준다. 

중명도, 중채도의 톤을 유지한 채 근접색으로 배색

---

까마이와 Camieu 배색 

동일한 색상, 명도, 채도 내에서 약간의 차이를 이용한 배색 방법이다. 색의 차이는 미묘하나 부드럽고 안정된 분위기를 주며 톤 온 톤 배색과 비슷하나 변화폭이 매우 작다. 

색상은 같고 명도의 작은 차이만으로 배색

---

포 까마이와 Faux Camaieu 배색 

까마이와 배색과 비슷하나 주위의 톤으로 배색하는 차이점이 있다. 이는 색상과 톤에 약간의 변화를 줌으로써 편안하고 부드러운 느낌을 준다. 

톤은 같고 색은 근접색으로 배색 

---

원색을 활용한 배색 기법

톤을 활용한 배색 기법과 함께 사용한 원색의 색 개수에 따른 배색 기법을 알아보자. 

 

다색상 Multi Color 배색

고채도의 다양한 색상으로 배색을 하여 적극적이고 활동적, 귀여움, 화려함을 표현하기 쉽다. 

고채도의 색상으로 배색

---

비콜로 Bicolore 배색

하나의 면을 2가지 색으로 나누는 배색이다. 흰색과 Vivid 한 톤의 컬러를 사용하여 분명한 대비 효과와 단정한 느낌을 준다. 

2가지 색의 배색

---

트리콜로 Tricolore 배색

세 가지 색을 이용하여 긴장감을 주기 위한 배색으로 하나의 면을 3가지로 나눈다. 색상이나 톤의 명확한 대조가 요구되며 흰색과 vivid 한 톤의 컬러를 사용하여 강렬하고 안정감 높은 배색을 할 수 있다. 

3가지 색의 배색

---

이렇게 배색의 방법과 기법에 대해 알아보았다. 이렇게 개념을 이해한다고 해도 배색을 하는 것은 무척 어려운 일이다. 그래서 배색에 도움을 주는 유용한 사이트들이 많다. 

 

이번에는 배색에 참고할 수 있는 사이트를 알아보자. 

 

배색 사이트 

Adobe Color

어도비에서 운영하고 있는 컬러 배색에 참고할 수 있는 사이트이다. 중앙 원에서 색을 선택하고 왼쪽에서 [색상 하모니 규칙 적용] 중 원하는 배색 스타일에 체크하면 색을 선택해준다. 한글로 볼 수 있다는 장점이 있다. 

https://color.adobe.com/ko/create/color-wheel

---

uiGradients 

접속할 때마다 다른 색의 그라디언트를 보여주는 사이트로 다양한 그라디언트 배색을 추천받을 수 있다. CSS를 복사할 수 있어 그라디언트를 직접 사이트에 적용시킬 수 있다. 그라디언트의 방향도 바꿀 수 있어 원하는 방향으로 그라디언트를 만들어 CSS를 복사하면 된다. 

uiGradients - Beautiful colored gradients

---

Design Seeds 

인스타그램에 사진을 제출하면 컬러칩을 올려주는 사이트이다. 올려놓은 이미지들이 많아 참고할 배색을 직접 찾아보는 것도 꽤 도움이 될 유용한 사이트이다. 

Home Page

---

이번 글로 배색에 대해 알아보았다. 다양한 색을 조화롭게 사용하는 것은 무척 어려운 일이다. 그래서 찾아보면 배색에 참고할 만한 사이트들이 많다. 하지만 이 배색만을 믿고 동일한 색상을 사용하는 것이 100% 맞는 방법은 아니다. 디자인하는 것이 무엇인지에 따라 조금씩 톤을 조정해야 하는 경우도 있다. 

 

결국 색을 사용하는 것은 색에 대한 감각을 계속 늘려나가야 하는 것이다. 색에 대한 감각을 늘릴 수 있는 방법은 역시 많이 보고 많은 작업을 하는 것이다. 색감이 좋은 사이트, 이미지 등을 통해 왜 그 사이트와 이미지가 좋을 지에 대해 분석해 보며 좋은 색에 대한 보는 눈을 기르고 그 후에는 많은 작업을 하는 것이 도움이 된다. 

 

물론 아무 생각없이 색을 사용하지 않는다는 한도 내에서 말이다. 

 

다음 글에 배색된 색들을 통해 어떤 인상과 이미지를 느낄 수 있는지를 알아보고 색감이 좋은 이미지들을 분석하며 함께 컬러에 대한 감각을 찾아나가 보자.

 

그럼, 다음 글로 만나기를 바란다.