배색 정하는 법｜70:25:5 법칙과 3가지 색 고르는 법, 실패하지 않는 배색 요령

결론: 배색은 "3가지 색·70:25:5·명도 차이"로 정해진다

배색에서 헤맬 때 가장 먼저 잡아야 할 것은 단 세 가지입니다. 색을 역할별로 세 가지로 줄일 것, 그 세 가지 색을 쓰는 면적에 큰 차이를 둘 것, 그리고 글자와 배경 사이에 충분한 밝기 차이(명도 차이)를 둘 것. 이 세 가지만 지켜도 배색 실패의 대부분을 막을 수 있습니다.

색 자체의 취향이나 "센스"가 문제가 되는 것은 사실 이 세 가지를 충족한 뒤입니다. 반대로 말하면 색 고르기에 자신이 없어도 수·면적·명도 차이를 규칙대로 정리하면 배색은 "프로답게" 정돈됩니다. 아래에서 각각을 구체적으로 어떻게 정하는지 차례로 살펴봅니다.

베이스 컬러·메인 컬러·액센트 컬러의 역할

배색의 기본은 색에 "역할"을 주는 것입니다. 좋아하는 색을 늘어놓는 것이 아니라 배경이 될 색, 주인공이 될 색, 눈길을 끌기 위한 색을 하나씩 정합니다. 역할이 분명하면 새 요소를 추가할 때도 "이건 어떤 역할인가"만 생각하면 색이 바로 정해집니다.

글자색을 3가지 색에 넣지 않는 이유는 글자가 "읽히기 위한 색"이어서 배색의 인상을 만드는 색과 역할이 다르기 때문입니다. 본문을 검정에 가까운 진한 색으로 해 두면 배색의 인상을 해치지 않고 가독성만 확보할 수 있습니다. #333333이나 #1F2937 같은 진한 회색은 흰 배경에 대해 12:1 이상의 명암비가 있고, 순수한 검정보다 눈이 덜 피로하다고 느끼는 사람도 많습니다.

70:25:5 법칙이란｜면적 차이가 배색을 정리한다

70:25:5 법칙은 베이스 컬러·메인 컬러·액센트 컬러를 쓰는 면적 비율의 기준입니다. 인테리어나 패션에서도 같은 사고방식이 쓰이며 디자인 분야에서 널리 알려져 있습니다. 핵심은 숫자 자체가 아니라 "주인공과 조연의 면적에 뚜렷한 차이를 두는 것"입니다.

사람의 눈은 면적이 비슷한 색끼리를 "똑같이 중요한 것"으로 받아들입니다. 메인과 액센트가 50:50이면 어디를 봐야 할지 몰라 전체가 산만해 보입니다. 반대로 액센트가 아주 좁은 면적에만 쓰이면 시선이 자연스럽게 그곳으로 모입니다. 돋보이게 하고 싶은 것일수록 쓰는 면적을 작게 하는 것이 배색의 요령입니다.

• 비율은 정확히 잴 필요가 없고 "베이스가 압도적으로 넓고 액센트는 아주 조금"이라는 감각이면 충분합니다. 60:30:10으로 소개되기도 하지만 생각은 같습니다.
• 사진이나 일러스트가 많은 페이지에서는 사진의 색도 메인이나 액센트로 셉니다. 사진이 선명하다면 베이스와 메인을 차분하게 하면 전체가 안정됩니다.
• 액센트 컬러를 쓰는 곳이 늘어났다면 비율이 무너졌다는 신호입니다. 정말 돋보이게 하고 싶은 1~2곳으로 다시 좁히세요.

배색을 정하는 5단계

여기서부터는 배색을 처음부터 정하는 순서입니다. 순서가 중요하며, 먼저 메인 컬러를 정하고 다음에 베이스, 마지막으로 액센트를 정합니다. 처음부터 색을 늘어놓는 것보다 훨씬 빠르고 헤매지 않습니다.

1. 1

   전하고 싶은 인상을 말로 정한다

   "신뢰감", "친근함", "고급스러움", "활기", "차분함" 등 보는 사람이 느꼈으면 하는 인상을 2~3개의 단어로 적습니다. 말로 해 두면 색을 고르는 기준이 흔들리지 않고, 다른 사람에게 배색을 설명할 때도 도움이 됩니다.

