홈페이지 브랜드 컬러 고르는 법, 대표색·보조색 정하는 4단계

홈페이지 브랜드 컬러는 대표색 하나와 보조색 하나, 무채색 몇 단계만 정하고 쓰임새 규칙을 지키면 됩니다. 이 글에서는 로고에서 대표색을 찾는 방법부터 색을 쓰는 비율, 글자가 잘 읽히는지 확인하는 명도 대비 기준까지 순서대로 정리했습니다.

홈페이지 브랜드 컬러가 하는 일

브랜드 컬러는 방문자가 회사를 기억하는 단서이면서, 화면에서 무엇을 눌러야 하는지 알려 주는 신호입니다. 같은 파란색이 로고와 버튼과 링크에 반복되면 방문자는 따로 설명을 듣지 않아도 "이 색은 누를 수 있는 것"이라고 익히게 됩니다.

반대로 페이지마다 색이 달라지면 회사 인상도 흐려지고 버튼도 눈에 덜 띕니다. 그래서 브랜드 컬러를 정한다는 것은 예쁜 색을 고르는 일이라기보다 어떤 색을 어디에 쓸지 규칙을 정하는 일에 가깝습니다.

대표색·보조색·무채색의 역할

대표색은 로고와 핵심 버튼, 주요 제목 강조에 씁니다. 보조색은 대표색과 구분되는 색으로, 할인·신규 같은 짧은 강조나 그래프의 두 번째 항목처럼 대표색만으로 부족한 곳에 씁니다. 무채색은 본문 글자, 배경, 테두리, 비활성 버튼처럼 화면의 대부분을 차지하는 부분을 맡습니다.

브랜드 컬러를 정하는 4단계

처음부터 색상표를 펼쳐 놓고 고르기보다, 이미 가진 자산에서 출발하면 결정이 빨라집니다. 아래 순서대로 진행해 보세요.

1. 로고에서 대표색 찾기: 로고, 간판, 명함, 제품 포장에 이미 쓰는 색이 있다면 그 색을 대표색 후보로 둡니다. 새로운 색을 만들면 오프라인 자료와 홈페이지 인상이 어긋납니다.
2. 보조색 하나 더하기: 대표색과 밝기나 색상이 충분히 다른 색을 하나만 고릅니다. 보조색이 두세 개로 늘어나면 강조가 서로 부딪칩니다.
3. 무채색 단계 정하기: 진한 글자색, 보조 글자색, 테두리색, 연한 배경색처럼 회색을 3~5단계로 정합니다. 순수한 검정 대신 아주 진한 회색을 본문 글자로 쓰면 눈이 덜 피곤합니다.
4. 쓰임새 규칙 적기: "버튼은 대표색 배경에 흰 글자", "링크는 대표색 글자에 밑줄"처럼 요소별로 어떤 색을 쓸지 한 장에 적어 둡니다.

그림의 네 번째 단계가 가장 자주 빠집니다. 색 이름과 코드만 정해 두고 쓰임새를 적지 않으면, 나중에 페이지를 추가하는 사람이 그때그때 다른 색을 고르게 됩니다. 로고 파일과 함께 색 코드를 정리하는 방법은 로고·파비콘 준비 글에서도 다뤘습니다.

색을 쓰는 비율과 규칙

디자인 실무에서는 바탕색을 넓게, 대표색을 그보다 적게, 강조색을 아주 조금 쓰는 배분을 흔히 기준으로 삼습니다. 정확한 비율보다 중요한 것은 화면의 대부분이 무채색이고 대표색은 눈길이 가야 할 곳에만 있다는 원칙입니다.

아래 표는 홈페이지의 주요 요소에 어떤 색을 쓰면 좋은지 비교한 것입니다.

요소	권장 색	피할 것
본문 글자	진한 회색 무채색	대표색으로 긴 문단 쓰기
핵심 버튼	대표색 배경, 흰 글자	페이지마다 다른 버튼 색
링크	대표색 글자와 밑줄	본문과 같은 색, 밑줄 없음
짧은 강조	보조색 배지나 글자	한 화면에 강조 여러 곳
배경 구역	아주 연한 대표색이나 회색	진한 원색 배경 위 긴 글

