웹사이트 컬러 팔레트

웹사이트에서는 색마다 할 일이 있어요. 배경, 텍스트, 버튼, 링크, 알림이에요. 팔레트 12가지는 이 역할에 맞춰 밝거나 어두운 배경, 읽기 쉬운 텍스트 색, 버튼용 포인트 컬러로 구성했어요. HEX 코드를 CSS나 웹사이트 빌더에 바로 복사하세요.

깔끔한 SaaS 블루

거의 흰 배경, 아주 짙은 남색 텍스트, 선명한 파란 버튼이에요.

차분한 기업형

법률 사무소, 컨설팅, 제조 기업에 어울려요.

따뜻한 쇼핑몰

따뜻한 배경 위에서 오렌지가 구매 버튼을 돋보이게 해요.

그린 포인트 다크 모드

겹겹의 어두운 배경, 밝은 텍스트, 액션용 그린 포인트예요.

내추럴 오가닉

자연식품 쇼핑몰, 농장, 웰니스 사이트에 어울려요.

친근한 파스텔

다정한 느낌이에요. 짙은 블루 그레이가 텍스트 가독성을 지켜 줘요.

레드 포인트 에디토리얼

블로그, 매거진, 미디어에 좋아요. 레드로 링크와 헤드라인을 강조해요.

테크 퍼플

디지털 제품, 온라인 강의, AI 도구에서 자주 보여요.

터쿼이즈와 코랄

보색 관계의 포인트 두 가지예요. 하나는 버튼, 하나는 알림에 쓰세요.

다크 럭셔리

사진이 주인공인 호텔, 레스토랑, 프리미엄 브랜드에 어울려요.

헬스 앤 웰니스

깔끔하고 차분해요. 병원과 테라피 사이트에 좋아요.

샌드와 틸

따뜻하면서도 신뢰감이 있어요. 여행, 부동산, 카페에 어울려요.

색을 누르면 HEX 코드가 복사돼요. 연필 아이콘을 누르면 편집기에서 팔레트를 열어 수정할 수 있어요.

60-30-10 법칙을 적용하세요

주조색(보통 배경)은 페이지의 약 60%, 보조색은 30%(섹션, 카드, 헤더), 포인트 컬러는 나머지 10%에 쓰세요. 포인트 컬러는 버튼과 링크에만 쓰는 게 좋아요. 그래야 사용자가 어디를 클릭할지 바로 알아요.

텍스트 대비를 확인하세요

WCAG 접근성 지침은 일반 텍스트에 최소 4.5:1의 대비를 요구해요. 흰 바탕의 연회색 글씨는 세련돼 보여도 읽기 어려워요. 햇빛 아래 모바일에서는 더 그래요. 공개 전에 대비 검사 도구로 확인하세요.

상태와 알림 색을 정하세요

브랜드 팔레트 외에도 웹사이트에는 오류(빨강), 성공(초록), 경고(노랑이나 주황) 색이 필요해요. 팔레트와 어울리는 톤을 골라 폼과 메시지에 항상 같은 방식으로 쓰세요.

이 팔레트에 쓰인 색

화이트 스모크 플래티넘 블루 블랙 흰색 슬레이트 그레이 린넨 샴페인 코랄 마호가니 숯검정 흑단색 오닉스 오프화이트 에크루 세이지 그린 파스텔 핑크

자주 묻는 질문

웹사이트에는 몇 가지 색이 필요한가요?

보통 서너 가지면 충분해요. 배경색, 텍스트 색, 메인 컬러, 포인트 컬러에 알림 색을 더하면 돼요.

웹사이트 버튼에는 어떤 색이 가장 좋나요?

정답인 색은 없어요. 중요한 건 버튼이 배경과 확실히 대비되고, 그 색을 페이지의 다른 요소에 쓰지 않는 거예요.

웹사이트에 컬러 팔레트를 어떻게 적용하나요?

HEX 코드를 CSS 색상 변수에 붙여 넣거나 WordPress, Wix, Shopify 같은 빌더의 전역 색상 설정에 입력하세요.