2. 2

   메인 컬러를 1가지 고른다

   인상에 맞는 색상을 하나 고르고 밝기와 선명도를 조정합니다. 성실함은 남색이나 파랑, 자연스러움은 초록, 따뜻함은 주황이나 갈색이 출발점입니다. 원색(#FF0000, #0000FF)은 그대로 쓰면 너무 강하므로 조금 어둡게 하거나 채도를 낮추면 세련돼 보입니다.

3. 3

   베이스 컬러를 정한다

   고민된다면 흰색(#FFFFFF)이나 아주 연한 오프화이트·회색을 고릅니다. 메인 컬러와 같은 색상을 아주 연하게 한 색(예를 들어 메인이 남색이라면 #F1F5F9 같은 푸른 기가 도는 회색)을 베이스로 하면 전체에 통일감이 생깁니다.

4. 4

   액센트 컬러를 정한다

   색상환에서 메인 컬러와 떨어진 색을 고릅니다. 보색(반대쪽 색)을 쓰면 가장 눈에 띄고, 보색의 양옆(분할 보색)이라면 조금 부드러워집니다. 액센트는 버튼이나 강조에만 쓰므로 다소 화려한 색이어도 괜찮습니다.

5. 5

   가독성과 보이는 모습을 수치로 확인한다

   글자색과 배경색, 버튼 글자와 버튼 색의 명암비를 확인하고 본문이 4.5:1 이상인지 봅니다. 함께 색각 차이에 따른 보이는 모습이나 흑백으로 했을 때 구별되는지도 확인합니다. 부족하면 색상은 그대로 두고 밝기만 조정합니다.

이 5단계 중 마지막 "수치로 확인"은 눈으로 판단하기 어려운 부분입니다. 배색 체커라면 글자색과 배경색을 입력하기만 해도 명암비와 WCAG 합격 여부를 알 수 있고, 기준에 못 미칠 때는 색상과 채도를 유지한 채 명도만 움직인 "가장 가까운 합격 색"까지 제안됩니다.

색상환에서 고르는 배색 패턴｜보색·유사색·트라이어드

메인 컬러가 정해지면 액센트나 서브 색은 "색상환" 위의 위치 관계로 고르면 조화로운 조합이 됩니다. 색상환은 빨강·노랑·초록·파랑·보라 등의 색상을 원형으로 늘어놓은 것으로, 원 위에서의 각도 차이에 따라 배색의 성격이 달라집니다.

처음 배색을 짠다면 "동계색＋보색 액센트 1색"이 가장 실패하기 어려운 조합입니다. 메인 컬러를 밝게 하거나 어둡게 한 색으로 베이스나 서브를 만들고, 액센트에만 반대쪽 색을 쓰면 통일감과 눈에 띄는 포인트를 모두 얻을 수 있습니다. 보색의 성질과 빨강의 보색이 청록이라고도 초록이라고도 하는 이유는 보색이란에서 설명합니다.

톤(명도·채도)을 맞추면 색이 늘어도 정돈된다

색은 "색상(빨강·파랑 등의 색조)", "명도(밝기)", "채도(선명도)"의 세 가지 성질로 정해집니다. 이 중 명도와 채도의 조합을 "톤"이라고 부릅니다. 배색이 어울리지 않아 보이는 원인의 대부분은 색상이 아니라 톤이 제각각인 데 있습니다.

• 파스텔 톤(밝고 채도가 낮음)으로 맞춘다: 부드러움·귀여움, 유아용품이나 봄 이벤트에 적합
• 비비드 톤(채도가 높음)으로 맞춘다: 활기·팝, 세일이나 어린이 이벤트에 적합
• 다크 톤(어두움)으로 맞춘다: 중후함·고급스러움·어른스러운 인상. 글자는 흰색이나 밝은 색으로
• 그레이시 톤(탁한 색)으로 맞춘다: 차분함·세련됨, 내추럴 계열 브랜드나 카페에 적합

톤이 맞으면 색상이 다른 색을 4~5가지 써도 정돈되어 보입니다. 그래프 색 구분이나 카테고리마다 색을 바꿔야 할 때는 이 "톤을 맞추고 색상만 바꾸는" 방법이 편리합니다. 반대로 파스텔 핑크 옆에 원색 파랑을 두면 색 수가 적어도 붕 떠 보입니다.

메인 컬러의 명도만 몇 단계로 바꾼 색을 준비해 두면 연한 배경, 구분선, 버튼에 마우스를 올렸을 때의 색 등을 모두 같은 색에서 만들 수 있어 편리합니다. 배색 체커의 "명도별 톤"에는 기준색과 같은 색상·채도에서 밝기만 바꾼 5단계가 표시됩니다.

색이 주는 인상｜메인 컬러 고르기의 기준

색에는 많은 사람이 공통으로 느끼기 쉬운 인상이 있습니다. 물론 문화나 개인의 경험에 따라 달라지지만, 메인 컬러를 고르는 출발점으로는 충분히 도움이 됩니다. 같은 색상이라도 밝게 하면 가볍게, 어둡게 하면 무겁게, 채도를 낮추면 차분한 인상으로 바뀝니다.

메인 컬러를 1가지 골랐다면 그것을 "밝게 한 색"과 "어둡게 한 색"도 함께 시험해 보세요. 같은 파랑이라도 밝은 하늘색은 상쾌함, 남색은 신뢰감, 탁한 블루 그레이는 차분함을 느끼게 합니다. 인상의 단어에 맞는 밝기를 찾는 편이 색상을 여러 번 바꾸는 것보다 빨리 답에 도달합니다.

가독성은 명암비로 확인한다

배색에서 가장 간과되기 쉬운 것이 "읽을 수 있는가"입니다. 자기 모니터에서는 또렷하게 보여도 야외에서 스마트폰 화면을 보거나, 프로젝터로 비추거나, 시력이 낮은 사람이 보면 명도 차이가 적은 글자는 단번에 읽을 수 없게 됩니다. 이를 수치로 확인하는 것이 명암비입니다.

명암비는 두 색의 밝기(상대 휘도)의 비로, 같은 색끼리는 1:1, 흰색과 검정은 최대인 21:1이 됩니다. 웹 접근성의 국제 가이드라인인 WCAG 2.1에서는 다음 값을 기준으로 제시합니다.

실제 색으로 비교해 보면 겉보기 인상과 수치가 어긋난다는 것을 잘 알 수 있습니다. 특히 노랑·주황·하늘색처럼 밝은 색은 선명하고 눈에 띄어 보여도 흰 배경이나 흰 글자와의 명도 차이는 거의 없습니다.

기준에 못 미칠 때 색을 통째로 바꿀 필요는 없습니다. 색상과 채도는 그대로 두고 명도만 낮추면(또는 높이면) 인상을 거의 바꾸지 않고 읽기 쉽게 만들 수 있습니다. 배색 체커로 시험해 보면 흰 배경에 #999999 글자는 #757575(4.60:1), 흰 글자를 올리는 주황 버튼 #FF7A00은 배경을 #BD5A00(4.53:1)으로 어둡게 하는 안이 표시됩니다.

색각 차이도 배려한다｜색만으로 정보를 전하지 않는다

색이 보이는 방식에는 개인차가 있으며, 일본에서는 남성 약 20명 중 1명, 여성 약 500명 중 1명이 빨강과 초록 등을 구별하기 어려운 색각 특성을 가진 것으로 알려져 있습니다(다른 많은 나라도 비율이 비슷합니다). 배색을 정할 때는 내 눈에 보이는 색의 차이가 모든 사람에게 똑같이 보이는 것은 아니라는 것을 전제로 합니다.

• 빨강과 초록, 주황과 연두, 파랑과 보라처럼 밝기가 비슷한 조합은 구별하기 어려워집니다.
• "빨간 글자는 오류", "초록은 완료"처럼 색만으로 의미를 전하지 말고, 아이콘·글자·선 모양으로도 구별할 수 있게 합니다.
• 그래프 계열은 색상뿐 아니라 명도에도 차이를 둡니다. 흑백으로 인쇄해도 구별된다면 대부분의 색각에서 구별할 수 있습니다.
• 범례를 멀리 두기보다 그래프의 선이나 막대 바로 옆에 라벨을 쓰는 편이 확실히 전달됩니다.

배색 체커의 "색각 시뮬레이션" 탭에서는 최대 8가지 색을 넣어 1형(P형)·2형(D형)·3형(T형)과 그레이스케일에서 보이는 모습을 나란히 비교할 수 있고, 혼동하기 쉬운 조합이 색차 수치와 함께 표시됩니다. 자료나 그래프 색 구분의 구체적인 수정 방법은 색각 다양성을 배려한 배색에 정리했습니다.

용도별 배색 예시｜컬러 코드와 명암비 포함

여기서는 그대로 쓸 수 있는 배색 예시를 용도별로 소개합니다. 모두 베이스·메인·액센트·글자색 4가지로 구성했고, 글자를 읽을 수 있는지 명암비로 확인했습니다. 메인 컬러 버튼에는 흰 글자를 올린다는 전제로 그 비율도 실었습니다.

베이스를 순백이 아니라 메인 컬러나 액센트의 색감을 아주 조금 머금은 오프화이트로 하면 전체 인상이 부드러워집니다. 카페 예시의 #FFF8F0이나 뷰티 예시의 #FFF5F7이 이에 해당하며, 흰 종이나 흰 화면보다 따뜻함이 생깁니다.

어린이용 예시처럼 액센트를 흰 글자 버튼에 쓰면 3:1대에 그치는 색도 있습니다. 그럴 때는 버튼 글자를 크고 굵게 해서 "큰 글자" 기준(3:1)에 맞추거나, 액센트는 글자를 올리지 않는 장식이나 아이콘에만 쓰면 활기찬 인상을 남기면서 가독성을 지킬 수 있습니다.

흔한 배색 실수와 고치는 법

고민될 때는 일단 전체를 흑백(그레이스케일)으로 바꿔 보는 것을 추천합니다. 흑백으로 해도 제목과 본문, 버튼과 배경이 뚜렷하게 구별된다면 명도 차이 설계는 잘된 것입니다. 반대로 흑백으로 하면 요소가 녹아 버리는 부분은 색을 더하는 것이 아니라 밝기를 떨어뜨려서 해결합니다.

배색 체커로 배색을 정하는 순서

지금까지의 내용은 배색 체커를 쓰면 브라우저에서 한꺼번에 확인할 수 있습니다. 색은 모두 브라우저 안에서 계산되며, 입력한 색이 서버로 전송되지 않습니다.

1. 1

   메인 컬러를 "글자색·기준색"에 입력한다

   #1E40AF 같은 컬러 코드 외에 rgb()나 hsl() 표기도 읽을 수 있습니다. 컬러 피커로 고를 수도 있습니다.

2. 2

   "배색 패턴" 탭에서 액센트 후보를 본다

   보색·유사색·분할 보색·트라이어드·테트라드의 색과 명도별 톤 5단계가 표시됩니다. 색을 클릭하면 컬러 코드를 복사할 수 있습니다.

3. 3

   "명암비" 탭에서 글자색과 배경색을 확인한다

   글자색과 배경색을 넣으면 일반 글자·큰 글자·UI 요소의 AA／AAA 합격 여부가 목록으로 나옵니다. 못 미칠 때는 명도만 움직인 가장 가까운 합격 색이 제안됩니다.

4. 4

   "색각 시뮬레이션" 탭에서 구별하기 쉬운지 확인한다

   "기준색의 배색 불러오기"를 누르면 배색 패턴의 색이 한꺼번에 들어갑니다. 혼동하기 쉬운 조합이 남아 있지 않은지 확인하세요.

5. 5

   공유 URL이나 복사로 결과를 남긴다

   입력한 색은 공유 URL에 남으므로 팀에 배색안을 보낼 때 편리합니다. 판정 결과나 배색을 텍스트로 한꺼번에 복사할 수도 있습니다.

보색 잔상을 몸으로 느껴 보고 싶다면 색 잔상 착시 도구도 참고가 됩니다. 보색끼리 나란히 두었을 때 눈이 번쩍거리는 이유를 체감으로 알 수 있습니다.

자주 묻는 질문

배색의 70:25:5 법칙이란 무엇인가요?

베이스 컬러를 약 70%, 메인 컬러를 약 25%, 액센트 컬러를 약 5%의 면적으로 쓰면 배색이 정돈되기 쉽다는 기준입니다. 숫자를 엄격히 지킬 필요는 없고, 베이스가 압도적으로 넓고 돋보이게 하고 싶은 색일수록 면적을 작게 한다는 생각이 중요합니다. 60:30:10 법칙이라고도 합니다.

배색은 몇 가지 색까지 하는 것이 좋나요?

베이스·메인·액센트 3가지 색에 본문 글자색을 더한 4가지 색이 기본입니다. 그래프 색 구분 등으로 색이 더 필요할 때는 명도와 채도(톤)를 맞추고 색상만 바꾸면 색이 늘어도 정돈되어 보입니다.

메인 컬러와 액센트 컬러의 차이는 무엇인가요?

메인 컬러는 배색 전체의 인상을 정하는 주인공 색으로, 제목이나 헤더 등 비교적 넓은 면적에 씁니다. 액센트 컬러는 시선을 모으기 위한 색으로, 버튼이나 강조할 숫자 등 아주 좁은 곳에만 씁니다. 액센트는 메인 컬러와 색상이 먼 색을 고르면 효과적입니다.

배색 센스가 없어도 예쁜 배색을 만들 수 있나요?

만들 수 있습니다. 색을 3가지로 줄이고, 70:25:5 면적비를 지키고, 톤을 맞추고, 글자와 배경의 명암비를 4.5:1 이상으로 한다는 규칙만 지켜도 배색 실패의 대부분을 막을 수 있습니다. 메인 컬러를 1가지 고르면 나머지는 색상환의 위치 관계로 기계적으로 고를 수 있습니다.

읽기 쉬운 글자색과 배경색 조합은?

흰 배경이라면 #333333이나 #1F2937 같은 진한 회색 글자가 읽기 쉬우며, 둘 다 명암비가 12:1 이상입니다. WCAG 2.1 기준으로는 본문 글자는 배경과의 비가 4.5:1 이상, 24px 이상의 큰 글자는 3:1 이상이 기준입니다. 연한 회색(#999999)은 흰 배경에서 2.84:1로 기준에 미치지 못합니다.

주황이나 노란 버튼에 흰 글자를 올려도 괜찮나요?

대부분의 경우 읽기 어려워집니다. 흰 글자와 주황(#FF7A00)은 2.61:1, 노랑(#FFFF00)은 1.07:1밖에 되지 않습니다. 버튼 색을 조금 어둡게 하거나 흰색 대신 진한 색 글자를 올리세요. #F59E0B 버튼에 #1F2937 글자라면 6.83:1이 됩니다.

보색을 쓰면 배색이 너무 화려해집니다. 어떻게 하면 되나요?

보색 한쪽의 면적을 작게 해서 액센트로만 쓰거나 어느 한쪽의 채도를 낮춥니다. 보색의 양옆을 쓰는 분할 보색으로 하면 눈에 띄면서도 덜 부딪칩니다. 보색끼리의 글자와 배경은 번쩍거리기 쉬우므로 글자에는 쓰지 않는 것이 무난합니다.

웹과 인쇄에서 같은 배색을 쓸 수 있나요?

기본적으로는 쓸 수 있지만, 화면의 색(RGB)에는 인쇄(CMYK)로 재현할 수 없는 선명한 색이 있으며 특히 밝은 청록이나 형광색은 탁하게 보입니다. 인쇄물은 인쇄소의 지정에 맞춰 CMYK로 색을 지정하고 시험 인쇄로 확인하세요. 배색 체커의 CMYK는 참고값이며 그대로 입고에 쓸 수는 없습니다.

색각 차이를 배려한 배색으로 하려면 어떻게 해야 하나요?

빨강과 초록처럼 밝기가 비슷한 조합을 피하고, 색뿐 아니라 명도 차이·아이콘·글자·선 모양으로도 구별할 수 있게 합니다. 흑백으로 해도 구별되는지 확인하면 대부분의 색각에서 구별할 수 있는지를 가늠하는 간단한 기준이 됩니다.