디자인을 하다 보면 레이아웃과 글꼴은 그럴듯한데 색만 올리면 어딘가 어색해지는 순간이 있습니다. 색을 고르는 일이 감각의 영역처럼 느껴지지만, 실제로는 몇 가지 원리만 알아도 실패 확률이 크게 줄어듭니다. 이 글은 색상, 명도, 채도라는 기본 개념에서 시작해 톤온톤, 톤인톤, 유사색, 보색 배색이 각각 어떤 인상을 주는지 정리하고, 주조색·보조색·강조색의 비율과 색 조합 도구 활용법까지 다룹니다. 처음 배색을 공부하는 분이 오늘 바로 작업에 적용할 수 있도록 순서대로 설명하겠습니다.
색을 이루는 세 가지 축: 색상, 명도, 채도
모든 색은 세 가지 속성으로 설명할 수 있습니다. 이 셋을 구분해서 볼 수 있게 되면 "왜 이 조합은 어색할까"라는 질문에 스스로 답할 수 있습니다.
- 색상(Hue): 빨강, 노랑, 파랑처럼 색의 이름에 해당하는 성질입니다. 색상환 위에서 어느 위치에 있는지로 생각하면 쉽습니다.
- 명도(Value, Lightness): 색이 얼마나 밝고 어두운지를 뜻합니다. 흰색에 가까울수록 명도가 높고, 검정에 가까울수록 낮습니다.
- 채도(Saturation, Chroma): 색이 얼마나 선명하고 순수한지를 말합니다. 채도가 높으면 쨍하고 강렬하며, 낮으면 회색빛이 섞여 차분해집니다.
초보자가 가장 자주 놓치는 것은 명도입니다. 색상은 다르지만 명도가 비슷한 두 색을 나란히 두면 경계가 흐릿해지고, 글자와 배경에 쓰면 읽기 어려워집니다. 작업물을 흑백으로 바꿔 보는 습관을 들이면 명도 차이가 충분한지 바로 확인할 수 있습니다. 흑백에서도 구분이 잘 된다면 명도 설계는 대체로 성공한 것입니다.
배색의 열쇠, 톤 이해하기
톤은 명도와 채도를 함께 묶어 부르는 개념입니다. 같은 파랑이라도 밝고 연한 파랑, 어둡고 탁한 파랑, 선명한 파랑은 전혀 다른 느낌을 줍니다. 이런 차이를 톤이라고 부릅니다.
톤은 보통 다음과 같은 말로 표현합니다.
- 비비드(선명한): 채도가 가장 높은 순색에 가까운 톤. 활기차고 강렬합니다.
- 페일·라이트(연한, 밝은): 흰색이 많이 섞인 톤. 부드럽고 가벼우며 파스텔 느낌을 줍니다.
- 덜·그레이시(탁한, 회색빛): 회색이 섞인 톤. 차분하고 세련되며 고급스러운 인상을 줍니다.
- 딥·다크(짙은, 어두운): 검정이 섞인 톤. 무게감 있고 진중합니다.
배색이 어려운 이유는 색상과 톤을 동시에 조절해야 하기 때문입니다. 그래서 초보 단계에서는 둘 중 하나를 고정하고 나머지 하나만 바꾸는 방식이 가장 안전합니다. 이것이 바로 톤온톤과 톤인톤 배색의 출발점입니다.
네 가지 기본 배색과 그 인상
톤온톤: 같은 색상, 다른 톤
톤온톤은 색상은 하나로 고정하고 명도와 채도만 달리하는 배색입니다. 연한 하늘색, 중간 파랑, 짙은 남색을 함께 쓰는 식입니다. 한 가지 색 계열 안에서 움직이기 때문에 통일감이 강하고 정돈된 인상을 줍니다.
- 어울리는 곳: 기업 브랜드 자료, 정보 위주의 프레젠테이션, 깔끔한 웹사이트
- 주의할 점: 명도 차이를 너무 작게 주면 밋밋해집니다. 가장 밝은 색과 가장 어두운 색 사이에 충분한 간격을 두세요.
톤인톤: 같은 톤, 다른 색상
톤인톤은 반대로 톤은 비슷하게 맞추고 색상만 바꾸는 배색입니다. 파스텔 분홍, 파스텔 민트, 파스텔 노랑을 함께 쓰는 경우가 대표적입니다. 색상은 다양하지만 밝기와 선명도가 비슷해서 전체 분위기가 하나로 묶입니다.
- 어울리는 곳: 아동용 콘텐츠, 감성적인 일러스트, 계절 이벤트 배너
- 주의할 점: 톤이 같으면 명도도 비슷해지기 쉬워 글자 가독성이 떨어질 수 있습니다. 텍스트에는 별도로 어두운 색을 준비하는 것이 좋습니다.
유사색 배색: 이웃한 색끼리
색상환에서 서로 가까이 붙어 있는 색들을 조합하는 방식입니다. 노랑-주황-빨강, 초록-청록-파랑처럼 이어지는 색을 함께 쓰면 자연스럽고 편안한 흐름이 생깁니다. 노을이나 숲처럼 자연에서 흔히 보는 조합이라 거부감이 적습니다.
- 어울리는 곳: 따뜻하거나 시원한 분위기를 강조하고 싶은 포스터, 음식·여행 관련 디자인
- 주의할 점: 모두 비슷한 비중으로 쓰면 초점이 흐려집니다. 한 색을 중심으로 두고 나머지를 보조로 쓰세요.
보색 배색: 정반대의 색끼리
색상환에서 마주 보는 색을 짝짓는 방식입니다. 빨강과 청록, 파랑과 주황, 노랑과 보라가 대표적입니다. 서로를 더 선명하게 보이게 만들어 강한 대비와 에너지를 줍니다.
- 어울리는 곳: 시선을 끌어야 하는 버튼, 스포츠·이벤트 홍보물, 썸네일
- 주의할 점: 두 색을 모두 높은 채도로 같은 면적에 쓰면 눈이 피로하고 경계가 번쩍거려 보입니다. 한쪽의 채도를 낮추거나 면적 차이를 크게 두는 것이 요령입니다.
색이 어떤 구조로 어울리고 부딪히는지 원리부터 차근차근 짚고 싶다면 아래 영상을 함께 보는 것도 좋습니다. 제목에서 알 수 있듯 색알못을 위한 배색 공부를 주제로 색채의 기본 원리를 다루는 영상이라, 위에서 정리한 개념을 다른 설명 방식으로 복습하는 데 도움이 될 것입니다.
주조색, 보조색, 강조색의 비율
좋은 색을 골랐더라도 얼마만큼 쓰느냐에 따라 결과가 크게 달라집니다. 그래서 배색에서는 색에 역할을 나눠 줍니다.
- 주조색(Base): 화면에서 가장 넓은 면적을 차지하는 색입니다. 배경이나 큰 면에 쓰이며 전체 분위기를 결정합니다. 흰색, 연한 회색, 채도 낮은 색이 자주 쓰입니다.
- 보조색(Sub): 주조색을 받쳐 주면서 구역을 나누거나 변화를 주는 색입니다. 카드 배경, 소제목 영역, 일러스트의 넓은 부분에 쓰입니다.
- 강조색(Accent): 가장 적게 쓰지만 가장 눈에 띄는 색입니다. 버튼, 핵심 숫자, 로고처럼 시선이 꼭 가야 하는 곳에만 씁니다.
흔히 참고하는 기준이 주조색 70, 보조색 25, 강조색 5 정도의 비율입니다. 비슷한 맥락으로 60:30:10이라는 기준도 널리 언급됩니다. 이 숫자는 정확히 지켜야 하는 공식이라기보다 강조색은 아껴 써야 힘이 생긴다는 원리를 기억하기 위한 출발점입니다.
강조색이 여기저기 흩어져 있으면 어느 것도 강조되지 않습니다.
실제로 적용할 때는 다음 순서를 권합니다.
- 먼저 주조색과 보조색만으로 화면을 완성해 봅니다. 이 상태에서도 정보 구조가 읽혀야 합니다.
- 그다음 정말 중요한 요소 한두 곳에만 강조색을 넣습니다.
- 강조색이 화면 곳곳에 퍼져 있다면 일부를 보조색으로 바꿔 줍니다.
앞서 소개한 배색법과 연결하면 더 쉬워집니다. 예를 들어 주조색과 보조색은 톤온톤으로 차분하게 맞추고, 강조색만 보색으로 골라 포인트를 주면 정돈되면서도 눈에 띄는 결과물을 만들 수 있습니다.
색 조합 참고 도구 활용법
원리를 알아도 처음부터 색을 직접 고르기는 막막합니다. 이럴 때 색 조합 도구를 쓰면 시행착오를 줄일 수 있습니다. Adobe Color, Coolors 같은 서비스가 대표적이며, 이 밖에도 다른 사람들이 만든 컬러 팔레트를 모아 둔 사이트가 많습니다.
도구를 쓸 때는 다음 방법을 활용해 보세요.
- 조화 규칙 기능 사용하기: 많은 도구가 기준색 하나를 고르면 유사색, 보색, 단색(톤온톤과 비슷한 개념) 같은 규칙에 따라 나머지 색을 제안해 줍니다. 앞에서 배운 배색 이름과 연결해 보면 원리가 손에 익습니다.
- 사진에서 색 추출하기: 마음에 드는 사진이나 그림에서 색을 뽑아 팔레트로 만드는 기능이 있는 도구도 있습니다. 자연 풍경이나 잘 만든 디자인에서 색을 가져오면 검증된 조합을 빠르게 얻을 수 있습니다.
- 색상 코드 기록하기: 마음에 드는 조합을 찾으면 HEX 코드를 따로 정리해 두세요. 프로젝트마다 일관된 색을 쓰는 데 큰 도움이 됩니다.
- 명도 대비 확인하기: 글자와 배경 색을 정할 때는 명도 대비를 검사해 주는 도구로 가독성을 확인하는 것이 좋습니다. 보기 좋은 색과 읽기 쉬운 색은 다를 수 있습니다.
도구가 제안한 팔레트를 그대로 쓰기보다 어느 색을 주조색, 보조색, 강조색으로 쓸지 역할을 정한 뒤 적용하는 것이 핵심입니다. 같은 다섯 가지 색이라도 비율에 따라 전혀 다른 디자인이 됩니다.
오늘 바로 해 볼 배색 연습
배색 감각은 원리를 이해한 뒤 반복해서 손으로 확인할 때 자랍니다. 다음 연습을 순서대로 해 보세요.
- 좋아하는 색 하나를 골라 명도만 바꾼 톤온톤 팔레트 다섯 칸을 만들어 봅니다.
- 파스텔 톤 하나를 정해 색상만 바꾼 톤인톤 팔레트를 만들어 봅니다.
- 간단한 카드 뉴스나 배너를 하나 정해 주조색, 보조색, 강조색의 역할을 나눠 칠해 봅니다.
- 완성한 결과물을 흑백으로 바꿔 명도 차이가 충분한지 점검합니다.
- 강조색을 보색으로 바꿨을 때와 유사색으로 바꿨을 때의 인상을 비교해 봅니다.
색을 고르는 기준이 생기면 "왠지 예뻐서"가 아니라 "이 분위기를 내려고 이 톤을 골랐다"고 설명할 수 있게 됩니다. 처음에는 한 가지 배색법만 정해 두고 여러 작업에 반복해서 적용해 보세요. 익숙해진 뒤에 다른 배색법을 하나씩 추가하면 자신만의 컬러 팔레트가 자연스럽게 쌓입니다.
