HTML 색상 코드 & 컬러 피커 가이드
웹사이트 제작, 블로그 스킨 꾸미기, 상세페이지 디자인 시 필수적인 HTML 색상 코드 표기법(HEX, RGB, HSL)과 온라인에서 원하는 색상을 클릭만으로 추출할 수 있는 W3Schools 공식 컬러 피커(Color Picker) 활용 가이드입니다. 복잡한 그래픽 툴 없이도 완벽한 색상 코드를 1초 만에 복사하여 적용할 수 있습니다.
실시간 HEX(#RRGGBB), RGB(r,g,b), HSL, 명도/채도 팔레트 자동 생성
웹에서 사용되는 3대 색상 표기 방식
1. HEX 코드 (#RRGGBB)
16진수(00~FF) 6자리로 빨강, 초록, 파랑의 세기를 표현하는 웹 표준 표기법입니다. 가장 널리 사용되며 짧고 직관적입니다. (예: #0066cc)
2. RGB / RGBA
0~255 범위의 10진수로 표현하며, RGBA는 마지막에 투명도(Alpha 0~1)를 지정할 수 있어 반투명 배경 처리에 필수적입니다. (예: rgba(0, 102, 204, 0.8))
3. HSL (색상, 채도, 명도)
색조(Hue 0~360°), 채도(Saturation 0~100%), 명도(Lightness 0~100%)로 구성되어 인간의 시각적 직관과 가장 잘 맞는 표기 방식입니다.
자주 쓰이는 웹 대표 컬러 팔레트 코드 표
| 색상 미리보기 | 색상명 | HEX 코드 | RGB 코드 | 주요 용도 |
|---|---|---|---|---|
| Wikiutil Blue | #0066CC | rgb(0, 102, 204) | 신뢰감, 주요 버튼 및 헤드라인 강조 | |
| Success Green | #28A745 | rgb(40, 167, 69) | 성공, 안전, 다운로드 완료 안내 | |
| Danger Red | #DC3545 | rgb(220, 53, 69) | 경고, 삭제, 중요 오류 알림 | |
| Warning Amber | #FFC107 | rgb(255, 193, 7) | 주의 사항, 별점 평점, 팁 박스 | |
| Charcoal Black | #333333 | rgb(51, 51, 51) | 눈이 편안한 본문 기본 텍스트 색상 |
자주 묻는 질문 (FAQ)
Q1. 웹 브라우저에서 특정 사이트의 색상을 바로 추출할 수 있나요?
키보드의 F12를 눌러 개발자 도구를 연 뒤, 스타일 창의 아무 색상 네모 상자를 클릭하면 브라우저 내장 스포이트 툴이 활성화되어 웹페이지 위 어떤 영역의 색상이든 즉시 클릭하여 추출할 수 있습니다.
Q2. HEX 코드는 대소문자를 구분하나요?
아닙니다. #0066cc와 #0066CC는 완전히 동일하게 인식되므로 자유롭게 작성하셔도 무방합니다.