자주 쓰는 색상 html 코드 요약

✅ 기본 텍스트/테두리용 색상

용도색상명코드설명

기본 텍스트	다크 그레이	#333333	완전 검정보다 부드러움, 본문에 적합
테두리 (박스 외곽선)	라이트 그레이	#cccccc	목차·요약박스 테두리로 무난
링크 기본색	블루 (구글/네이버 스타일)	#1976d2	대표적인 링크 파랑
링크 호버색	오렌지	#fb8c00	마우스 올렸을 때 강조용
강조 텍스트	레드	#d32f2f	예약 마감, 주의사항 등 경고용

---

✅ 박스 배경용 추천 색상 (선택사항)

용도색상명코드설명

부드러운 강조배경	연회색	#f5f5f5	목차, 정리박스 배경
알림/주의 박스	라이트 오렌지	#fff3e0	경고 없이도 눈에 띄는 정보
강조 성공/안내	연초록	#e8f5e9	긍정적 느낌, 추천사항
강조 문단 텍스트배경	라이트 민트	#e3f2fd	가볍고 부드러운 하이라이트

/* 링크 전체 색상 제어 */ a { color: #1976d2; text-decoration: none; } a:hover { color: #fb8c00; }

 

예약 마감 주의!

✅ 자주 쓰는 색상 코드 요약표

용도이름색상 코드설명

🔲 텍스트 (기본)	다크 그레이	#333333	눈에 편한 검정 느낌
🔲 본문 배경	흰색	#ffffff	완전한 화이트
🔳 박스 배경	연회색	#f5f5f5	블로그 정보박스 배경에 많이 사용
🔳 더 흐린 회색	#fafafa	거의 흰색에 가까움
🔲 테두리 선	라이트 그레이	#cccccc	박스 외곽선용
🔷 링크 기본색	파랑	#1976d2	구글/네이버 스타일
🟠 링크 오버색	주황	#fb8c00	마우스 올렸을 때
🔴 강조 텍스트	빨강	#d32f2f	예약 마감 등 주의 텍스트
✅ 안내/성공 배경	연초록	#e8f5e9	긍정적 안내 느낌
🟦 부드러운 포인트 배경	연파랑	#e3f2fd	하이라이트용

---

✅ 투명 배경 처리 (선택사항)

스타일코드설명

완전 투명	background: transparent;	어떤 배경에도 섞이도록
반투명 흰색	background-color: rgba(255,255,255,0.8);	흰색이지만 약간 투명

반투명 흰색 배경입니다.

✅ 추천 톤 구성 세트 (색상 3종 조합)

요소추천 색상코드용도 예시

기본 텍스트	다크 그레이	#333333	본문 글자, 부드러운 검정
배경 색	아주 연한 회색	#f9f9f9 또는 #ffffff	전체 배경, 박스
포인트 1 (링크/버튼)	블루	#1976d2	예약, 클릭 유도, CTA
포인트 2 (강조 텍스트)	오렌지	#fb8c00	마감, 혜택 강조, 주의
보조 테두리	연회색	#cccccc	박스 선, 구획 나누기

본문 요약 또는 예약 정보

a { color: #1976d2; text-decoration: none; } a:hover { color: #fb8c00; } 예약 바로가기

✅ 이 톤이 좋은 이유

장점설명

✔ 눈에 피로도가 낮음	흰배경 + 연회색 조합은 오래 읽기 좋음
✔ CTA 강조에 유리	파랑-주황은 클릭 유도 색상으로 입증
✔ 다양한 콘텐츠 호환	리뷰, 예약, 강의, 체험 등 전 장르 커버 가능
✔ 광고 몰입에 유리	콘텐츠 중심 디자인이라 광고가 더 잘 보임

 

---

✅ 선택형 포인트 조합 (원하는 분위기에 따라)

분위기포인트1포인트2

시원하고 신뢰감 있는	#1976d2(파랑)	#43a047(초록)
따뜻하고 부드러운	#f57c00(주황)	#6d4c41(브라운)
강렬하고 주목도 높은	#d32f2f(레드)	#fbc02d(노랑)