Color Picker
HEX · RGB · HSL · HSV 변환 · 컬러 히스토리
Color Picker 완벽 가이드
색상을 선택하고 HEX·RGB·HSL·HSV 형식 간 자유롭게 변환하는 도구입니다. 웹 개발, 그래픽 디자인, UI/UX 작업에서 색상 코드는 필수 도구입니다. HEX(#FF5733)는 CSS에서 가장 널리 사용되는 형식, RGB(255, 87, 51)는 스크린 색상 합성, HSL(9°, 100%, 60%)은 색조·채도·명도 기반으로 직관적인 색상 조정에 적합합니다. HSV/HSB는 디자인 소프트웨어(Adobe, Figma)의 색상 팔레트 기본 형식입니다. R·G·B 슬라이더로 세밀하게 조정하고 원하는 형식으로 클립보드에 복사하세요.
활용 예시
- CSS 스타일시트 작성 시 HEX 코드 확인 및 복사
- Figma/Adobe XD 디자인에서 RGB/HSL 색상값 추출
- 브랜드 컬러(Primary, Secondary) 코드 저장 및 공유
- 팔레트에서 배경색·텍스트색 조합의 명도 대비 확인
- Tailwind CSS, Bootstrap 커스텀 컬러 변수 설정
- 히스토리 기능으로 최근 사용 색상 빠르게 재선택
자주 묻는 질문
Q. HEX, RGB, HSL 중 어느 형식을 사용해야 하나요?
CSS: HEX 또는 HSL 권장. HEX는 간결(#FF5733), HSL은 색조 조정이 직관적(hsl(9, 100%, 60%)). 투명도가 필요하면 rgba() 또는 hsla(). 디자인 툴: HSB/HSV가 표준.
Q. HSL과 HSB(HSV)의 차이는 무엇인가요?
HSL: 명도(Lightness) 100%=흰색, 0%=검정, 50%=순색. HSB/HSV: 밝기(Brightness) 100%=순색, 0%=검정. Photoshop·Figma는 HSB 사용. CSS는 HSL 사용.
Q. 웹 접근성(WCAG)을 위한 색상 대비 기준이 있나요?
WCAG 2.1 기준: 일반 텍스트는 배경 대비 4.5:1 이상, 큰 텍스트(18pt+)는 3:1 이상. 체크 방법: HSL 명도(Lightness) 차이가 크면 대비가 좋습니다. 전용 Contrast Checker 도구 병행 권장.
Q. HEX 코드를 RGB로 직접 변환하는 방법은?
#RRGGBB 각 쌍을 16진수로 변환: R = 0xFF, G = 0x57, B = 0x33 → R=255, G=87, B=51. 이 도구에서 HEX 입력 시 자동으로 RGB가 표시됩니다.
Q. 색상 히스토리 기능은 어떻게 사용하나요?
색상을 클립보드에 복사하면 히스토리에 자동 추가됩니다. 히스토리에서 이전에 사용한 색상을 클릭하면 다시 선택할 수 있습니다.
Q. CSS에서 opacity(투명도)는 어떻게 추가하나요?
HEX에 투명도 추가: #FF573380 (마지막 2자리 = 투명도, 80=50% 불투명). rgba(255,87,51,0.5) 또는 hsla(9,100%,60%,0.5)로도 표현 가능.
Q. 보색(Complementary Color)은 어떻게 찾나요?
HSL에서 색조(Hue)에 180°를 더하면 보색. 예: 빨간색(Hue 0°)의 보색 = 청록(Hue 180°). 삼각색(Triadic)은 120°씩 추가.
Q. 프리셋 색상에는 어떤 것들이 있나요?
Material Design, Tailwind CSS 등의 주요 시스템 컬러와 기본 웹 색상(빨강, 파랑, 초록 등)이 포함됩니다. 빠른 시작점으로 활용할 수 있습니다.
Q. 색상 값을 다른 앱에 붙여넣기 쉽게 복사하려면?
원하는 형식의 값(HEX/RGB/HSL/HSV)을 클릭하면 자동으로 클립보드에 복사됩니다. 복사 완료 시 토스트 메시지가 표시됩니다.
Q. 다크 모드와 라이트 모드에 적합한 색상 선택 기준은?
다크 모드 배경: HSL 명도 8~15% 범위. 라이트 모드 배경: 95~100%. 텍스트는 배경과 명도 차이가 클수록 좋습니다. WCAG 기준 4.5:1 이상 대비를 유지하세요.
Q. Tailwind CSS 커스텀 색상에 사용하려면?
tailwind.config.js의 theme.extend.colors에 HEX 코드를 추가합니다. 예: primary: { 500: '#FF5733' }. 이 도구로 HEX 코드를 선택하고 복사해 바로 사용하세요.
Q. 사용하는 브라우저에서 페이지의 색상 코드를 추출하려면?
Chrome DevTools의 색상 피커를 사용하세요: 요소 선택 → 스타일 패널 → 색상 사각형 클릭 → 스포이드 아이콘으로 화면의 어떤 색상이든 추출 가능합니다.