이미지에서 색상 선택
이미지 컬러 피커
이미지 컬러 피커는 이미지에서 클릭한 픽셀의 정확한 색상 코드를 반환합니다. 돋보기가 포인터 아래의 픽셀을 보여 주며, 선택한 모든 색상에는 HEX, RGB, HSL, HSB, OKLCH, Lab, CMYK 값이 함께 제공됩니다.
- 무료, 가입 불필요
- 이미지는 기기 밖으로 전송되지 않음
- 정확한 픽셀 색상
색상을 선택할 이미지를 놓으세요
또는 Ctrl+V로 붙여넣기. JPG, PNG, WebP, GIF, AVIF, SVG. 최대 20개 이미지.
이미지에서 색상을 어떻게 선택하나요?
이미지에서 색상을 선택하려면 피커에서 이미지를 열고 원하는 픽셀을 클릭합니다.
이미지 열기
JPG, PNG, WebP, GIF, AVIF, SVG 파일을 놓거나, 붙여넣거나, 선택합니다. 이미지는 기기 밖으로 전송되지 않습니다.
돋보기로 조준
이미지 위로 포인터를 움직입니다. 돋보기는 포인터 주변 11×11 픽셀을 확대하고 포인터 아래의 픽셀에 윤곽선을 표시합니다.
클릭해 선택
클릭하거나 탭하면 해당 픽셀의 색상이 선택한 색상에 추가됩니다. 핀을 드래그해 옮기거나 방향키로 조금씩 이동합니다.
코드 복사
클릭 한 번으로 원하는 코드를 복사하거나, 선택한 모든 색상을 CSS, Tailwind, Adobe, Procreate 등으로 내보냅니다.
선택한 색상은 얼마나 정확한가요?
각 선택은 실제 픽셀의 값을 반환합니다. 피커는 이미지를 긴 변 기준 최대 2,048픽셀까지 스무딩 없이 읽으므로, 평균 계산으로 값이 바뀌지 않습니다.
사진 속 인접 픽셀은 조명, 질감, JPEG 압축이 만드는 작은 차이 때문에 값이 다른 경우가 많습니다. 영역 전체의 색상은 색상 팔레트 추출기에서 평균 설정으로 구하세요.
피커는 어떤 색상 코드를 보여 주나요?
피커는 선택한 각 색상에 대해 7가지 코드를 보여 주며, 코드마다 복사 버튼이 있습니다.
- HEX
- CSS와 디자인 앱용 6자리 코드
- RGB
- 0에서 255까지의 빨강, 초록, 파랑 채널
- HSL
- CSS용 색조, 채도, 명도
- HSB
- 앱 컬러 피커용 색조, 채도, 밝기
- OKLCH
- 최신 CSS용 지각 명도, 크로마, 색조
- CIE Lab
- 명도와 두 개의 색상 축, CSS
lab()형식 - CMYK
- 프린터 프로필 없는 인쇄 추정값
- 대비
- 흰색과 검은색에 대한 WCAG 2 대비율
팔레트 추출기 대신 피커를 사용해야 할 때는 언제인가요?
| 작업 | 도구 |
|---|---|
| 버튼이나 세부 요소처럼 특정 지점 하나의 코드 찾기 | 이미지 컬러 피커 |
| 이미지 전체의 주요 색상 얻기 | 색상 팔레트 추출기 |
| 가장자리 혼합 없이 정확한 로고 색상 얻기 | 로고 색상 추출기 |
| 코드에서 웹사이트 색상 얻기 | 웹사이트 색상 추출기 |
이미지 컬러 피커는 어디에 사용하나요?
색상 매칭
인쇄물이나 웹 레이아웃을 위해 사진 속 페인트, 원단, 제품 색상을 맞춥니다.
웹 디자인
디자인 스크린샷에서 버튼이나 배경의 정확한 색상을 복사합니다.
브랜드 작업
포장재나 간판 사진에서 브랜드 색상 하나를 가져와 출발점으로 삼습니다.
접근성 검사
색상 코드 탭에서 선택한 텍스트 색상의 흰색 및 검은색 대비를 확인합니다.
이미지 컬러 피커 자주 묻는 질문
사진 속 색상의 HEX 코드는 어떻게 얻나요?
이미지 컬러 피커에서 사진을 열고 색상을 클릭하세요. HEX 코드가 바로 나타나며, 옆에 복사 버튼이 있습니다.
휴대폰에서도 색상을 선택할 수 있나요?
네. 이미지를 탭해 픽셀을 선택한 다음, 핀을 드래그해 위치를 미세 조정하세요.
같은 물체인데 HEX 코드가 다르게 나오는 이유는 무엇인가요?
조명, 그림자, 압축 때문에 인접 픽셀의 값이 달라집니다. 물체에서 가장 균일한 영역을 선택하거나, 팔레트 추출기로 영역의 평균을 구하세요.
스크린샷에서 색상을 선택할 수 있나요?
네. 스크린샷을 찍은 뒤 Ctrl+V 또는 Command+V로 페이지에 붙여넣으세요.
선택 횟수에 제한이 있나요?
아니요. 필요한 만큼 색상을 선택할 수 있습니다. Procreate 내보내기에는 처음 30개 색상이 들어가고, 코드 형식에는 모든 색상이 들어갑니다.