brunch

You can make anything
by writing

C.S.Lewis

by 하기로 Dec 13. 2020

망하지 않는 컬러 고르는 공식

디자인 기초 공식




세 번째 공식인 컬러 공식입니다. 컬러는 네 가지 공식 중에서 개인의 취향이 가장 많이 반영되는 요소입니다. 그럼에도 불구하고 망하지 않는 컬러 공식이 있으니 컬러 사용이 어려웠던 분들은 이번 칼럼을 눈여겨 봐주시기 바랍니다.  





비슷한 채도와 명도의
컬러 사용

일반적인 디자인 툴



파워포인트 컬러 픽커



어렸을 때 미술시간에 배웠던 색상환 표를 기억하시나요? 채도와 명도, 색상, 보색 대비를 열심히 암기했던 추억이 떠오르네요. 색상환을 예시로 들면 머리 아프고 재미도 없으니까 실제로 어떻게 색을 골라야 하는지 tool을 기반으로 설명하겠습니다. 위 이미지는 우리가 흔히 보는 컬러 고르기 패널입니다. 포토샵, 일러스트레이션 같은 디자인 툴부터 파워포인트까지 대체로 비슷한 모양을 하고 있습니다. 우리가 기억해야 할 것은 딱 하나입니다.

같은 톤의 컬러를 사용하면 망할 일이 없다.


다시 말해 같은 채도와 명도를 가지고 있는 '색상'을 골라서 배치하면 망할 일이 없다는 뜻이에요. 색상은 빨주노초파남보처럼 시각적으로 구별되는 색을 말합니다. 채도는 색이 탁해지는 정도, 명도는 빛의 밝기 정도입니다. 위의 컬러 패널을 다시 한번 보겠습니다. 왼쪽은 채도와 명도를 선택할 수 있는 창이에요, 그리고 오른쪽 네모 박스에서는 색상을 선택합니다. 보색이나 유사색을 사용해 색상을 바꾸더라도 채도와 명도는 같은 위치를 최대한 벗어나지 않는 선에서 전체적인 톤을 맞추어야 합니다.


채도와 명도 피커는 거의 그대로 두고 오른쪽의 색상만 변경해서 조합한 색상환입니다. 왼쪽은 고채도와 고명도의 색 조합, 오른쪽은 파스텔 계열의 컬러 조합입니다.


   


파스텔 계열의 조합은 채도 명도의 위치가 대략 11시 방향에 있습니다.



촌스럽지 않은 색을 고르고 싶다면 우유색을 살짝 섞은 듯한 12시 5분 방향의 컬러를 추천합니다. 컬러를 고르는 것보다 채도와 명도를 결정하는 게 훨씬 더 섬세한 감각이 필요한 작업입니다. 따라서 컬러를 먼저 고르기보다는 채도와 명도를 결정 지은 후 거꾸로 컬러를 고르는 방식을 추천합니다.


1. 채도와 명도를 결정해서 전체적인 분위기를 통일시킨다.

2. 컬러를 결정한다.

3. 결정한 컬러에 맞게 채도와 명도를 조금씩 조정한다.




탁색과 탁색의 조합 (저채도, 저명도) 서로 너무 상이하게 다른 채도와 명도의 조합은 추천하지 않습니다. 색을 컨트롤 하기 상당히 어렵기 때문이죠.







비율
지키기



비율은 지난 시간에 배웠던 배치 공식의 비율을 지키면서 컬러를 사용하는 것입니다. 2:8, 3:7, 5:5. 1:9 비율을 지키면서 컬러를 배치하세요. 메인 컬러와 서브 컬러를 어떤 비율로 사용하느냐가 관건이 되겠습니다.







콘셉트에 맞는
컬러


https://blog.simplesite.com


개인 취향이 강한 영역임에도 불구하고 색을 사용할 때 논리적으로 접근하는 방법이 있습니다.

첫째, 대략적인 콘셉트와 맞는 분위기의 색을 고른다.

예를 들어 신뢰도를 높여야 하는 경우라면 파란색을, 밝고 경쾌한 분위기의 콘텐츠라면 주황이나 노랑을 사용하는 식입니다. 은행이나 관공서는 주로 파랑을 사용하고 IT 기업이나 키즈 브랜드는 노랑을 사용하는 사례들을 떠올려보시면 좋겠습니다.

둘째, 명도나 채도도 컨셉에 따라 결정된다.

저채도, 고명도 일수록 파스텔톤의 부드러운 컬러가 됩니다. 부드럽고 조화로운 분위기를 내야 한다면 채도를 낮출수록 우아해지겠죠? 반대로 고채도, 고명도의 비비드 컬러는 생기 있고 경쾌합니다. 톡톡 튀는 생동감을 표현해야 한다면 채도를 높일수록 좋습니다. 그러나 너무 과한 고채도 대비는 자칫 잘못하면 전단지 핏이 되어버리니 주의하세요!!


 


저채도, 고명도의 파스텔 계열 분위기
저채도, 저명도의 묵직한 분위기, 오른쪽은 복합형






잘 모르겠으면
그대로 따라 하자



색을 프리셋으로 골라주는 사이트를 추천합니다. 위 사이트는 같은 채도와 명도를 고정해서 색을 고를 수 있도록 도와주는 사이트입니다.


https://color.adobe.com/ko/





그라디언트 컬러 고르기. 더 이상 촌스러운 그라디언트를 사용하지 마세요!

https://webgradients.com/




컬러 팔레트 프리셋으로 색 조합하기






영상으로 보면 이해가 더 빨라요!!!!! 썸네일 무서우면 클릭!!!!!!!












여기까지 글이 도움이 되었다면 좋아요와 댓글, 공유 부탁드립니다 :)




브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari