웹 컬러 팔레트 & 팬톤 가이드 핵심 요약

웹사이트 UI 디자인, PPT 템플릿, 패션·인테리어 기획에서 색상 배색은 브랜드의 인상과 가독성을 결정짓는 가장 핵심적인 시각 요소입니다. W3Schools 컬러 가이드(w3schools.com/colors)와 팬톤(Pantone) 패션 컬러 트렌드 보고서를 기반으로, 웹 표준 16진수(HEX) 색상 코드와 RGB 값을 한눈에 확인하고 바로 복사하여 HTML/CSS에 적용할 수 있는 컬러 가이드를 정리했습니다.

W3Schools 컬러 피커 공식 사이트 바로가기

팬톤 트렌드 컬러 수록 | HTML/CSS 16진수 HEX 코드표 제공 | 원클릭 색상 피커 연동

대표 트렌드 컬러 팔레트 (HEX 코드)

메리골드 (Marigold)
#FDAC53
팬톤 14-1050 (따뜻한 금잔화 오렌지)
세룰리안 (Cerulean)
#9BB7D4
팬톤 15-4020 (맑고 차분한 하늘빛)
러스트 (Rust)
#B55A30
팬톤 18-1248 (깊이 있는 대지 브라운)
일루미네이팅 (Illuminating)
#F5DF4D
팬톤 13-0647 (희망찬 밝은 옐로우)
프렌치 블루 (French Blue)
#0072B5
팬톤 18-4140 (선명하고 세련된 블루)
민트 (Mint)
#00A170
팬톤 16-5938 (상쾌하고 신선한 그린)
얼티밋 그레이 (Ultimate Gray)
#939597
팬톤 17-5104 (단단하고 중후한 그레이)
번트 코랄 (Burnt Coral)
#E9897E
팬톤 16-1529 (은은한 산호 코랄)

웹 디자이너를 위한 60-30-10 배색 황금률

  • 주조색 (60%): 웹사이트 배경 및 기본 바탕색. 주로 화이트, 연그레이(#F8F9FA) 등 눈의 피로를 줄여주는 중립 색상 권장.
  • 보조색 (30%): 브랜드 아이덴티티를 나타내는 메인 컬러 (네이비, 소프트 블루, 딥 그린 등)로 카드, 헤더, 사이드바에 적용.
  • 강조색 (10%): 구매하기 버튼, 회원가입 CTA 버튼, 이벤트 태그 등 방문자의 시선을 즉각 사로잡는 포인트 색상 (메리골드, 코랄, 오렌지 등).

자주 묻는 질문 (FAQ)

Q. 16진수 HEX 코드와 RGB 코드는 어떻게 변환하나요?

16진수 코드는 빨강(RR), 초록(GG), 파랑(BB) 값을 16진수 2자리씩 나타낸 것입니다. 예컨대 #FDAC53은 RGB(253, 172, 83)과 완벽히 동일하며, W3Schools 사이트의 컬러 피커에서 슬라이더 조절로 상호 변환 코드를 복사할 수 있습니다.

Q. 웹 접근성(W3C) 명도 대비는 어떻게 확인하나요?

본문 텍스트와 배경색의 명도 대비(Contrast Ratio)가 최소 4.5:1 이상이어야 시력이 약한 사용자도 텍스트를 편안하게 읽을 수 있습니다. 일루미네이팅 같은 밝은 노란색 위에는 흰색 글씨 대신 짙은 다크 차콜(#333333) 글씨를 써야 접근성 기준을 충족합니다.

Q. CSS에서 색상 코드를 어떻게 적용하나요?

CSS 스타일시트에서 color: #0072B5;(글자색) 또는 background-color: #FDAC53;(배경색) 형태로 샵(#) 기호 뒤에 6자리 HEX 코드를 입력하면 브라우저에서 동일한 색상으로 즉시 렌더링됩니다.