HTML Color Picker
색상을 선택해 실시간으로 미리보고, HEX/RGB/HSL 값을 바로 복사할 수 있습니다.
사용 방법
- 컬러 피커에서 원하는 색상을 선택하세요.
- (선택) HEX 값을 직접 입력하세요.
- HEX, RGB, HSL 버튼으로 값을 복사하세요.
실시간 미리보기
선택한 색상: #3B82F6
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HTML Color Picker 빠른 가이드
색상을 빠르게 고르고 포맷을 비교한 뒤, 실무 색상 가이드로 자연스럽게 이어갈 수 있습니다.
이 도구가 필요한 상황
- CSS나 디자인 토큰에 넣을 정확한 색상 값을 빠르게 정해야 할 때
- 팀에서 HEX, RGB, HSL 형식이 섞여 전달될 때
- 디자인 파일을 열기 전에 UI 색상 아이디어를 먼저 확인하고 싶을 때
빠른 사용 순서
- 피커에서 기본 색상을 고르거나 HEX 값을 입력하세요.
- 실시간 미리보기로 색감이 맞는지 확인하세요.
- 사용 환경에 맞게 HEX, RGB, HSL 중 하나를 복사하세요.
자주 하는 실수
- 작업 환경과 다른 포맷 값을 그대로 복사하는 실수
- UI 상태 구분이 어려운 비슷한 색상만 사용하는 실수
- 기본 색상만 저장하고 hover/어두운 배경용 색상은 놓치는 실수
관련 HTML Color Picker 가이드
웹 색상을 더 정확하게 선택하고 검증하는 짧은 실무 가이드를 확인하세요.