이미지 컬러픽커
사진이나 스크린샷을 선택한 뒤 픽셀을 클릭하면 HEX·RGB·HSL 값을 확인하고 복사할 수 있습니다. 파일은 브라우저 안에서만 처리됩니다.
선택한 색상
- HEX
#0066cc - RGB
rgb(0, 102, 204) - HSL
hsl(210, 100%, 40%)
수동 조정 (HSV)
선택한 색상
선택한 색상이 여기에 표시됩니다.
이미지 컬러픽커 사용 방법
이미지를 선택하고 픽셀을 지정한 뒤 필요한 색상 값을 복사하세요.
이미지 선택하기
선택 영역을 클릭하거나 JPG·PNG·WebP 이미지를 끌어다 놓으세요. 지원되는 데스크톱 브라우저에서는 ‘데스크톱 화면에서’ 탭으로 화면의 다른 위치에서 색을 가져올 수도 있습니다.
원하는 지점 클릭하기
마우스를 이미지 위에 올려 확대경을 연 뒤 픽셀을 클릭하세요. 방향키로 1px씩 이동하고, 스크롤로 확대·축소하거나 드래그해 화면을 옮길 수 있습니다.
색상 값 확인·조정하기
선택한 색상의 HEX·RGB·HSL 값이 표시됩니다. 추출한 색을 그대로 쓰지 않고 변형하려면 HSV 슬라이더를 사용하세요.
복사해서 사용하기
각 색상 값 옆의 복사 버튼을 누르면 클립보드에 저장됩니다. 고른 색상은 선택 기록에 쌓이므로, 여러 색을 고른 뒤 '전체 복사'로 한 번에 가져가 CSS나 디자인 도구에 붙여넣을 수 있습니다.
특정 픽셀의 색상 확인
이미지를 선택하고 지점을 클릭하면 해당 픽셀의 HEX·RGB·HSL 값을 확인할 수 있습니다. 로고, 배경, 버튼, 일러스트의 색상을 확인할 때 사용하세요.
세 가지 형식으로 값 복사
선택한 색상을 HEX, RGB, HSL 중 필요한 형식으로 복사해 디자인 도구, 스타일시트, 문서에 붙여넣을 수 있습니다.
컬러픽커가 필요한 작업
이미지에 이미 있는 색상의 값을 확인해야 할 때 사용할 수 있습니다.
브랜드 색상 확인
로고 이미지나 브랜드 사진에서 정확한 대표 색상을 추출해 명함, 웹사이트, 발표자료에 일관되게 적용할 수 있습니다. 가이드 문서가 없는 브랜드 색을 빠르게 파악할 때 특히 유용합니다.
웹 개발 중 색상 값 추출
참고하고 싶은 웹사이트의 스크린샷을 찍어 버튼, 배경, 텍스트 색상을 HEX 값으로 바로 확인하세요. 개발자 도구를 열지 않고도 CSS에 필요한 색상 코드를 얻을 수 있습니다.
디자인 시안 검수
디자인 시안과 실제 구현 화면을 각각 캡처해 같은 위치의 색상 값을 비교하면, 시안과 다르게 구현된 색을 객관적인 수치로 확인할 수 있습니다.
자주 묻는 질문
추출한 색상 값은 어떤 형식으로 확인할 수 있나요?
선택한 색상은 대표적으로 HEX, RGB, HSL 형식으로 확인할 수 있습니다.
| 형식 | 예시 | 주로 사용하는 곳 |
|---|---|---|
| HEX | #0066cc | HTML, CSS, 디자인 시스템 |
| RGB | rgb(0, 102, 204) | CSS, JavaScript, 그래픽 작업 |
| HSL | hsl(210, 100%, 40%) | 색상 밝기, 채도 조정 |
HEX는 웹 디자인에서 가장 많이 쓰이고, RGB는 화면 색상 표현에 직관적이며, HSL은 색상의 밝기와 채도를 조정할 때 편리합니다.
스크린샷에서도 색을 추출할 수 있나요?
네. 웹사이트, 앱 화면, 디자인 시안, 문서를 캡처한 이미지를 선택한 뒤 원하는 위치를 클릭하면 색상을 확인할 수 있습니다. 웹페이지의 버튼이나 배너 배경, 로고, 아이콘 색상을 확인할 때 활용할 수 있습니다. 다만 스크린샷이 압축되었거나 다른 배율로 캡처되었다면 원래 화면의 픽셀 값과 다를 수 있습니다.
추출한 색상은 정확한가요?
이미지에 표시된 픽셀 기준으로 색상을 추출하기 때문에, 클릭한 위치의 색상 값을 확인할 수 있습니다. 다만 이미지가 압축되었거나, 그림자·그라데이션·투명도·안티앨리어싱이 적용된 경우에는 주변 색상과 섞여 보일 수 있습니다. 정확한 색상을 얻고 싶다면 단색 영역을 클릭하거나, 원본에 가까운 고화질 이미지를 사용하는 것이 좋습니다.