60-30-10 규칙
색을 나누는 가장 유용한 규칙이에요. 인테리어 디자인에서 나왔지만 어떤 프로젝트에도 통해요.
- 60%: 메인 색. 보통 뉴트럴 색이나 부드러운 톤이에요. 배경과 넓은 면을 채워요.
- 30%: 보조 색. 개성을 더해요. 블록, 메뉴, 가구에 쓰세요.
- 10%: 포인트 색. 가장 강렬한 색이에요. 버튼, 아이콘, 디테일에 쓰세요.
예를 들어 오프화이트 60%, 네이비 30%, 주황색 10%로 나눠 보세요.
정확하게 잴 필요는 없어요. 한 색이 이끌고, 한 색이 받쳐 주고, 한 색이 돋보이게 하는 게 핵심이에요.
뉴트럴 색의 역할
뉴트럴 색은 흰색, 검은색, 회색, 베이지, 크림색, 밝은 갈색 같은 색이에요. 거의 모든 색과 잘 어울려요.
눈을 쉬게 하고 강한 색을 돋보이게 해요. 뉴트럴 색이 없는 팔레트는 보통 피곤해 보여요.
- 흰색과 오프화이트: 깨끗함과 여유.
- 회색: 현대적이고 절제된 느낌. 팔레트의 나머지 색에 맞춰 따뜻한 회색이나 차가운 회색을 고르세요.
- 베이지와 모래색: 따뜻하고 자연스러운 느낌.
- 검은색이나 거의 검은색: 우아함과 대비. 글자에는 순수한 검은색보다 아주 진한 회색이 보통 눈이 더 편해요.
온도로 조합하기
색은 따뜻한 색(빨강, 주황, 노랑)과 차가운 색(파랑, 초록, 보라)으로 나뉘어요. 간단한 조합 방법은 세 가지예요.
- 모두 따뜻한 색: 아늑하고 활기차요. 음식점이나 친근한 브랜드에 잘 맞아요.
- 모두 차가운 색: 차분하고 전문적이에요. 의료, IT, 금융 분야에 잘 맞아요.
- 차가운 바탕에 따뜻한 포인트: 가장 활용도가 높아요. 차분한 배경 위에서 따뜻한 포인트가 시선을 끌어요.
메인 색 없이 강한 따뜻한 색과 차가운 색을 한꺼번에 많이 섞으면 보통 실패해요.
글자의 대비
아무리 예쁜 색도 글자를 읽을 수 없으면 소용없어요. 글자와 배경의 대비는 가독성과 접근성의 핵심이에요.
- 밝은 배경에는 어두운 글자를, 어두운 배경에는 밝은 글자를 쓰세요.
- 흰 바탕에 노란색, 연두색, 밝은 회색 글자는 피하세요.
- 빨강 위의 초록처럼 채도 높은 보색끼리 겹치지 마세요. 눈이 아른거리고 피로해져요.
- WCAG 기준은 일반 글자에 최소 4.5:1, 큰 글자에 3:1의 대비율을 요구해요.
명도 대비 검사 도구로 어떤 색 조합이든 확인해 보세요.
실패 없는 색 조합 15가지
이 조합들은 안심하고 시작하기 좋아요. 기본으로 삼고 필요에 따라 뉴트럴 색이나 포인트 색을 더하세요.
- 네이비와 크림색: 클래식하고 진지하며 읽기 쉬워요.
- 검은색과 금색: 고급스럽고 우아해요.
- 파란색과 주황색: 보색이라 에너지가 넘쳐요.
- 숲속 초록과 베이지: 자연스럽고 차분해요.
- 분홍색과 차콜 그레이: 현대적이고 균형 잡혀 있어요.
- 노란색과 검은색: 대비가 가장 강해서 경고 표시에 딱이에요.
- 버건디와 모래색: 따뜻하고 세련돼요.
- 터키석색과 코랄: 산뜻하고 여름 느낌이 나요.
- 보라색과 연한 라일락: 단색 배색으로 창의적인 느낌이에요.
- 갈색과 세이지 그린: 흙 느낌이 나서 자연주의 브랜드에 잘 맞아요.
- 회색과 피치색: 부드럽고 친근해요.
- 페트롤 블루와 연노랑: 차분하면서 밝은 느낌이 살짝 더해져요.
- 테라코타와 오프화이트: 따뜻하고 지중해 느낌이에요.
- 진한 청록과 머스터드: 레트로하고 개성이 넘쳐요.
- 흰색과 빨간색: 직접적이고 활기차며 눈에 잘 띄어요.
HEX 코드가 담긴 더 많은 아이디어는 색 조합 페이지에서 확인하세요.
색깔별로 어울리는 색
메인 색이 이미 정해져 있다면 이 목록으로 빠르게 시작해 보세요.
- 빨간색: 흰색, 검은색, 회색, 네이비, 베이지. 과감하게 가려면 분홍색이나 주황색.
- 주황색: 네이비, 터키석색, 흰색, 크림색, 갈색.
- 노란색: 회색, 검은색, 네이비, 흰색. 머스터드 옐로는 진초록과 잘 어울려요.
- 초록색: 베이지, 흰색, 갈색, 금색, 연한 분홍.
- 파란색: 흰색, 주황색, 회색, 노란색, 코랄. 네이비는 거의 뉴트럴 색처럼 쓸 수 있어요.
- 보라색: 회색, 라일락, 금색, 세이지 그린, 흰색.
- 분홍색: 회색, 네이비, 올리브색, 흰색, 금색.
- 갈색: 크림색, 초록색, 페트롤 블루, 주황색, 오프화이트.
거의 모든 목록에 뉴트럴 색이 들어 있는 걸 볼 수 있어요. 강한 색을 조합하는 가장 안전한 방법이에요.
나만의 색 조합 만들기
- 전하고 싶은 느낌에 맞춰 메인 색을 고르세요.
- 색상환에서 보조 색을 찾으세요. 차분하게 하려면 옆의 색을, 눈에 띄게 하려면 반대편 색을 고르세요.
- 뉴트럴 색을 한두 개 더하세요.
- 가장 중요한 부분에 쓸 포인트 색을 하나만 고르세요.
- 웹페이지, 슬라이드, 방 사진 같은 실제 예시에 팔레트를 적용해 보세요.
고민될 때는 색을 줄이세요. 거의 모든 프로젝트에 3~5가지 색이면 충분해요.
자주 하는 배색 실수
- 색을 너무 많이 쓰기. 산만해 보이고 아무것도 돋보이지 않아요.
- 모든 색을 같은 비중으로 쓰기. 메인 색이 없으면 눈이 어디를 봐야 할지 몰라요.
- 대비를 잊기. 읽을 수 없는 글자나 아무도 못 보는 버튼이 생겨요.
- 모든 색의 채도를 높이기. 너무 선명한 색은 피곤해요. 부드러운 톤과 함께 쓰세요.
- 맥락을 무시하기. 색은 햇빛 아래, 화면, 인쇄물에서 다르게 보여요.
- 그대로 따라 하기. 한 브랜드에 맞는 팔레트가 내 대상에게는 안 맞을 수 있어요.
- 온도가 다른 뉴트럴 색 섞기. 차가운 회색 옆의 따뜻한 베이지는 탁해 보일 수 있어요. 같은 계열의 뉴트럴 색을 고르세요.
- 여러 화면에서 확인하지 않기. 컴퓨터에서는 멋진 색이 휴대폰에서는 칙칙해 보일 수 있어요. 꼭 여러 기기에서 확인하세요.