헥스 코드와 함께 32가지 웹사이트 색상 조합, We.Inc 템플릿 디자인에서 가져온 팔레트, 그리고 전환을 돕는 색상 조합 만들기: 행동 유도에 예약된 강조색 하나를 더한 차분한 기본 팔레트, 업종별 예시, 접근성 확인.
모든 곳에서 통하는 단일 색상은 없습니다. 가장 좋은 버튼 색상은 페이지와 강한 대비를 이루고 다른 곳에는 쓰이지 않아 시선이 바로 향하는 색상입니다.
일반적으로 흰색이나 미색 배경과 어두운 글자색을 기본으로 하고, 브랜드 기본색 하나와 행동 유도용 강조색 하나를 더합니다. 여기에 성공 및 오류 메시지용 의미 색상을 더할 수 있습니다. 그보다 색상이 많으면 시각적 위계가 약해지는 경우가 많습니다.
색상에 대한 연상은 존재하지만 문화, 업종, 맥락에 따라 달라지며 널리 알려진 주장 중에는 과장된 것도 많습니다. 전환율에 꾸준히 영향을 주는 요소는 대비, 가독성, 그리고 원하는 행동이 시각적으로 분명한지 여부입니다.
산업 분야의 구매자는 명확성과 신뢰를 중요하게 여깁니다. 네이비, 차콜, 스틸 그레이를 기본으로 하고 안전 주황색이나 노란색, 선명한 파란색처럼 강한 강조색 하나를 쓰면 잘 맞습니다. 사양서, 견적 요청 버튼, 전화번호에 강조색을 적용해 쉽게 찾을 수 있도록 하세요.
WebAIM의 도구 같은 대비 검사기를 사용하세요. WCAG 2.2 AA 기준은 일반 텍스트에 최소 4.5:1, 큰 텍스트와 버튼 테두리 및 입력란 같은 주요 인터페이스 요소에 3:1의 대비를 요구합니다.
전환율을 가장 높이는 단일 색상은 없습니다. 중요한 것은 버튼이 페이지에서 얼마나 눈에 띄는지입니다. 전환을 돕는 색상 조합은 차분하고 일관된 기본색을 바탕으로, 사용자가 취하길 바라는 행동에만 쓰는 대비 강한 강조색 하나를 둡니다.
그러니 '어떤 색이 좋을까?' 대신 '가장 중요한 버튼이 페이지의 다른 요소와 확실히 구별될까?'라고 물어보세요. 이 가이드는 그 원칙에 따라 색상 조합을 만드는 방법을 설명합니다.
이 팔레트는 We.Inc 자체 템플릿 디자인의 소스에서 가져온 것입니다(각 디자인 미리보기에서 가장 많이 쓰인 색상 4가지, 미리보기 프레임의 일반 회색 제외). 실제 고객 사이트가 아닌 템플릿 디자인이며, 전환율에 관한 어떤 주장도 하지 않습니다. 헥스 코드를 헥스 색상 선택기에 복사하면 색상과 RGB/HSL 값을 확인할 수 있고, 텍스트와 배경의 모든 조합은 사용 전에 색상 대비 검사기에서 확인하세요.
| We.Inc 템플릿 디자인 | 스타일 | 색상 (헥스) | 조합 |
|---|---|---|---|
| Atlas Builders | 건설 / 트레이드 | #101d2c #0b1521 #f2a614 #d18f0a | 짙은 네이비 기본, 호박색 행동 유도 |
| Summit Trades | 트레이드 | #0e2436 #e4671e #16222e #f6eeec | 네이비와 안전 주황 |
| Ironpeak Roofing | 지붕 | #e4671e #0e2436 #17415f #16222e | 주황 주도, 네이비 구조 |
| Ridgewater Plumbing | 배관 | #b08544 #d8401f #f2ede3 #c9a063 | 따뜻한 크림 위의 황동과 빨강 |
| Sunward Solar | 태양광 | #0b1f3a #f5a524 #d98a0b #fff6e6 | 미드나잇 블루와 선 골드 |
| Hookline Towing | 견인 | #0e0e0e #ffc400 #f4f1ea #161616 | 블랙과 고시인성 노랑 |
| Redline Auto Group | 자동차 딜러 | #e3262e #0e0f11 #eeeeee #17191c | 거의 검정 위의 레이싱 레드 |
| Maple Street Motors | 자동차 수리 | #1f4d3a #1b1b1b #f2b134 #e6efe9 | 포레스트 그린과 머스터드 |
| Freshpile Carpet Cleaning | 청소 | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | 로열 네이비 위의 밝은 노랑 |
| Tideline Pressure Washing | 외부 청소 | #0b1b2b #3fd0c9 #f3f6f5 #020617 | 짙은 네이비와 아쿠아 |
| Mowline Lawn Care | 잔디 관리 | #eef3e6 #c6f24e #0f1410 #1a2a17 | 연한 초록 기본, 라임 강조 |
| Fairway Lawn Co. | 조경 | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | 크림, 짙은 초록, 부드러운 금색 |
| Brightside Dental | 치과 | #10312e #3f605c #0e5f57 #0a4841 | 차분한 청록 계열 |
| Meadowpaw Veterinary | 동물 병원 | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | 연한 민트 위의 뮤트 청록 |
| Vibrant Wellness | 웰니스 클리닉 | #25382c #eef2e6 #7c9a7e #3f6b4a | 세이지와 포레스트 |
| Kinfolk Home Care | 홈 케어 | #0f3d2e #f4c542 #fffdf6 #0a2e22 | 소나무 초록과 따뜻한 노랑 |
| Lumora | 의료 | #c8a97e #182c41 #0b1220 #0e1a26 | 미드나잇 네이비와 샌드 골드 |
| Sterling & Vance LLP | 법률 회사 | #8a93a2 #b08a4f #0b0e14 #f6eeec | 슬레이트, 브론즈, 잉크 |
| Harborview Wealth Partners | 재정 상담 | #102a43 #b08d57 #d9bf8f #faf8f4 | 아이보리 위의 네이비와 금색 |
| Harborline Insurance Agency | 보험 | #0f2742 #5fd3c9 #17a398 #0b1e33 | 네이비와 청록 |
| Larkfield Partners | 컨설팅 | #1f4d3f #f4f1ea #14181c #4a5560 | 종이 위의 보틀 그린 |
| Keystone Realty | 부동산 | #f6eeec #7a2e2a #59606b #e9f0ef | 블러시 기본과 옥스블러드 |
| Lucia Trattoria | 레스토랑 | #e9c9a8 #f7f1e6 #efe6d4 #23301f | 따뜻한 샌드와 올리브 블랙 |
| Ember & Roast | 카페 / 레스토랑 | #ede6dc #c9642f #14100d #f6eeec | 오트, 번트 오렌지, 에스프레소 |
| Kilnhouse Coffee | 커피숍 | #2b1d16 #c65d3b #f3ebe0 #fff8ef | 로스트 브라운과 테라코타 |
| Parcel No. 9 Wines | 와이너리 | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | 클라레와 로즈 |
| Petalry Florist | 꽃집 | #3e1f2b #b4546c #fbf5f2 #f3e3dd | 플럼과 더스티 핑크 |
| Hollow Oak Farm Shop | 농장 상점 | #24301f #f6f1e4 #5e7f3a #e3a33b | 모스, 크림, 허니 |
| Suds & Scruff | 반려동물 미용 | #3b1740 #ffd84d #ff8fab #fff8e7 | 오버진, 노랑, 핑크 |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | 바이올렛과 코랄 |
| Mast Security | 보안 | #1e2628 #34e0a1 #e7ede9 #8d9a97 | 그래파이트와 민트 |
| Afterglow Sound | 이벤트 / 음악 | #efeaff #f472b6 #ec4899 #8b5cf6 | 라벤더, 핑크, 퍼플 |
대부분에서 보이는 패턴: 짙거나 연한 기본색에 하나의 채도 높은 강조색(호박, 주황, 노랑, 라임 또는 코랄)을 더합니다. 이것이 아래에서 설명하는 '차분한 기본, 단일 행동 유도 색상' 구조와 동일합니다.
색상 심리를 다루는 글에서는 파랑은 신뢰, 빨강은 긴급함, 초록은 성장을 뜻한다고 자주 말합니다. 일반적인 연상에 어느 정도 근거가 있더라도 문화와 업종, 맥락에 따라 크게 달라집니다. 빨강은 어떤 상황에서는 경고를, 다른 상황에서는 축하를 뜻합니다. 초록도 '진행', '친환경', '돈'을 의미할 수 있습니다.
더 확실한 근거가 있는 것은 고립 효과(폰 레스토르프 효과라고도 함)입니다. 주변과 다른 요소는 눈에 띄고 기억될 가능성이 더 높습니다. 파랑과 흰색으로 된 페이지에서 유일하게 주황색인 버튼은 눈에 들어옵니다. 페이지 전체가 주황색이면 같은 색 버튼은 눈에 띄지 않습니다.
이 원칙에서 업종을 막론하고 적용할 수 있는 두 가지 규칙이 나옵니다.
인테리어 디자인에서 쓰는 60-30-10 비율은 웹사이트에도 잘 맞습니다.
| 비율 | 역할 | 흔한 선택 |
|---|---|---|
| ~60% | 배경과 기본색 | 흰색, 미색, 아주 연한 회색 또는 어두운 테마의 짙은 색 |
| ~30% | 브랜드와 구조 | 헤더, 내비게이션, 섹션 배경에 쓰는 브랜드 기본색 |
| ~10% | 강조 / 행동 | 버튼, 주요 링크, 클릭을 유도할 핵심 요소 |
어두운 글자색(순수한 검정 대신 검정에 가까운 색이나 짙은 회색이 흔함)과 의미 색상도 더하세요. 성공에는 초록, 오류에는 빨강, 경고에는 호박색을 씁니다. '지금 구매' 버튼이 오류 메시지로 오해되지 않도록 이런 의미 색상은 주요 버튼에 사용하지 마세요.
로고가 있다면 주요 색상을 기본색으로 삼으세요. 없다면 업종에 어울리는 색(아래 표 참고) 중 오래 사용해도 괜찮은 색을 고릅니다.
색상환을 살펴보세요. 서로 반대편에 있는 보색은 가장 강한 대비를 만듭니다. 파랑과 주황, 보라와 노랑, 청록과 코랄이 그 예입니다. 브랜드 색이 파랑이라면 두 번째 파랑 계열보다 주황이나 따뜻한 노랑이 훨씬 잘 눈에 띕니다.
배경색, 카드 표면색, 테두리 회색, 글자색을 정합니다. 이 색들이 화면 대부분을 차지하므로 차분해야 합니다.
모든 텍스트와 버튼 색상 조합을 대비 검사기에 넣어 확인하세요(WebAIM 도구는 무료입니다). WCAG 2.2 AA 기준은 다음과 같습니다.
흰색 배경 위의 대비 낮은 회색 글자는 웹에서 가장 흔한 가독성 문제 중 하나입니다. 방문자가 제안을 읽기 어렵다면 버튼 색상은 큰 의미가 없습니다.
휴대폰을 야외에서 사용하거나 저가형 노트북 화면으로 확인하고, 사이트가 지원한다면 다크 모드에서도 팔레트를 점검하세요. 디자이너의 모니터에서는 세련돼 보이던 색상이 다른 화면에서는 흐릿해질 수 있습니다.
아래는 규칙이 아니라 합리적인 출발점입니다. 각 조합은 차분한 기본색과 대비되는 강조색 하나를 사용합니다.
| 업종 | 기본 및 주요 색상 | 행동 유도 강조색 | 효과가 있는 이유 |
|---|---|---|---|
| 제조 / 산업 | 네이비, 차콜, 스틸 그레이 | 안전 주황색 또는 노란색 | 진중하고 믿음직하며 '견적 요청'이 눈에 띔 |
| 의료 / 치과 | 흰색, 부드러운 파랑 또는 청록 | 따뜻한 코랄 또는 초록 | 깔끔하고 편안하며 예약 버튼이 돋보임 |
| 법률 / 금융 | 짙은 네이비 또는 포레스트 그린, 크림색 | 금색 또는 선명한 파랑 | 전통적인 신뢰감을 주면서 연락 행동이 분명함 |
| 음식점 / 식품 | 따뜻한 중간색, 짙은 빨강 또는 올리브 | 선명한 노랑 또는 주황 | 식욕을 돋우고 '주문'이나 '예약'이 분명함 |
| SaaS / 기술 | 흰색 또는 검정에 가까운 색, 인디고 또는 파랑 | 선명한 초록, 주황 또는 분홍 | 산뜻하고 '무료로 시작'이 높은 대비로 보임 |
| 뷰티 / 웰니스 | 블러시, 세이지, 크림색 | 짙은 플럼 또는 검정 | 부드러운 브랜드 분위기와 확신 있는 예약 버튼 |
| 주택 서비스(배관, HVAC, 지붕) | 흰색, 짙은 파랑 | 빨강 또는 주황 | 긴급 상황에서 빠르게 전화하도록 유도 |
| 이커머스 / 패션 | 주로 흰색과 검정 | 브랜드 강조색 하나 | 제품 사진이 색감을 담당하도록 함 |
특히 제조업에서는 구매자가 제품 또는 역량 소개 페이지에 들어와 사양서나 견적을 찾는 경우가 많습니다. 해당 페이지에서는 '견적 요청', '사양서 다운로드', 전화번호에만 강조색을 쓰세요.
초록색 로고, 제목, 아이콘, 히어로 배경, '무료 견적 받기' 버튼을 모두 사용하는 조경 회사 사이트를 떠올려 보세요. 브랜드 색은 잘 지켰지만 버튼이 배경 속에 묻힙니다.
해결 방법:
브랜드는 그대로지만 이제 화면에서 행동 유도 버튼이 가장 잘 보입니다.
트래픽이 충분하다면 버튼이나 강조색을 A/B 테스트하세요. 한 번에 한 요소만 바꾸고 의미 있는 결과를 얻을 만큼 오래 진행해야 합니다. 트래픽이 적은 사이트는 신뢰할 만한 결과에 도달하기 어려우므로 다음처럼 간단한 방법을 쓰세요.
색상은 페이지 전환율을 좌우하는 여러 요소 중 하나입니다. 나머지 요소는 전환율 높은 랜딩 페이지 사례 분석에서 확인할 수 있습니다. We.Inc에서는 '네이비와 회색에 주황색 견적 버튼'처럼 원하는 디자인을 채팅으로 설명하고, 템플릿을 살펴본 다음 화면에서 직접 또는 코드로 색상을 다듬을 수 있습니다.
무료로 시작하기 · 신용카드 필요 없음