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. HEX 코드를 RGB로 직접 변환하는 방법은?
#RRGGBB 각 쌍을 16진수로 변환: R = 0xFF, G = 0x57, B = 0x33 → R=255, G=87, B=51. 이 도구는 3자리 축약형(#f53)도 각 자리를 반복해 6자리(#ff5533)로 자동 확장한 뒤 변환합니다.
Q. HEX 입력창에는 어떤 형식을 넣을 수 있나요?
3자리 축약형(#f0a), 6자리 표준형(#ff00aa), 8자리 알파 포함형(#ff00aa80)을 모두 인식합니다. 8자리로 입력하면 마지막 2자리(알파값)는 무시되고 앞 6자리 RGB 값만 반영됩니다 — 이 도구는 투명도 채널을 별도로 저장·표시하지 않습니다.
Q. 색상 히스토리는 언제 채워지나요?
네이티브 피커, HEX 입력, RGB 슬라이더, 프리셋 클릭으로 새 색상을 선택할 때마다 자동으로 히스토리 맨 앞에 추가됩니다(클립보드 복사 여부와는 무관). 같은 색을 히스토리에서 다시 클릭해도 중복 추가되지 않고, 최대 24개까지 보관되며 지우기 버튼으로 초기화할 수 있습니다.
Q. 보색(Complementary Color)은 어떻게 찾나요?
HSL에서 색조(Hue)에 180°를 더하면 보색. 예: 빨간색(Hue 0°)의 보색 = 청록(Hue 180°). 삼각색(Triadic)은 120°씩 추가.
Q. 선택한 색상값은 어떻게 복사하나요?
HEX·RGB·HSL·HSV 각 줄의 copy 버튼을 누르면 해당 형식 값이 즉시 클립보드에 복사되고 하단에 복사 완료 토스트가 표시됩니다. 복사한 HEX 값은 tailwind.config.js의 theme.extend.colors 같은 설정 파일에 그대로 붙여넣어 쓸 수 있습니다.
Q. 이 도구로 화면의 다른 색을 추출할 수 있나요?
아니요, 이 페이지 자체에는 스포이드(EyeDropper) 기능이 내장되어 있지 않습니다. 화면의 임의 픽셀 색상을 추출하려면 Chrome DevTools(요소 검사 → 스타일 패널의 색상 사각형 → 스포이드 아이콘)나 ColorZilla 같은 브라우저 확장 프로그램을 사용하세요.