Web Guide홈페이지 색상브랜드 컬러 웹컬러 시스템
브랜드 컬러를 웹에 옮길 때 알아야 할 것
명함에서 잘 어울리던 색이 홈페이지에서는 눈이 아프거나 밋밋해집니다.
인쇄와 화면은 색을 만드는 방식이 다르고, 웹에서는 색이 배경 · 버튼 · 링크 · 상태 표시로 역할이 나뉘기 때문입니다.
인쇄용 색 견본에서 화면용 코드를 고르는 과정
STEP 01
주색, 보조색, 강조색의 역할 분리
브랜드 색 하나를 모든 곳에 쓰면 어디가 중요한지 알 수 없습니다. 주색은 헤더 · 제목처럼 정체성을 드러내는 곳에, 보조색은 배경과 구분선 같은 넓은 영역에, 강조색은 버튼과 링크처럼 눌러야 하는 곳에만 씁니다.
주색
보조색
강조색
역할별로 나눈 웹 색상 시스템
STEP 02
인쇄 색을 화면 색으로
CMYK나 팬톤 값을 그대로 화면의 RGB로 바꾸면 채도와 명도가 달라집니다. 화면에서 브랜드 인상이 유지되도록 조정한 웹용 HEX 코드를 정합니다.
이 코드를 브랜드 가이드에 추가해 두면 배너나 SNS에서도 일관됩니다.
STEP 03
회색도 정해야 한다
본문 글자, 보조 설명, 구분선, 배경에 쓰이는 회색은 순수한 회색보다 브랜드 색을 약간 섞은 회색이 전체와 어울립니다.
회색 단계를 4~5개로 정해 두면 페이지마다 다른 회색이 뒤섞이는 일이 없어집니다.
STEP 04
의미 색은 브랜드와 별개로
성공(초록), 경고(노랑), 오류(빨강)처럼 상태를 나타내는 색은 브랜드 색과 별도로 정합니다.
브랜드 색이 빨강이라면 오류 메시지가 브랜드 색과 헷갈리지 않도록 톤을 구분해야 합니다.
CHECK POINT
□ 주색 · 보조색 · 강조색의 역할을 나누었는가
□ 웹용 색상 코드가 브랜드 가이드에 정의되어 있는가
□ 상태(성공 · 경고 · 오류) 색이 브랜드 색과 구분되는가
#홈페이지 색상
#브랜드 컬러
#컬러 시스템
#HEX 코드
#회색 단계
#상태 색