디자인 기본 개념 없이 올바른 색상 조합 선택하는 방법

저 같은 개발자에게는 디자인이 정말 쥐약입니다.

아무리 예쁘게 꾸미려고 해도 한계가 있는 것 같아요.

UI/UX가 점점 중요해지는 시대이므로 간단하게라도 알고가면 좋을 것 같아서 포스팅 합니다.

 

색상 선택하는데 도움이 되시길 바랍니다.

 

목차

 

사이트 소개

처음에는 색상 RGB(또는 16진수)값을 확인하려고 방문한 사이트입니다.

 

Color Wheel -Color Calculator

Color Wheel - Color Calculator | Sessions College

그런데 색상의 조화(Color Harmonies)까지 알려주는 사이트더군요.

저는 전문적인 식견은 없으므로 간단히 하나씩 보도록 할게요.

 

색상 선택

먼저 기본이 되는 색 하나를 선택해 볼게요.

Wheel 모양의 컬러판의 작은 동그라미를 원하는 색상이 있는 쪽으로 이동합니다.

저는 초록색을 선택해 보았습니다.

그리고 왼쪽 막대에서 좀 더 어둡게 조절을 할 수가 있습니다.

 

 

색상 조화

2단계에서는 제가 선택한 색과 조화를 이루는 색을 선택할 수 있는 여러가지 옵션을 제공합니다.

보색 선택

첫번째는 보색(Complementary)인데요.

말그대로 상호보완적인 색이라서 돋보이는 효과를 주지만 텍스트에는 사용하지 말라고 하네요.

쓰기가 까다로운 색 조합인가 봅니다.

잘 쓰면 사람들의 시선을 끌고 잘못 쓰면 색이 충돌을 일으키는 느낌이라 초보에게는 적절하지 않을 수도 있습니다.

 

 

단색 선택

다음은 단색(Monochromatic)입니다.

기본 색상에서 색조가 같고 명도만 조절한 색을 추천해 줍니다.

이 조화는 무난한 느낌을 준다고 합니다.

 

 

 

유사한 색상 선택

다음은 유사색(Analogous)입니다.

선택한 색과 이웃한 색상으로 구성하는 방식이라고 하는데요.

색상 차이가 크지 않아서 차분하고 대체로 잘 어울리는 느낌을 준다고 합니다.

 

 

 

보색 나누기 선택

이번에는 분할보색(Split Complementary)입니다.

선택한 색의 보색에 인접한 두 가지 색을 쓰는 방식입니다.

보색과 마찬가지의 효과를 내면서 엉망이 될 확률이 적어서 초보자에게 적합하다고 하네요.

 

 

3색 선택

다음으로 3색(Triadic)입니다.

3가지 색이 Color Wheel에 고르게 위치하고 있어서 뚜렷이 대비되는 효과를 주는데요.

따라서 채도가 낮더라도 뚜렷하고 활기찬 느낌을 준다고 하는데 난잡한 느낌을 주지 않으려면 주의가 필요하다고 합니다.

 

 

4색(이중 보완) 선택

마지막으로 4색(Tetradic)입니다.

두쌍의 보색을 활용하여 풍족한 색을 선택합니다.

이는 한 가지 컬러를 지배적으로 표현하고자 할 때 가장 유용합니다.

다만 한색과 난색의 균형을 맞추는 것이 중요하다고 합니다.

 

 

참고 사이트

Basic color schemes

Basic color schemes

색상 이론에 대한 초보자 가이드

색상 이론에 대한 초보자 가이드

배색, 색상조합 기본 개념 이해하기

배색, 색상조합 기본 개념 이해하기 - Monochromatic, Complementray, Analogous, Split-complementary, Triad, Tints, Sh

 

유사한 사이트

앞서 소개한 사이트와 유사한 다른 사이트도 있으니 참고 바랍니다.

 

Color wheel - color theory and the color wheel

사용법은 유사하니 어렵지 않으실 거예요.

 

감사합니다 :)