컬러 피커
색상 선택 및 코드 추출
| HEX | #4F46E5 |
| RGB | 79, 70, 229 |
| HSL | 243°, 75%, 59% |
컬러 피커 - 무료 온라인 색상 선택 도구
원하는 색상을 시각적으로 선택하고 HEX, RGB, HSL 색상 코드를 바로 복사할 수 있습니다. 웹 디자인, 앱 개발, 그래픽 작업 등에서 정확한 색상 코드를 빠르게 얻을 수 있습니다.
컬러 피커 사용 방법
- 색상 영역에서 원하는 색상을 클릭하여 선택합니다.
- 색상 슬라이더로 색조(Hue)를 조절합니다.
- HEX, RGB, HSL 코드가 실시간으로 표시됩니다.
- 원하는 코드를 클릭하여 클립보드에 복사합니다.
색상 코드 종류
- HEX - #RRGGBB 형식, 웹 CSS에서 가장 많이 사용
- RGB - rgb(R, G, B) 형식, CSS와 디자인 소프트웨어에서 사용
- HSL - hsl(색조, 채도%, 밝기%) 형식, 직관적 색상 조절에 유리
디자인에서 색상 선택 팁
- 브랜드 색상: 주요 색상 1개 + 보조 색상 2~3개로 일관성 유지
- 대비 확보: 텍스트와 배경 색상의 명도 차이를 충분히 두어 가독성 확보
- 60-30-10 법칙: 주 색상 60%, 보조 색상 30%, 강조 색상 10% 비율
자주 묻는 질문
Q. HEX, RGB, HSL 중 어떤 걸 써야 하나요?
A. CSS에서는 모두 사용 가능합니다. HEX는 짧고 편리하고, RGB는 투명도(rgba) 설정에 유리하며, HSL은 색상 변형(밝게/어둡게)에 직관적입니다.
Q. 웹 접근성을 위한 색상 대비 비율은?
A. WCAG 기준 일반 텍스트는 4.5:1, 큰 텍스트는 3:1 이상의 대비 비율을 권장합니다.
Q. 모니터마다 색상이 다르게 보이는 이유는?
A. 모니터의 색 공간(sRGB, DCI-P3 등), 밝기, 감마 설정이 다르기 때문입니다. 정확한 색 작업에는 모니터 캘리브레이션이 필요합니다.