사진과 브랜드 컬러가 부딪칠 때

첫 화면 사진의 색이 강하면 대표색 버튼이 묻힙니다. 이럴 때는 사진 위에 어두운 반투명 층을 깔거나, 버튼을 사진 밖 흰 영역에 두면 해결됩니다. 사진을 고를 때부터 대표색과 어울리는 색감인지 함께 보는 것도 방법입니다.

명도 대비 기준으로 읽기 쉬운지 점검하기

브랜드 컬러를 확정하기 전에 글자와 배경의 명도 대비를 꼭 재 봐야 합니다. W3C의 웹 콘텐츠 접근성 지침(WCAG) 해설에 따르면 일반 글자는 배경과의 대비가 4.5:1 이상, 큰 글자는 3:1 이상이어야 합니다. 기준과 큰 글자의 정의는 W3C 명도 대비(최소) 기준 해설에서 확인할 수 있습니다.

연한 하늘색이나 노란색처럼 밝은 대표색은 흰 글자를 올리면 대비가 부족한 경우가 많습니다. 이때는 버튼에 쓸 때만 조금 더 진한 같은 계열 색을 따로 정해 두면 인상을 유지하면서 기준도 맞출 수 있습니다. 색 대비를 포함한 기본 점검은 웹 접근성 기본 점검법에 정리했습니다.

그림의 다섯 항목 가운데 "색만으로 구분하지 않기"도 중요합니다. 문의 폼의 필수 항목을 빨간색으로만 표시하면 색을 구분하기 어려운 방문자는 알아보지 못하므로, 별표나 "필수" 같은 글자를 함께 둡니다.

브랜드 컬러를 정할 때 자주 하는 실수

• 마음에 드는 색을 여러 개 골라 페이지마다 다르게 쓴다.
• 모니터에서만 보고 정해 휴대폰 밝은 화면에서 글자가 흐려진다.
• 색 코드를 기록하지 않아 수정할 때마다 비슷한 다른 색이 생긴다.
• 대표색을 본문 긴 글에 써서 오히려 읽기 어렵게 만든다.

네 가지 모두 색을 적게 정하고, 코드와 쓰임새를 문서로 남기면 예방할 수 있습니다.

디코랩이 브랜드 컬러 작업을 돕는 방식

디코랩은 회사 홈페이지를 제작할 때 로고와 기존 자료를 바탕으로 대표색과 보조색을 제안하고, 버튼·링크·배경에 쓰는 규칙까지 함께 정합니다. 업종별 색 사용 예는 디자인 샘플 게시판에서, 제작 범위는 회사 홈페이지 제작 안내에서 볼 수 있습니다.

자주 묻는 질문

로고 색이 없거나 흑백이면 어떻게 정하나요?

업종의 분위기와 경쟁사와의 구분을 기준으로 후보를 두세 개 만든 뒤, 실제 버튼과 제목에 적용한 화면으로 비교해 고르는 것이 좋습니다. 색 견본만 보고 고르면 화면에 올렸을 때 인상이 달라질 수 있습니다.

브랜드 컬러는 몇 개가 적당한가요?

대표색 하나와 보조색 하나에 무채색 몇 단계면 대부분의 홈페이지에 충분합니다. 색이 늘어날수록 어떤 것이 중요한지 구분하기 어려워집니다.

명도 대비는 어떻게 재나요?

글자색과 배경색 코드를 넣으면 대비 비율을 계산해 주는 도구가 여럿 있습니다. 결과가 4.5:1에 조금 못 미치면 반올림하지 않고 기준 미달로 봅니다.

어두운 화면 모드에서도 같은 색을 써야 하나요?

같은 대표색을 그대로 쓰면 어두운 배경에서 너무 진하거나 흐리게 보일 수 있습니다. 같은 계열에서 밝기만 조정한 색을 따로 정해 두는 편이 안전합니다.

지금 홈페이지의 색이 어수선하거나 로고와 어울리지 않는다고 느낀다면 사이트 주소와 로고 파일을 적어 디코랩 프로젝트 문의로 보내 주세요.